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

使用主题自定义API创建WordPress主题选项是易于执行的.本文向您展示了它的所做.

WordPress主题自定义API通过WordPress 3.4发布，2012年.它承诺开发人员为增加丰富选项主题的标准化方式，以及用户以一种方式调整其网站，良好的用户友好的方式.

对于用户，前端主题自定义程序允许您快速更改您网站的外观，甚至可以获得实时预览.

这个项目的成功是值得努力的，但它正在改进并获得牵引力.它已经建立在一个坚实的基础上，没有理由不开始使用它.

所以让我们看一下我们如何使用API​​轻松地将设置添加到主题.

今天我们要覆盖的东西:

• 建立我们的基础
• 主题设置

的组件

• 使用设定值
• 实时预览
• 封装在一个类中
• 进一步选择

自定义主题自定义程序.

构建我们的基础

自定义API的键是 WP_Customize_Manager类，可以通过$wp_customize对象访问.我们将使用此类中定义的各种方法来添加它们内部的设置部分和控件.

创建主题设置的推荐方式是将它们封装在一个类中.在我们的最初示例中，我将遵守本建议书，以确保清楚的是自定义API的一部分，而不是.我将用基于类的实现完成文章.

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

主题设置

的组件

如示例中所述，您添加到自定义程序的每个项目都包含三个部分:

• 一个 section 必须创建它以将其放入.本节可以是当地的预先存在的部分之一
• a 设置必须在数据库中注册，以及
• a control 需要创建，用于操纵定义的设置

如果控制和设置之间的分离似乎令人困惑，请想一想:当您创建一个设置时，您可以告诉WordPress，确实存在字体颜色和默认值的设置为#444444.本身，这已经意味着可以使用此设置.

但是，主题自定义程序需要知道如何操纵此设置.您可以为用户手动进入新颜色的文本字段为"#ff9900"，但您也可以指定颜色控制，该颜色控制将输出颜色选择器.在数据库级别上，所有仍然将归结为六角形，但面向用户的侧面不同.

创建部分

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

大部分都是非常不言自明的.但请注意优先级！这决定了屏幕上的部分的顺序.我喜欢递增我的选择.如果我需要在两个现有部分之间插入部分，我不需要重新索引一切，我可以分配新的95.

主题自定义程序中的几个自定义部分

请注意，章节将在空时显示为.在显示之前，必须将设置和控制添加到它们.

添加设置

使用add_setting()方法创建设置.他们也将一个slug作为第一个参数和一系列参数作为第二个参数.请看下面，以便将背景颜色添加到上面的部分.

我们可以在此处添加一堆选项，但现在这会很好.请注意，设置未绑定到部分.正如我所提到的设置只是在WordPress上注册.它由控件达到控制它们的部分.

创建一个控制

控制用add_control()方法放置在放置.此方法采用SLUG和参数数组，或者也可以接收专用控件对象.控件对象用于更复杂的控件，例如颜色选择器或文件上传器.

这是我创建了修改页脚背景颜色的控件的方法:

加载GIST BAE424ED134EAE6CBF25

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

请注意，控件是全部汇集的地方.section设置为我们创建的部分的ID，settings设置为设置的ID.

一旦设置了所有三个，您应该能够重新加载自定义程序并查看您的工作.

添加到自定义程序中的自定义部分的某些自定义选项

使用设置值

默认情况下，设置将保存在主题_mod中.Theme_Mods是设置API的替代方法，它们提供了一种操作特定主题设置的简单方法.您需要做的就是检索设置的值是使用get_theme_mod()函数与传递给它的设置的ID.

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

实时预览

默认情况下未启用设置的实时预览.要使用它们，您必须执行三件事:

• 浏览一个处理预览的javascript文件
• 为设置和

添加实时预览支持

• 创建JavaScript代码以照顾每个设置

eNqueing live preview脚本

关于此步骤的唯一不规则的事情是我们需要使用customize_preview_init，并且必须必须确保在我们的脚本之前加载'jQuery'和'customize-preview'.除了它是一个标准的eNUTUE，指向我们主题中的JavaScript文件:

为设置

添加实时预览支持

这个非常容易.在我们的设置的参数中，我们需要定义transport键并将其值设置为postMessage.让我们以前从:

来修改我们的代码

创建JavaScript代码以照顾每个设置

我们需要在javascript中使用wp.customize()函数.此函数应将设置的ID作为第一个参数给出，第二个是回调函数.内部我们将函数绑定到设置的更改并编写我们的代码，这将负责更改.

我们只需要写一行，请使用此副本粘贴模板进行实时预览写入速度:

封装在类中

封装在一个类中是一个好主意，因为它允许您编写更好的函数名称并使您的代码更加兼容横梁，如果您在作品中有多个主题.这就是我以上例子的方式.

请注意，一切都完全相同，所有已更改的是某些功能的名称，我们指的是类内的方法而不是在我们functions.php文件中分散的函数.

其他选项

我强烈建议在WordPress Codex中读取关于主题自定义API的文档.它包含许多其他设置和使用API​​的方法.