如果你过去很长时间都在用 Elementor 搭建 WordPress 网站,第一次切换到 Kadence Theme + Gutenberg,大概率会有一种很强烈的落差感:页面能做,但一碰到文章归档、WooCommerce 产品详情页、产品分类页、品牌页、Mega Menu、面包屑导航、移动端筛选这些“结构型内容”,就会发现 Kadence 的思路和 Elementor 完全不是一回事。Kadence 官方当前的能力边界也很清晰:主题结构更多依赖 Hooked Elements,WooCommerce 的深度模板则依赖 Kadence Shop Kit 的 Product Templates(Woo Templates),而不是像 Elementor 那样用同一套可视化模板逻辑把所有页面都包圆。

这篇文章不是泛泛介绍 Kadence,而是基于我们最近一个真实外贸展示站项目做的完整复盘。客户要求非常明确:整站尽量使用 WordPress 原生古腾堡编辑器,不使用 Elementor,要求更轻、更稳、更利于 SEO,且后期维护成本要低。 也正因为这个项目,我们把 Kadence 主题下单页面、文章系统、产品模板、品牌页、Mega Menu、面包屑、移动端 Off Canvas Sidebar 等关键问题都重新梳理了一遍。最后得出的结论很直接:Kadence 完全可以做复杂网站,但前提是你必须接受它是“主题全局结构 + 区块内容 + 动态模板”这套原生 WordPress 逻辑,而不是 Elementor 的替身。

为什么这个项目最终选择 Kadence,而不是继续使用 Elementor

这次项目之所以最终落到 Kadence 上,不是因为 Kadence 比 Elementor 更花哨,而是因为客户要的恰恰不是“花哨”,而是更轻量、更结构化、更适合长期维护。Kadence Theme 本身负责全局结构和主题层能力,Kadence Blocks 用来增强古腾堡布局,Hooked Elements 用来接管单页、归档和内容插入位置,而 WooCommerce 的产品页、归档页、产品卡片模板,则由 Kadence Shop Kit 的 Woo Templates 负责。也就是说,Kadence 的体系分工比 Elementor 更明确,这恰好适合外贸站、企业站、产品展示站这类更强调结构和可维护性的网站。

从项目执行角度看,这个选择后面也被证明是对的。页面编辑体验确实没有 Elementor 那么“所见即所得”,但网站结构会更干净:单页面放在 Pages 里处理,文章归档走 Archive 体系,产品模板走 Woo Templates,自定义内容类型走 CPT + Dynamic Content。换句话说,Kadence 更适合把网站当成“内容系统”来建设,而不是把网站当成一堆可拖拽的视觉页面来拼。

Kadence 建站最重要的思维切换:页面、模板、动态内容要分层处理

从 Elementor 转到 Kadence 之后,第一件事不是学某个功能入口,而是要先把思路改掉。过去在 Elementor 里,我们很习惯用同一套方式去做:首页、文章模板、产品页、归档页,几乎都可以通过 Theme Builder 去统一接管。但在 Kadence 下,这套思路会很快撞墙。因为 Kadence 的最佳实践其实是分层的:普通页面归普通页面,文章归文章体系,WooCommerce 归 WooCommerce,自定义内容类型归 CPT。

举个最简单的例子:首页、关于我们、联系我们、服务页、FAQ 这类页面,本质上还是“独立页面内容”,最标准的做法仍然是在 Pages 里直接建立页面,然后用 Gutenberg / Kadence Blocks 去搭内容。它们不需要为了“模板化”而强行塞进模板系统里,因为模板系统更适合管理的是“同类内容的统一结构”,而不是每个独立页面的个性化内容。Kadence 官方关于 Hooked Elements 和 Template Elements 的文档,本质上也是在强调:模板更适合做可复用结构,内容仍然应该留在内容本身。

普通页面怎么做:Kadence 下的单页面仍然应该放在 Pages 里

这次项目中的首页、关于我们、联系我们、若干服务页,最终全部都是直接在 Pages 里用古腾堡编辑器完成的。为什么这么做最稳?因为这类页面更像“内容容器”,并不依赖归档查询、单篇循环、产品动态字段。你真正需要控制的是:内容宽度、标题层级、图片区块、按钮样式、图文排版、响应式布局,而 Kadence Blocks 正好就是用来解决这些问题的。

在执行过程中,我们实际采用的方式是:先统一好全站的色彩、字号、按钮样式、Section 间距和内容宽度,再在页面里搭 Hero、卖点区、产品推荐区、FAQ、CTA 等模块。这样做的最大好处是,普通页面始终保持简单,后期客户要改文案、换图片、加区块时,也不需要理解复杂的模板继承关系。 这也是从 Elementor 切换到 Kadence 后最值得坚持的一条原则:能直接在内容页解决的问题,就不要先想到模板。

