首页 > 文章专栏 > 正文

如何像专业人士一样使用WordPress主题自定义器(终极指南)

你是否曾经打开过 WordPress 主题定制器,看着那些密密麻麻的选项,感到完全不知所措?

颜色、字体、布局……几十个设置摆在眼前,你只是想把自己的网站弄得好看一点,结果却越改越糟。我们见过太多新手遇到同样的问题。好消息是,解决起来比你想象的要简单得多。

在本指南中,我们将一步步教你如何使用 WordPress 主题定制器,让你轻松创建出专业、用户友好的网站,不再迷茫。我们还会分享一些能帮你省下数小时试错时间的小技巧。

WordPress主题定制器终极指南

关键要点: 主题定制器允许实时预览更改,适用于经典主题的站点标识、颜色和菜单设置;而块主题则使用全站编辑器(FSE)代替。

如何访问 WordPress 主题定制器

主题定制器是经典 WordPress 主题的默认功能,让你控制网站外观。它包含所有经典主题,并提供站点范围的控制面板,如排版、页眉设计等。

登录 WordPress 管理后台后,点击左侧菜单的 外观 » 自定义

访问WordPress主题定制器

注意: 如果你使用的是块主题,默认情况下主题定制器不会出现在 WordPress 管理后台。块主题依赖全站编辑器。如果你仍然需要访问定制器,可以参考猫哥的教程修复缺失问题。

你还可以用主题定制器预览任何已安装的主题(即使未激活),进行实时预览和修改。前往 外观 » 主题,将鼠标悬停在任何已安装的主题上,点击“Live Preview”按钮即可。

WordPress主题实时预览选项

如何使用 WordPress 主题定制器

打开主题定制器后,左侧会显示所有定制设置,右侧是网站实时预览。

WordPress 主题定制器默认提供一组面板,点击即可修改。你也可以点击右侧的蓝色铅笔图标直接编辑对应元素。

WordPress主题定制器

☝ 注意: 高级 WordPress 主题会提供额外的设置面板(更多详情见后文)。

下面我们详细介绍默认选项,并分享定制技巧和替代方案。

站点标识面板:添加标题、Logo 和 Favicon

站点标识”面板允许你添加或修改网站标题和副标题。默认情况下,WordPress 会添加“Just Another WordPress Site”作为副标题,建议你修改。如果 Logo 已包含品牌名,可以留空副标题避免重复。

站点标识设置 - 修改标题、副标题、Logo和Favicon

点击“选择Logo”上传网站 Logo。要添加 Favicon,点击“选择站点图标”。详细步骤可参考猫哥的指南:如何创建并添加 Favicon

更改网站颜色

颜色”面板的选项因主题而异。例如,Sydney 主题允许你选择全局配色方案,并分别修改背景、文字、链接、标题、表单和侧边栏的颜色。

更改网站颜色

其他主题可能提供页眉颜色、导航菜单、按钮或特定区域的颜色控制。

添加导航菜单

菜单”面板允许你创建导航菜单并控制其显示位置。你会看到已有菜单,点击“查看所有位置”可查看主题支持的菜单位置。

主题定制器中的菜单面板

点击“创建新菜单”并命名,选择菜单位置后点击“下一步”。

创建新导航菜单

然后点击“添加项目”,可以添加自定义链接、页面、文章、分类和标签。点击“重新排序”可调整项目顺序。

向导航菜单添加项目

控制小部件

小部件”面板允许你添加和管理小部件。点击后显示可放置小部件的位置,具体取决于主题。例如,Sydney 主题提供五个小部件位置,而经典主题可能只有一个。

小部件面板

点击某个位置,然后点击“添加小部件”,选择要添加的块(如段落、图片、列表),并可通过拖拽调整顺序。

向网站添加小部件

首页设置面板

默认情况下,WordPress 在首页显示最新博客文章。但大多数企业网站希望使用自定义首页作为落地页。在“首页设置”面板中选择“静态页面”,然后选择首页和文章页。

主题定制器中的首页设置

如果没有对应页面,可以点击“+ 添加新页面”快速创建。

附加 CSS 面板

在“附加 CSS”面板中,你可以添加自定义 CSS 代码,并实时预览效果。相比于直接修改主题的 style.css 文件(更新主题会丢失),这种方式更安全、简单。

在附加CSS面板中添加自定义CSS代码

开始输入 CSS 时,WordPress 会自动提示属性,并显示错误信息。更多细节参考猫哥的指南:如何轻松添加自定义 CSS

☝ 注意: 如果你不想写任何代码,请继续阅读下文,我们将分享三个无需代码即可轻松定制主题的替代方案。

其他主题定制器选项

