使用主题自定义 API 创建 WordPress 主题选项很容易。 本文向您展示了它是如何完成的。

WordPress 主题定制 API 早在 2012 年就与 WordPress 3.4 一起发布。它向开发人员承诺一种添加丰富选项主题的标准化方式，并为用户提供一种以用户友好的方式调整其网站的方式。

对于用户来说，前端主题定制器可以让你快速改变网站的外观，甚至获得实时预览。

这个项目的成功是值得商榷的，但它正在被改进并且正在获得牵引力。 它建立在坚实的基础之上，没有理由不开始使用它。

因此，让我们看看如何使用 API 轻松地将设置添加到主题中。

以下是我们今天要介绍的内容：

• 建立我们的基础
• 主题设置的组成部分
• 使用设置值
• 实时预览
• 封装在一个类中
• 更多选项

建立我们的基础

自定义 API 的关键是 WP_Customize_Manager 类，可以通过 $wp_customize 目的。 我们将使用此类中定义的各种方法在其中添加设置部分和控件。

创建主题设置的推荐方法是将它们封装在一个类中。 在我们最初的例子中，我将 不是 请遵守此建议，以确保清楚哪些是自定义 API 的一部分，哪些不是。 我将使用基于类的实现来完成这篇文章。

让我们首先在我们的主题中创建一个函数 functions.php 文件，这将允许我们在定制器中包含我们的添加。 此功能需要挂钩 customize_register.

主题设置的组成部分

如示例中所述，您添加到定制器的每个项目都包含三个部分：

• 一种 部分 必须创建以放置它。当然，这部分可能是预先存在的部分之一
• 一种 环境 必须在数据库中注册，并且
• 一种 控制 需要创建用于操作定义的设置

如果控件和设置之间的分离看起来令人困惑，可以这样想：当你创建一个设置时，你告诉 WordPress 确实有一个字体颜色设置，默认值为 #444444。 这本身就意味着可以使用此设置。

但是，主题定制器需要知道如何操作此设置。 您可以为其创建一个文本字段，用户在其中手动输入新颜色为“#ff9900”，但您也可以指定一个颜色控件，该控件将输出一个颜色选择器。 在数据库级别上，它仍然会归结为十六进制颜色，但面向用户的一面是不同的。

创建一个部分

这 add_section() 用于创建部分。 它有两个参数，一个部分 slug 和一个参数数组。 这是我如何为主题中的页脚选项设置部分的示例。

其中大部分是不言自明的。 但是请注意优先级！ 这决定了屏幕上部分的顺序。 我喜欢以几十个单位增加我的选择。 如果我需要在两个现有部分之间插入一个部分，我不需要重新索引所有内容，我可以将新的部分分配为 95。

请注意，部分将 不是 空的时候出现。 在显示之前，您必须向它们添加设置和控件。

添加设置

设置是使用 add_setting() 方法。 它们也将 slug 作为第一个参数，将一组参数作为第二个参数。 看看下面的例子，为我们上面的部分添加背景颜色。

我们可以在这里添加很多选项，但现在就可以了。 请注意，设置与部分无关。 正如我所提到的，设置只是在 WordPress 中注册。 这取决于控件，这些控件与部分相关联来操作它们。

创建控件

控制措施到位 add_control() 方法。 这个方法接受一个 slug 和一个参数数组，或者它也可以接收一个专用的控制对象。 控件对象用于更复杂的控件，例如颜色选择器或文件上传器。

以下是我创建修改页脚背景颜色的控件的方法：

我已将控制对象传递给 add_control() 方法。 这个对象应该通过传递 $wp_customize 对象作为第一个参数，控件的唯一 ID 作为第二个参数，参数数组作为第三个参数。

请注意，控件是所有内容的结合处。 section 设置为我们创建的部分的 id 和 settings 设置为设置的 id。

一旦所有三个都设置好，您应该能够重新加载定制器并查看您的工作。

使用设置值

默认情况下，设置保存在 theme_mod 中。 Theme_mods 是设置 API 的替代方案，它们提供了一种处理特定主题设置的简单方法。 检索设置值所需要做的就是使用 get_theme_mod() 具有传递给它的设置的 id 的函数。

让我们通过挂钩来为我们的网站添加一些动态 CSS wp_head 并使用我们保存的设置：

实时预览

默认情况下不启用设置的实时预览。 要使用它们，您必须做三件事：

• 将处理预览的 Javascript 文件排入队列
• 为设置添加实时预览支持，以及
• 创建 Javascript 代码来处理每个设置

将实时预览脚本加入队列

这一步唯一不规则的地方是我们需要使用 customize_preview_init 和我们 必须 确保在我们的脚本之前加载“jquery”和“customize-preview”。 除此之外，它是一个标准的队列，指向我们主题中的一个 javascript 文件：

为设置添加实时预览支持

这很容易。 在我们设置的参数中，我们需要定义一个 transport 键并将其值设置为 postMessage. 让我们修改之前的代码：

创建 Javascript 代码来处理每个设置

我们需要使用 wp.customize() Javascript 中的函数。 这个函数的第一个参数应该是设置的id，第二个是回调函数。 在内部，我们将一个函数绑定到设置的更改并编写我们的代码来处理更改。

我们只需要写一行，使用这个复制粘贴模板来提高实时预览的写作速度：

封装在一个类中

封装在一个类中是一个好主意，因为它允许您编写更好的函数名称并使您的代码更符合跨主题，如果您有多个主题在工作中。 这是我为上面的示例所做的。

请注意，一切都完全一样，只是一些函数的名称发生了变化，我们指的是类内部的方法，而不是散布在我们的函数中的函数。 functions.php 文件。

更多选项

我强烈建议阅读 WordPress Codex 中有关主题自定义 API 的文档。 它包含许多额外的设置和使用 API 的方法。

• 免费主题
• 高级主题