如何在 WordPress 中创建块子主题

已发表: 2023-07-14

想象一下这种情况：您刚刚找到了一个近乎完美的主题可以在您的网站上使用。 它设计得很好，包括您想要的布局，但您想要更改调色板并限制客户修改某些区域。 不幸的是，您使用的主题不允许您删除默认颜色或锁定块。

虽然您可以直接编辑主题的文件，但当您运行主题更新时，所有修改都将丢失。 您可以使用代码片段插件添加一些自定义 CSS，但这不会改变登录用户可用的样式选项。

所以，你可以做什么？ 如何更改全局样式可用选项？ 为此，您需要一个块子主题。

什么是 WordPress 子主题？

根据 WordPress 开发者文档：

子主题继承父主题的外观和感觉及其所有功能，但可用于对主题的任何部分进行修改。 通过这种方式，自定义内容与父主题的文件分开。 使用子主题可以让您升级父主题，而不会影响您对网站所做的自定义。

因此，要在 WordPress 中使用子主题，您还需要安装父主题。 您的子主题继承了父主题的所有内容，并添加了一些变体。

如何创建儿童主题

您想要一个代码选项来自定义您网站上的样式吗？ 与覆盖其他 WordPress 主题一样，使用子主题是覆盖代码的最佳方法。 当您的主题更新时，您的子主题代码将保留。

在本文中，我们将介绍优秀 WordPress 子主题的关键组成部分，并提供深入的阅读资源。

1. 何时使用块子主题

儿童主题通常是一个很好的解决方案。 但是，如果您只想添加一点 CSS 代码，那么整个子主题可能就有点过头了。 考虑使用像代码片段这样的插件来添加一些自定义功能。

定制客户站点

当您为客户构建网站时，您可能需要提供一些额外的自定义功能。

如果您想控制用户插入新块、移动现有块或删除块的能力，您可能需要实现块锁定。 您可以在本介绍性教程中了解如何锁定块等。

创建主题变体

除了定义主题布局客户端可以修改的区域之外，您可能还想更改其调色板选项，省略主题或 WordPress 的默认设置并添加独特的选项。 您还可以定义主题中也应提供的渐变和双色调选项。

2.选择一个好的WordPress主题

并非所有主题的创建方式都是相似的。 除了您在主题设计中看到的内容之外，选择父主题还涉及其他因素，例如更新频率、支持质量、文档和主题开发人员的声誉。 了解更多信息如何使用 WordPress 主题构建网站。

3.创建测试环境

到目前为止，您已经选择了父主题，收集了品牌资产，并决定了要覆盖的设置。 接下来，您需要设置测试环境。

如果您使用的是托管 WordPress 托管提供商（例如 GoDaddy 的托管 WordPress 托管），则可以使用一键暂存站点作为开发环境。 如果您使用 cPanel 或 VPS 之类的东西进行托管，则可以设置单独的 WordPress 安装并将现有网站克隆或复制到新安装。

如果您不将子主题应用到现有站点，或者您希望从头开始构建，则可以使用 ServerPress 中的 MAMP 或 DesktopServer 等工具在计算机上创建本地 WordPress 开发环境。

4. 创建主题目录

首先，您需要安装父主题。 然后，使用 FTP 客户端连接到您的开发环境并导航到您的 WordPress 文件所在的位置。

您正在寻找以下文件夹：

 /wp-内容/主题/

您可以在其中找到所有已安装的 WordPress 主题。 每个主题都有自己的文件夹或目录，其中包含该主题的所有文件。 您将向列表添加一个新目录，该目录将保存您的子主题。 你最终会得到类似的结果：

 /可湿性粉剂内容/主题/您的孩子主题/

5. 创建主题文件

对于我们的示例，我们假设我们使用的是“二十二十二”主题。 您需要安装该主题，子主题才能引用它。

在新的子主题目录文件夹中，您将创建两个新文件：

 样式.css
主题.json

这两个文件都有特定的用途。 style.css文件用于向 WordPress 提供有关主题的信息，例如名称、作者、标签和父主题 ID。