一些免费和高级主题提供更多定制选项,如更改字体样式、添加背景图片、修改布局、随机页眉图片等。

随机显示上传的页眉图片

你还可以借助插件添加特定功能,例如使用 Easy Google Fonts 插件添加自定义字体。

预览不同屏幕分辨率

确保网站在不同屏幕尺寸下都显示良好至关重要。主题定制器底部提供了三个图标,分别模拟桌面、平板和手机视图。此外,“隐藏控件”链接可以隐藏面板,方便查看桌面效果。

在不同屏幕分辨率下预览网站

发布、保存或调度定制设置

完成修改后,点击“发布”按钮应用更改,然后点击左上角关闭按钮退出。如果需要更多时间,可以点击齿轮图标打开“操作”面板,选择“保存草稿”并复制预览链接分享给他人。你也可以选择“调度”,在指定日期和时间自动发布更改。

发布WordPress定制器设置

WordPress定制器保存草稿选项

在特定日期调度定制器设置

如果希望放弃未发布的更改,点击“放弃更改”链接即可。

预览不同主题而不上线

在主题定制器中,你可以测试新主题而不影响实际网站。点击主题名称旁边的“更改”按钮,查看所有已安装主题,点击“Live Preview”预览。你还可以勾选“WordPress.org 主题”复选框,从官方目录安装并预览主题。

从定制器更改WordPress主题

预览已安装的主题

WordPress主题目录

☝ 注意: 建议在 WordPress 测试站点 上测试新主题,而不是直接在线上使用定制器。

导入或导出主题定制器设置

你可以使用插件导入/导出主题定制器设置,非常方便。例如,在本地或测试站点进行修改后,无需手动重复设置。详细步骤可参考猫哥的指南:如何导入/导出主题定制器设置

替代方案:WordPress 主题定制器增强工具

主题定制器的选项取决于你使用的主题。如果你希望有更多定制功能,可以试试以下三个插件:

SeedProd

SeedProd首页

SeedProd 是最佳的 AI 网站和页面构建器,无需编写代码,即可在60秒内创建自定义 WordPress 主题和页面布局。它提供数百个预置页面模板(如着陆页、销售页、即将推出页面等),并支持拖拽式编辑,内置 opt-in 表单、社交按钮、倒计时等模块。你可以保存配色方案和字体组合,实现快速复用。

Thrive Theme Builder

Thrive Theme Builder

Thrive Theme Builder 是另一个强大的拖拽式主题构建器,包含4套完整主题模板和100多个设计元素,可无代码创建自定义主题。你可以通过点击和拖拽编辑页眉、页脚、博客文章、分类页面等所有部分。

CSS Hero

CSS Hero网站

CSS Hero 允许你无需编写任何 CSS 代码即可自定义网站每个元素,包括登录页面。所有更改在前端实时预览,并适配不同设备。

Beaver Builder

Beaver Builder插件

Beaver Builder 是一款顶级页面构建器,与几乎所有 WordPress 主题兼容,支持短代码、小部件和多种模块,让你轻松创建美观页面。详细信息可参考猫哥的 Beaver Builder 评测

常见问题(FAQ)

问:是否每个主题都能用 WordPress 主题定制器?
不是。许多经典主题仍支持定制器,但基于块的(FSE)主题使用站点编辑器,定制器不会出现。

问:切换主题会删除定制器设置吗?
不会删除,但不会迁移。定制器设置与特定主题绑定。切换主题后,旧设置仍保存在数据库中,切换回原主题时会自动恢复。

问:找不到主题定制器怎么办?
如果你看不到“外观 » 自定义”,说明你正在使用块主题,请前往“外观 » 编辑器”使用全站编辑器。

问:如何给主题添加更多定制选项?
可以创建子主题,或使用页面构建器插件如 SeedProd、Thrive Theme Builder、CSS Hero 等,无需代码即可获得更多控制。

问:在线上网站使用主题定制器安全吗?
安全,因为更改不会生效直到点击“发布”。但建议在测试环境中进行重大修改。

继续探索:像专业人士一样设计

希望本指南能帮助你像专业人士一样使用 WordPress 主题定制器。如果你觉得有用,还可以查看以下资源:

如果你对 SEO 优化 感兴趣,可以查看猫哥的 GEO/SEO 优化教程,帮助你提升网站排名。

此外,我们推荐使用 Hostinger 托管你的 WordPress 网站,性能优秀且价格实惠。点击这里查看 猫哥的服务器推荐

文章标签:#CSS#WordPress#主题定制#导航菜单#网站设计

版权声明:本文为「猫哥建站」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。

本文链接:https://maogeo.top/blog/如何像专业人士一样使用wordpress主题自定义器(终极指