Kadence 主题教程:免费搭建 WordPress 企业网站
- 数臻源码
- 分类: 主题教程
- 标签: Kadence, Kadence Starter Templates
Kadence 主题教程适合想用免费主题搭建企业官网、技术博客、外贸站或 WooCommerce 商店的 WordPress 用户。Kadence 的特点不是堆叠大量花哨组件,而是把全局颜色、字体、页眉页脚和内容布局集中在主题自定义器中,让网站保持统一,也方便后续维护。
本文按照“安装与选型 → 全局设计 → 页眉页脚 → 内容模板 → 性能与 SEO”的顺序,完整介绍 Kadence 免费版的实用配置。教程基于 WordPress.org 在 2026 年 8 月提供的 Kadence 1.5.2;界面名称以后可能略有变化,但配置思路仍然适用。
一、Kadence 主题是什么?
Kadence 是一款基于 WordPress 自定义器的轻量主题,并不是 WordPress 全站编辑器(FSE)主题。它提供拖放式页眉和页脚生成器、全局颜色与字体、页面与文章布局、WooCommerce 选项,以及 Starter Templates 模板库。根据 WordPress.org 主题页面,截至本文更新时,它拥有 50 万以上启用安装量,评分为 4.9 分。
| 项目 | 本文使用的信息 |
|---|---|
| 主题版本 | Kadence 1.5.2 |
| 最低 WordPress | WordPress 6.3 |
| 最低 PHP | PHP 7.4 |
| 适合网站 | 企业官网、博客、外贸站、课程站、WooCommerce 商店 |
| 主要编辑方式 | WordPress 自定义器 + 区块编辑器,可兼容 Elementor 等页面编辑器 |
二、Kadence Theme、Kadence Blocks 和 Starter Templates 有什么区别?
新手最容易在这里混淆。它们属于同一套生态,但用途不同,不必为了使用主题而全部安装。
| 产品 | 作用 | 是否必须 |
|---|---|---|
| Kadence Theme | 控制全站基础样式、页眉页脚、文章和归档布局 | 使用 Kadence 时必须 |
| Kadence Blocks | 给 Gutenberg 增加高级行列、信息框、按钮等区块 | 可选;原生区块够用就不装 |
| Starter Templates | 导入整站或单页演示模板 | 可选;空白建站不需要 |
| Kadence Pro / Blocks Pro | 增加高级页眉、条件元素、Hook、动态内容等功能 | 按项目需求购买 |
我的建议是先只安装 Kadence Theme。确定原生功能不足时,再增加 Kadence Blocks 或 Pro。插件越多不一定越专业,清晰的职责边界反而更容易长期维护。
三、更换主题前先做什么?
- 完整备份数据库与
wp-content,并确认备份可以恢复。 - 企业站或已有流量的网站,先在测试环境完成换主题和响应式检查。
- 记录当前菜单、侧边栏、小工具、页眉代码和统计代码的位置。
- 不要在已有正式站点直接执行“整站模板导入”,它可能新增页面、菜单和演示内容。
- 确认缓存插件、CDN 和对象缓存都有可用的清理方法。
切换主题通常不会删除文章、页面和媒体文件,但主题模板、菜单位置、小工具区域及页面编辑器样式可能发生变化。官方也建议在干净站点或测试环境中导入 Starter Template。
四、安装并启用 Kadence 免费主题
- 进入 WordPress 后台的“外观 → 主题”。
- 点击“添加新主题”,在搜索框输入 Kadence。
- 确认作者和主题名称后,点击“安装”,然后点击“启用”。
- 进入“外观 → 自定义”,开始配置全局样式和布局。
如果后台无法在线安装,也可以从 WordPress.org 下载官方主题压缩包,再通过“上传主题”安装。不要从来源不明的网站下载所谓破解版主题,因为主题文件能够执行 PHP 代码,安全风险远高于普通前端模板。
五、空白搭建还是导入 Starter Template?
适合空白搭建的情况
- 网站已有内容,只想替换主题和统一视觉。
- 你有明确的品牌规范、线框图或设计稿。
- 希望减少演示数据、冗余页面和不必要插件。
适合 Starter Template 的情况
- 新站点需要快速建立首页、关于我们和联系页面。
- 还没有成熟的布局思路,希望先用模板搭建原型。
- 可以接受导入前先备份,并在导入后重新检查图片、文字和链接。
使用模板时,安装官方 Starter Templates 插件,选择 Gutenberg 或你正在使用的页面编辑器,再预览并导入。正式网站建议只导入真正需要的页面,而不是一次性导入整套演示站。
六、先设置全局颜色、字体和按钮
一个长期可维护的网站,应该先定义设计系统,再制作单个页面。进入“外观 → 自定义 → Colors & Fonts(颜色与字体)”,优先完成下面三项。
1. 全局颜色
Kadence 调色板通常包含强调色、对比色、背景色和提示色。企业站可以把品牌主色放在 Accent 1,把悬停或深色版本放在 Accent 2,再准备正文、次要文字、边框和浅背景色。页面元素应引用全局颜色,不要在每个组件里重复填写十六进制色值。
2. 中文字体
中文网站优先使用系统字体栈,通常比远程字体更快,也能减少字体闪烁。正文建议 16–18px、行高 1.75–1.9;桌面端 H1 可从 38–48px 起步,移动端降至 30–36px。标题不要只靠字号区分,还应保持清晰的上下间距。
3. 按钮与链接
统一按钮圆角、内边距、字体粗细和悬停状态。主按钮使用品牌色,次按钮使用描边或浅色背景;同一个页面不要出现三四套不同按钮风格。
七、配置页眉、导航和页脚
Kadence Header Builder 提供三行布局,每行又分左、中、右三个区域。你可以把 Logo、主导航、搜索、按钮和社交图标拖入对应位置;页脚生成器的操作方式相似。
- 第一行只放必要信息,例如公告或联系方式,不需要就关闭。
- 主行放 Logo、核心菜单和一个明确的“联系我”按钮。
- 菜单层级不要过深,移动端最好在两次点击内找到目标内容。
- 单独切换到平板和手机预览,检查移动菜单、Logo 尺寸与按钮宽度。
- 透明页眉只适合有深色首屏背景的页面,普通文章页建议使用实体背景。
Kadence 的移动端断点默认是 1024px。不要只缩小桌面窗口判断效果,最好用真机测试菜单开关、下拉菜单、搜索框和悬浮按钮。
八、设置页面、文章和归档布局
| 内容类型 | 建议设置 |
|---|---|
| 普通页面 | 营销页面可用全宽;隐私政策、服务条款保持适中的阅读宽度 |
| 博客文章 | 正文宽度约 720–860px;保留清晰的标题、日期、分类和特色图 |
| 文章归档 | 统一图片比例、摘要长度与卡片高度;分页必须在移动端易于点击 |
| 侧边栏 | 仅保留真正有用的目录、联系入口或相关文章,避免挤压正文 |
| 自定义文章类型 | 确认主题模板支持其标题、特色图、分类和面包屑;必要时建立独立模板 |
如果页面使用 Elementor,建议在 Kadence 中只负责全站页眉、页脚和默认内容宽度,把复杂营销页面交给 Elementor;不要让主题和页面编辑器同时控制同一层间距。这样能减少样式冲突,也方便以后逐步替换页面编辑器。
九、Kadence 与 WooCommerce 的设置建议
Kadence 免费版已经提供 WooCommerce 的基础布局选项,适合中小型商店。重点检查商品归档的列数和图片比例、单品页画廊、加入购物车区域、购物车与结账页宽度,以及手机端固定元素是否遮挡按钮。
- 商品主图使用统一比例,避免列表卡片上下跳动。
- 结账页减少侧边栏、弹窗和无关导航,突出付款流程。
- 商品结构化数据交给 WooCommerce 与 SEO 插件处理,避免重复输出。
- 使用缓存插件时,排除购物车、结账和“我的账户”动态页面。
十、Kadence 性能与 Rank Math SEO 配置
进入“外观 → 自定义 → General → Performance”。这里的开关不是越多越好,应根据站点已经安装的 Rank Math、WP Rocket、Imagify 等插件分工。
| 选项 | 建议 | 原因 |
|---|---|---|
| Microdata Schema | 使用 Rank Math 时关闭 | 避免主题与 SEO 插件重复输出结构化数据 |
| Load Google Fonts Locally | 使用 Google 字体时开启并测试 | 减少第三方字体请求;中国大陆站点更适合本地托管或系统字体 |
| CSS Preload | 按实际页面测试 | 与 WP Rocket 的 CSS 优化可能重叠,不应盲目同时开启 |
| Scroll to ID | 需要锚点平滑滚动时开启 | 目录和长页面体验更自然,不需要则少加载一项功能 |
| Lightbox | 没有其他灯箱功能时再开启 | 避免主题和插件重复绑定图片点击事件 |
页面发布后,用无痕窗口分别检查首页、文章页和联系页,并测试 Core Web Vitals。不要只追求测试工具的单次高分;真实用户的首屏图片大小、服务器响应、字体加载和第三方脚本更值得优先处理。
十一、Kadence 和 Astra 怎么选?
| 对比项 | Kadence | Astra |
|---|---|---|
| 免费版页眉页脚 | 拖放生成器直观,免费功能完整 | 生态成熟,配置入口也很清晰 |
| 全局设计系统 | 颜色、字体和按钮整合度高 | 稳定、兼容面广,模板生态丰富 |
| 上手体验 | 适合想集中管理全站样式的用户 | 适合重视成熟生态和大量教程的用户 |
| 最终建议 | 两者都能搭建专业网站;选择与你的模板、编辑器和维护习惯更匹配的一款 | |
如果你已经用 Astra 搭建了稳定网站,没有必要只因为“热门”而换主题。想了解另一套流程,可以阅读本站的 Astra 免费模板搭建独立站教程。
十二、Kadence 常见问题排查
Starter Template 导入失败怎么办?
先检查 PHP 内存与执行时间、REST API、站点回环请求和主机防火墙;关闭不必要的安全拦截后重试。不要连续多次导入同一个整站模板,否则容易产生重复页面和菜单。
页眉覆盖正文或标题看不清怎么办?
检查该页面是否启用了 Transparent Header。透明页眉需要为普通状态和滚动状态分别设置 Logo、文字颜色与背景;文章页通常直接关闭更稳妥。
修改后前台没有变化怎么办?
依次清理页面缓存、对象缓存、CDN 缓存和浏览器缓存。如果使用页面编辑器,再执行其 CSS/数据重新生成工具。清缓存前先确认修改已发布,而不是仍停留在自定义器草稿。
手机端出现横向滚动怎么办?
重点检查固定宽度容器、过长代码、未包裹的表格、负边距、绝对定位元素和悬浮按钮。不要只用 overflow-x:hidden 掩盖问题,应在开发者工具中找到真正超出视口的元素。
十三、什么时候需要 Kadence Pro?
普通企业官网、博客和基础商店通常可以先用免费版完成。只有明确需要条件页眉、Header Addons、Hooked Elements、更深入的 WooCommerce 功能或高级模板控制时,再考虑 Pro。先列出业务需求,再决定付费,不要让许可证功能替代内容和转化设计。
十四、总结
这篇 Kadence 主题教程的核心不是导入一个看起来漂亮的模板,而是建立一套可复用的全局设计和内容规则:先备份与选型,再设置颜色字体、页眉页脚和内容布局,最后处理缓存、图片、结构化数据与移动端体验。
如果你准备搭建企业官网,建议先完成首页、服务页、案例页和联系页四个关键页面,再持续发布能回答客户问题的内容。主题负责稳定的外壳,真正产生搜索流量和询盘的仍然是清晰的服务定位、可信案例与长期内容更新。
官方资料:WordPress.org Kadence 主题页、Kadence 主题安装说明、Starter Template 入门、Kadence 性能设置。