文章系统应该怎么建:News 页面、分类页和 Post Archive 的正确关系

文章系统是这次项目里另一个非常关键的部分。很多用户在 Kadence 下第一次做博客都会搞混一个问题:“新闻”这个入口到底是普通页面、文章页,还是某个分类页? 最终我们采用的方案是:先建立一个普通 Page,命名为 News,然后到 设置 → 阅读 中把它指定为 文章页(Posts Page)。WordPress 本身就是通过 page_for_posts 这个选项来识别文章页的,这也是获取博客入口最标准的方式。

这样一来,“新闻”就成为博客列表入口,而“行业新闻”“公司新闻”这些则继续作为 分类归档页 存在。也就是说,这三类页面本质上都属于文章归档体系。Kadence 的文章归档模板和 Archive Content 替换逻辑,天然就适合处理这种结构:一个主博客页,外加多个分类页,共用同一套 archive 体系,只是在标题、描述、breadcrumb、查询结果上有所不同。

这里有一个很重要的细节要提醒:Posts Page 不等于普通页面。 一旦 News 被设为文章页,它就更像一个“博客容器页”,前台展示的主体内容是文章列表,而不是你在那个页面编辑器里填的正文。很多 WordPress 开发者文档和社区经验也都反复强调过:Posts Page 更像容器,而不是一个正常的独立内容页。

为什么文章分类页的面包屑经常不会自动带上“新闻”这一层

这次项目里有一个很典型的现象:Brand 单页面包屑在开启 has_archive 之后可以显示成 首页 / Brands / brand01,但文章分类页却往往只显示成 首页 / 行业新闻,而不会自动变成 首页 / 新闻 / 行业新闻。这不是 Kadence 出错,而是 WordPress 对 CPT archive 和 Posts Page 的层级认知本来就不是一套逻辑。CPT 的 has_archive 是原生结构的一部分,而 Posts Page 只是博客列表入口,它不会天然成为所有 category archive 的父级。

所以,如果你在文章分类页里看到 breadcrumb 缺少“新闻”这一层,这是正常现象。Kadence 官方也支持切换 breadcrumb engine 到 Yoast、Rank Math、SEOPress 等其他引擎,这也是因为不同引擎对博客层级的处理方式并不完全一致。对于博客类站点,如果你非常在意 首页 / 新闻 / 分类名 这种路径展示,通常比继续硬靠 Kadence 内置 breadcrumbs 更稳的做法,是切到更适合定制层级的 SEO 面包屑引擎,或者在归档模板中手动补上这层链接。

WooCommerce 产品详情页:不要再用普通 Elements 去硬接

这是整个项目中最关键的一次认知转变。最开始我们也试过在 Kadence Elements 里建立模板,然后通过 Replace Single Post Content 去接管 WooCommerce 单产品页,看起来似乎和 Elementor 时代“套一个模板”很像,但很快就发现这条路不对。原因在于:WooCommerce 单产品页并不是普通文章内容页,它有自己完整的产品模板结构。 Kadence 官方现在已经把这件事讲得非常清楚——WooCommerce 相关模板应该走 Kadence Shop Kit 的 Product Templates(Woo Templates),而不是拿普通 Template Element 去替换产品页内容区。

最终我们采用的正确方案是:

  • 产品详情页 → Single Product Woo Template
  • 产品分类页 → Product Archive Woo Template
  • 产品卡片 → Product Catalog Loop Item Template

这三层各管各的事情。Single Product Template 负责产品详情页结构,比如图库、标题、价格、描述、参数、CTA;Product Archive Template 负责产品分类页整体布局与查询;Loop Item Template 负责单个产品卡片的外观和内容。Kadence 官方对 Product Templates 的定义就是如此:用 Woo Template Blocks 动态输出 WooCommerce 的各种元素,而不是把 Woo 页面当成普通文章模板来做。

Kadence - Woo Templates
Kadence – Woo Templates

产品分类页为什么容易卡壳:结构、导航、筛选和样式都不能混着做

产品分类页是最容易让人“看起来差不多能做,细节却老是不对”的地方。我们这次项目里遇到的高频问题几乎都集中在这里:

  • 顶部需要 breadcrumb,但 Product Breadcrumbs block 只能用于单产品模板
  • 左侧产品分类导航桌面端可以,到了平板和手机端全部展开,体验很差
  • 产品卡片模板能建出来,但摘要行数、hover 阴影、边框、按钮位置等,很多细节没有现成设置项
  • 产品列表上方的 off-canvas 筛选按钮可以打开,但按钮居中、桌面端隐藏等行为没有面板开关

