如果你过去很长时间都在用 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 页面当成普通文章模板来做。
产品分类页为什么容易卡壳:结构、导航、筛选和样式都不能混着做
产品分类页是最容易让人“看起来差不多能做,细节却老是不对”的地方。我们这次项目里遇到的高频问题几乎都集中在这里:
- 顶部需要 breadcrumb,但
Product Breadcrumbsblock 只能用于单产品模板 - 左侧产品分类导航桌面端可以,到了平板和手机端全部展开,体验很差
- 产品卡片模板能建出来,但摘要行数、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,实际上更常见的问题是:没有启用对应的 Pro 模块,或者没有理清 Theme Pro、Blocks Pro、Shop Kit 与常用扩展之间的功能分工。
Kadence 官方本身就是按模块拆分产品线,例如 Theme Kit Pro 负责 Hooked Elements、额外模板与主题增强,Blocks Pro 负责动态内容、条件显示与更多专业区块,而 Shop Kit 则主要扩展 WooCommerce 的产品模板与商店功能。
对于希望减少试错成本、更快完成建站部署的用户,更适合按实际需求配齐对应模块。WP 建站大师 也提供 Kadence Pro 及常用扩展资源,适合用来搭建企业官网、内容站、外贸展示站与 WooCommerce 网站。
如果你希望少折腾、快速部署 Kadence 主题站点,也可以直接在 WP 建站大师 获取 Kadence Pro 及常用扩展方案。
我们最终总结出的 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 建站方案、结构设计和排错经验。
暂无评论