theme.json文件用于定义全局样式等中的许多设置。 从开发人员手册中了解有关 theme.json 的更多信息。

在以前的经典主题中， functions.php文件在子主题中是必需的。 块子主题不需要这些步骤。

样式.css

style.css文件中包含哪些内容？ 开发者文档说：

您的样式表必须在文件的最顶部包含以下必需的标题注释。 这告诉 WordPress 有关主题的基本信息，包括它是具有特定父主题的子主题这一事实。

您需要将样板文件包含在包含标头信息的style.css文件中。 模板名称：对应于您正在构建的父主题的文件夹（目录）名称。 文本域：名称对于您的 WordPress 子主题是唯一的。

下面是使用“二十二十二”的子主题示例：

 /*
主题名称：二十二十二个孩子
主题 URI：https://example.com/
作者：你的名字
作者 URI：https://example.com/
描述：二十二十二儿童主题
至少需要：5.8
测试高达：5.9
需要 PHP：5.6
版本：0.1
许可证：GNU 通用公共许可证 v2 或更高版本
许可证 URI：http://www.gnu.org/licenses/gpl-2.0.html
文本域：thwentytwo-child
模板： 二十二
标签：自定义颜色、自定义菜单、自定义徽标、编辑器风格、特色图像、全站点编辑、块图案

二十二十二儿童 WordPress 主题，(C) 2021 WordPress.org
《二十二十二儿童》是根据 GNU GPL 条款发行的。
*/

主题.json

请参阅开发人员文档以更深入地了解 theme.json。 我们来看看二十二十二的 theme.json 文件：

 {
 “版本”：2，
 “设置”：{}，
 “样式”：{}，
 “自定义模板”：{}，
 “模板部分”：{}
}

其中每一个都有更多可供您选择的样式。 例如，在样式区域中，二十二十二使用：

 {
 “设置”：{
 “外观工具”：true，
 “颜色”： {
 “双色调”：[
 {
 “颜色”： [
 “＃000000”，
 “#ffffff”
 ],
 "slug": "前景和背景",
 "name": "前景和背景"
}

需要帮助制作 theme.json 文件吗？ 查看 themegen.app 以获取为 theme.json 文件创建许多选项的指南。

6. 自定义您的块子主题

虽然您可以轻松创建 theme.json 文件并将其附加到主题中，但还需要做出一些其他选择。 子主题甚至块主题是 WordPress 的一个新领域。 在这篇文章发表时，网站编辑器上显然有一个测试版标签。 您需要回顾一下子主题（例如模板部分）中哪些功能有效，哪些无效。

此外，您可能会发现全局样式和 theme.json 尚不支持的设置。 如果您要添加其他 CSS，例如带有框阴影的组块边框，您可能需要将其添加到style.css文件中。

 .has-primary-border-color {
 盒子阴影：.1rem .1rem .05rem #647BAF ；
}

7.测试你的孩子主题

一旦您觉得您的网站在当前的开发环境中看起来不错，就可以在上传到实际网站之前对其进行测试。

  • 在各种浏览器尺寸（例如移动视口）中进行测试
  • 在不同的浏览器中进行测试或使用像BrowserStack这样的工具
  • 审查无障碍标准。 开始使用 WebAim

8. 准备上传您的块子主题

如果您一直在临时站点上进行开发，那么您的文件就位于它们需要的位置。 您可以访问您的托管选项来推动暂存站点上线。 如果您一直在本地开发人员环境中创建文件，则需要将style.css和theme.json文件一起压缩为一个 zip 文件并上传到您的网站。

回顾创建块子主题

  1. 决定您需要一个块子主题
  2. 选择父主题
  3. 配置您的测试环境
  4. 创建您的主题目录
  5. 创建您的主题文件
  6. 自定义您的块子主题
  7. 测试您的孩子主题
  8. 将它们上传到实时网站

与 WordPress 中的经典主题一样，块主题仍然需要一个位置来存储自定义设置，当父主题收到更新时，这些自定义设置不会被覆盖。 创建块子主题使您能够添加、锁定和省略网站上其他用户可用的选项。