这些问题的根源其实都一样:Kadence Product Archive 负责的是结构和查询,不代表所有视觉细节都会做成可视化选项。 官方对 Product Archive Woo Templates 的定位很明确:可以用 Archive: Main Query Block 做标准归档布局,或者用 Advanced Query Loop Block 做更灵活的控制。真正到卡片细节和移动端交互时,很多地方依然需要 CSS 补位。

这也是我们最终总结出的一个非常实用的 Kadence 原则:
用模板和区块解决 80% 的结构问题,用 CSS 解决最后 20% 的细节问题。
比如:摘要两行省略、hover 阴影、按钮居中、桌面端隐藏移动筛选按钮,这些都更适合用 CSS 收尾,而不是在面板里找开关。Kadence Blocks 官方也明确支持区块级自定义 CSS。

移动端产品分类页,最好的方案不是硬塞一个左侧栏,而是 Off Canvas Sidebar

在桌面端,产品分类页左侧放一个分类导航栏是很常见的做法;但到了平板和手机端,如果还把整列分类导航直接显示在页面中,体验会非常差。参考站那种“只显示一个按钮,点击后从右侧滑出全部分类”的方式,实际上更接近现代 WooCommerce 站点的标准体验。Kadence 官方在 WooCommerce Addons 中提供了 Catalog Off Canvas Sidebar 相关能力,本质上就是为这个场景准备的。

不过这里也有一个容易踩坑的点:很多人按文档去后台找,却找不到 Off Canvas Sidebar,最后以为是功能没有。我们这次项目中就遇到了这个问题,最后发现关键不在“会不会用”,而在于对应的 WooCommerce Addons 能力有没有启用。这也是 Kadence 体系里一个很典型的问题:功能不是不存在,而是模块没打开。

最终最稳的移动端分类页方案就是:

  • 桌面端保留左侧分类栏
  • 平板 / 手机端隐藏左侧分类栏
  • 顶部只保留一个筛选 / 分类按钮
  • 点击后右侧滑出 off-canvas 面板

这套方案既符合用户使用习惯,也更符合 Kadence 当前的 WooCommerce 能力边界。

Brand 不属于产品分类体系:更适合用自定义文章类型页面来实现

这个项目里还有一类内容非常典型:Brand 自定义文章类型页面。客户参考的网站上有一组品牌入口,顶部是多个品牌 logo 卡片,点击后进入对应内容详情页,下面是介绍、应用场景、相关内容等结构。最开始也有人会本能地想:是不是可以直接把 Brand 做成 WooCommerce 产品分类?但这个项目很快证明,这种做法并不合适。因为这里的 Brand 并不等于 WooCommerce 产品分类,它更像一套独立的内容系统。

最终我们采用的方案是:

  • 用 ACF 建立一个 Brand 自定义文章类型(CPT)
  • 每个 Brand 一篇内容
  • 用 Kadence Template Elements 建立 Brand 单页模板
  • 顶部统一放导航区
  • 下方内容区走同一套模板,只替换具体 Brand 内容

Kadence 官方是支持这种做法的:Hooked Elements 可以对自定义文章类型进行模板接管,而 Dynamic Content / Dynamic HTML 则可以把 Post Title、Post Content 以及 ACF 字段动态输出到模板中。

为什么在 Brand 模板里插 Content block 会报错

这是我们在搭 Brand 自定义文章类型单页模板时踩到的一个非常具体、但又很典型的坑。
我们已经建立好了 Brand 这个 CPT,也建立了 Template Element 作为详情页模板,结果当尝试用核心的 Content 块来显示正文时,后台直接报错:

Block ‘content’ can not be inserted

一开始很容易误以为是 ACF、CPT 或模板设置有问题,但查下来真正的原因是:在 Kadence Template Elements 这套上下文里,不要依赖核心的 Content / Post Content 占位块来输出正文。 Kadence 当前官方推荐的方案,是使用 Dynamic HTML block,然后把动态来源设置为 Post Content。Kadence Dynamic Content 官方文档也明确说明,它可以动态输出默认内容,例如 Post Title 和 Post Content,同时还可以调用 ACF、Meta Box 等自定义字段。

所以在 Kadence 的 CPT 单页模板中,如果你需要输出正文,最稳的做法不是继续尝试插 Content block,而是:

Dynamic HTML → Source: Post Content

Brand 的 breadcrumb 为什么可以正常带上 archive

Brand 这套内容后来之所以能在面包屑里显示成:

首页 / Brands / brand01

关键原因在于我们最终给 Brand CPT 开启了 has_archive。WordPress 原生的自定义文章类型支持通过 register_post_type()has_archive 参数生成 CPT archive;一旦 Brand 真的拥有 archive 层级,Kadence 的 breadcrumb 才更容易识别出中间这一层。

这个现象对理解 WordPress 的结构很有帮助:
只要它是原生结构的一部分,主题和 breadcrumb 引擎就更容易自动识别;如果它只是“你手工做的某个页面”,主题就未必会把它当成系统级层级。

