使用主题自定义 API 创建 WordPress 主题选项

已发表: 2014-11-27

使用主题自定义 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 和一个参数数组，或者它也可以接收一个专用的控制对象。控件对象用于更复杂的控件，例如颜色选择器或文件上传器。

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

加载要点 bae424ed134eae6cbf25

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

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

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

使用设置值

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

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

实时预览

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

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

将实时预览脚本加入队列

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

为设置添加实时预览支持

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

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

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

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

封装在一个类中

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

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