Mega Menu 不是普通菜单,Kadence 里做法也不一样

在这个项目中,顶部导航还需要实现一种常见的大站样式:主菜单悬浮后,下方出现整块 full-width 子菜单区域,一行 4 列,可以多行显示。这种效果很多站长直觉上会叫“下拉菜单”,但从实际实现角度来说,它已经不是普通二级菜单,而是 Mega Menu。Kadence 官方关于 Advanced Navigation 的文档里,也明确把这种模式称为 Mega Menu,并支持全宽布局、多列排版以及插入自定义 block 内容。

这类菜单最适合的实现方式,不是继续用普通菜单结构去硬嵌套,而是:

  • Advanced Header / Advanced Navigation
  • 给父级菜单项开启 Mega Menu
  • 在 Mega Menu 容器中使用列布局
  • 每列里放一组标题 + 子链接,必要时还可以放图片、说明或按钮

这种做法的好处是结构清晰、视觉更专业、也更适合企业站和外贸站的信息组织。尤其是当你有很多产品线、品牌入口、解决方案入口时,Mega Menu 比普通菜单可读性高得多。

为什么 Kadence 经常会出现“文档里有,后台里找不到”的情况

如果你刚接触 Kadence,很容易怀疑一件事:
为什么官方文档里明明写了某个功能,结果我在后台里却完全找不到?

这次项目里,我们遇到过至少三次这种情况:

  • 找不到 Hooked Elements
  • 找不到 Woo Templates
  • 找不到 Off Canvas Sidebar

最后排查后发现,这几乎都和同一个原因有关:相关模块没有启用,或者需要对应的 Pro / Addons 能力。 Kadence 官方对这些模块的依赖关系其实写得很清楚:Hooked Elements 需要启用 Theme Kit Pro 中的对应功能;Woo Templates 需要启用 Shop Kit 的 Product Templates;某些 WooCommerce 相关增强能力则挂在 WooCommerce Addons 下。

所以做 Kadence 项目时,一个非常重要的排查习惯是:
先确认后台有没有启用对应模块,再去讨论这个功能怎么用。
这能省掉很多无效试错。

我们最终总结出的 Kadence 建站最佳实践

经过这个项目之后,我们对 Kadence 主题下的建站路径做了一个很清晰的总结。对于企业官网、外贸展示站、WooCommerce 产品展示站来说,这套结构目前是非常稳的:

普通页面,如首页、关于我们、联系我们、服务页,全部直接放在 Pages 里用古腾堡搭建;文章系统则通过 News 页面 + Posts Page + 分类归档 组成统一的博客结构;文章详情页和文章归档页用 Hooked Elements / Archive 体系来管理。WooCommerce 则彻底分层:产品详情页走 Single Product Woo Template,产品分类页走 Product Archive Woo Template,产品卡片单独用 Catalog Loop Item Template 管理。品牌页则不再硬绑到产品分类,而是用 Brand CPT + ACF + Template Elements + Dynamic HTML / Dynamic Content 形成一套独立品牌内容系统。至于 Mega Menu、移动端筛选、面包屑等,则根据 Kadence 的现有模块能力和必要的 CSS 补充来完成。

这套结构最大的优点,不是“功能特别炫”,而是:
清晰、稳定、好维护。
页面归页面,模板归模板,动态内容归动态内容,Woo 归 Woo,品牌归品牌。你不会再像在 Elementor 里那样,把所有内容都塞进一个巨大的模板系统里,后期改一个地方就怕牵一发动全身。

结语:Kadence 不是 Elementor 的平替,而是一套更原生的 WordPress 建站方法

如果用一句话来总结这个项目,我会说:

Kadence 不是 Elementor 的平替,而是一套更接近 WordPress 原生逻辑的建站方法。

它的学习曲线确实和 Elementor 不一样,刚上手时你会更容易卡在模板结构、归档逻辑、动态内容这些地方。但只要真正把这套思路理顺,你会发现 Kadence 很适合做那些对结构、性能、可维护性要求更高的网站。尤其是外贸展示站、企业官网、产品展示型 WooCommerce 网站,它的优势会越来越明显。

如果你也正在从 Elementor 转向 Kadence + Gutenberg,或者正在研究如何用更轻量的方式搭建 WordPress 网站,希望这篇文章能帮你少走一些弯路。


想用 Kadence 主题搭建企业官网、外贸展示站或 WooCommerce 产品展示站?
如果你也在从 Elementor 转向古腾堡,或者正在为产品模板、自定义文章类型页面、Mega Menu、文章归档、面包屑导航、移动端筛选这些问题头疼,欢迎关注 WP 建站大师。我们会持续更新更多基于真实项目的 WordPress 建站方案、结构设计和排错经验。