WordPress主题定制者的完整指南
WordPress 4.7已发布，具有大量的新功能(您可以在此处查看)，包括某些用户体验和用户界面升级到主题自定义程序.
如果您是第一次听到自定义程序，它是WordPress管理员中的一个功能(转到外观>自定义)，允许用户使用wysiwyg interface调整主题设置自定义主题的颜色，字体，文本，以及您要更改的其他任何其他功能.
在这篇文章中，我将通过如何使用定制者的主题来携带更好的用户体验和WordPress 4.7引入的所有新的精彩性.
我们将涵盖以下内容:
- 对主题定制者的介绍
- 开发主题定制者
- 部分，设置和控制
- 生成CSS
- 实时预览
- 进一步的例子
- 使用部分和编辑快捷方式
- 添加范围滑块
主题自定义程序的介绍
主题定制者首先在WordPress 3.4中引入，并允许您实现对主题的预览更改.您可以在不修改您的直播网站时播放您喜欢的所有信息.当您进行了更改时，只需单击保存并且即时应用一切.
wordpress主题自定义程序在操作中.
作为开发人员，我们可以访问核心功能，例如站点标题或标头图像的编辑，并且我们还可以通过主题自定义API构建我们想要的任何内容的自定义控件.
为主题自定义程序开发
在编码定制者时有三个感兴趣的区域.您需要创建 实现主题中的设置的css和/或逻辑的控件:-可选- Live 预览功能提供更好的用户体验.
第一步
在我们开始之前，让我们创建一个我们可以工作的环境.对于本教程，让我们创建一个全新的非常简单的主题.实际上，它甚至不会有资格作为一个适当的主题，我只需使用一个简单的 index.php 文件来创建一个登录页面.
我的初始主题为此自定义程序项目.
你可以下载我正在使用或跟随的起动主题，以及github上的代码来自己.
如果您访问WordPress admin中的自定义程序，则可以在您的网站中控制网站标题，说明和其他CSS(最终的CSS(最终是一个新功能).这是因为默认情况下，自定义程序通过刷新整个页面来显示更改.我们稍后会让这个更顺畅，但现在这将是.
在主题自定义程序 中添加其他CSS
铺设粉底
让我们首先奠定我们的定制工作的基础.我将创建一个 customizer.php 文件，并确保在函数中要求它.
加载GIST 5F48A994DB42688D788B47370C4AA9C0
自定义程序文件将以包含所有部分，设置和控件的挂钩操作开头.
加载GIST 5F48A994DB42688D788B47370C4AA9C0
部分，设置和控件
sections 表示自定义程序中的导航.您应该已经看到其中的四个:网站标识，菜单，静态前页和其他CSS .通过定义一个部分，我们可以在导航中创建一个新条目，并填写控制.
控件是视觉元素-用户界面-允许我们操纵设置.这些可以是输入字段，文本区域，颜色选择器和其他类型的控件，用于创建更好的用户体验.
设置表示我们希望我们主题接受和使用的数据.我们创建控件以允许用户轻松操纵设置.
创建部分
要添加新部分，我们将使用$wp_customize->add_section()方法.需要两个参数:一个部分标识符和一系列附加选项，如可见部分标题及其在部分列表中的位置.
加载GIST 5F48A994DB42688D788B47370C4AA9C0
别忘了上面的代码和创建部分，控件或设置的任何其他代码应该放在cd_customizer_settings()函数中.
我们的部分现已注册，但它不会出现，直到我们向其添加一个控件.
创建设置
设置通知WordPress，我们的主题将使用用户可以修改的值.它们使用的是使用两个参数的$wp_customize->add_setting()方法添加:设置的标识符和包含诸如默认值的信息的选项数组.
加载GIST 5F48A994DB42688D788B47370C4AA9C0
运输实际上默认为刷新，但我添加了它，因为我们稍后会修改它.刷新意味着在修改设置时，WordPress应刷新视图.更复杂的自定义程序实现允许实时预览，只能修改受影响元素而不是整个页面.
创建一个控制
控制连接到用户输入.它们添加了$wp_customize->add_control()方法.参数明智此方法比以前的方法更复杂.
如果第一个参数是一个控制对象，那么只需要一个参数，对象的一个实例.该对象可能有自己的额外参数.
第一个参数也可以是标识符，在这种情况下，需要一个选项的第二个参数.
在我们的情况下，我们将使用WP_Customize_Color_Control类来创建颜色选择元素.
加载GIST 5F48A994DB42688D788B47370C4AA9C0
此对象的第一个参数应该是$wp_customize对象本身，第二个应该是控件ID.我倾向于使其与设置它控制相同.第三个数组包含一些类似标签的选项，它将放在其中的部分的ID和设置IT控件的ID.
我们现在有一个完整的设置控制对，它将显示在我们的新部分中.它尚未做任何事情，但设置在那里，它的价值实际上是更改.
定制者中的颜色设置.
生成CSS
要使这实际上是工作，我们需要将设置的值应用于我们的主题.在这种情况下，我们希望确保主体始终将背景颜色值作为我们的新设置.
加载GIST 5F48A994DB42688D788B47370C4AA9C0
请注意，此代码不应该在cd_customizer_settings()内放置在cd_customizer_settings()中，如我们使用控件，部分和设置.
这是所有漂亮的标准的东西，唯一要注意的是如何检索该值.get_theme_mod()功能将检索当前主题的设置;第一个参数是设置的名称，第二个是默认值.
功能可以-当然-用于主题代码以修改功能.我们可以-很快将-创建可用于隐藏/显示按钮的控制和设置.我们将使用get_theme_mod()将在index.php文件中使用以选择性地显示/隐藏按钮.
实时预览
我们有一个整洁的系统，但如果颜色变化和其他编辑将是瞬间的，那么它会更顺畅.实时预览允许我们使用JavaScript选择性地修改元素.
要开始，让我们创建一个 comationer.js 文件，并确保它被排队.
加载GIST 5F48A994DB42688D788B47370C4AA9C0
这个文件的内容应该是一个非常简单的闭合，我们将在其中放置所有代码.
加载GIST 5F48A994DB42688D788B47370C4AA9C0
下一个，确保设置的transport选项的值设置为postMessage.
最后，将以下内容粘贴到封闭中的customizer.js文件中.
加载GIST 5F48A994DB42688D788B47370C4AA9C0
customize()函数需要两个参数，要侦听的设置的名称以及执行操作的函数.函数反过来发射另一个绑定我们的设置的价值，并允许我们在休闲使用它.在此，我用它来修改正文元素的CSS.多彩乐趣随之而来:
oooh...漂亮的颜色！
核心功能的实时预览
由于核心代码的魔力，已经存在修改标题和博客描述的能力.让我们也将动态预览应用于这些元素.
虽然我们没有定义这些选项和控件，但我们仍然有修改它们的方法.我们将使用自定义程序类中的get_setting()方法来获取和修改设置的选项.
加载GIST 5F48A994DB42688D788B47370C4AA9C0
上面的代码应该在cd_customizer_settings()函数中添加.最后一步是添加在设置的值更改时将被解雇的JavaScript代码.
加载GIST 5F48A994DB42688D788B47370C4AA9C0
在此过程结束时，您应该看到博客标题和描述更新，根据您键入.
使用自定义程序更新文本
其他示例
你可以用自定义程序做些如此之多，我认为包括更多的例子是一个好主意.让我们从一些控制按钮行为的控件开始.
显示/隐藏部分
显示/隐藏我选择的元素以创建单选按钮元素.我们将使用两个参数为add_control()，这意味着第一个是一个简单的字符串，而不是控制对象.第二个参数将拥有控制需要构建UI的所有细节.这是应该放在cd_customizer_settings()功能中的完整代码.
加载GIST 5F48A994DB42688D788B47370C4AA9C0
在index.php i中，我将按钮包裹在一个条件语句中，检查设置的值并适当显示按钮.
加载GIST 5F48A994DB42688D788B47370C4AA9C0
请注意，目前我将传输方法设置为refresh.当按钮隐藏时，页面上未加载，因此我们需要多于通过JavaScript显示/隐藏元素.我们将学习如何快点更好！
使用自定义程序显示和隐藏按钮.
文本修改
继续使用我们的按钮修改，让我们制作文本编辑.我们已经有按钮部分，我们需要的只是一个设置和简单的文本字段控制.
加载GIST 5F48A994DB42688D788B47370C4AA9C0
要将选项构建到主题中，我们将使用get_theme_mod()函数替换硬编码文本并定义适当的默认值.
加载GIST 5F48A994DB42688D788B47370C4AA9C0
最后，让我们在 comationer.js 文件中处理实时预览.
加载GIST 5F48A994DB42688D788B47370C4AA9C0
使用部分和编辑快捷方式
当我们查看的按钮显示选项时，我们使用刷新，因为它似乎单独使用JavaScript并不是真正可能的.当按钮隐藏时，它没有加载，所以我们不能通过可见javascript来显示它.
这是部分进入的地方.他们允许您编写更多的模块化代码，这些代码将自身带到主题创建和自定义.当元素发生变化时，可以刷新该单个元素，而不是刷新整个页面.
让我们首先在函数的帮助下生成按钮.我已经创建了cd_show_main_button()并在主索引文件中使用它，将其包装在容器中.
加载GIST 5F48A994DB42688D788B47370C4AA9C0
功能本身就像我们之前的代码一样，但现在可以在其他地方重用.
加载GIST 5F48A994DB42688D788B47370C4AA9C0
最后一步是告诉WordPress选择性地刷新元素.将cd_button_display设置的transport属性设置为postMessage并在cd_customizer_settings()函数中添加以下内容.
加载GIST 5F48A994DB42688D788B47370C4AA9C0
这告诉WordPress，我们希望在cd_button_display设置更改时选择性地刷新.在中，我们要刷新的选择器在第二个参数中也给出了一切参数，并且还定义了生成内容的函数.
如果您现在尝试定制者，您将看到该按钮变得不透明，然后加载正确的内容，而不是刷新整个站点.
好消息是编辑快捷方式将自动添加给您.事实上，如果你只是需要编辑快捷方式，这就是去的方式.
添加范围滑块
自定义程序具有大量控件，从简单的文本字段到图像上传.如果您正在进行大规模应用程序，您可能需要像范围滑块一样的鸽友输入，甚至完全定制的东西.
自定义程序允许您通过定义控件类轻松创建自己的UI元素.让我们创建自己的范围滑块，使用户能够选择具有小句柄机制的值.让我们建立控制:
加载GIST 5F48A994DB42688D788B47370C4AA9C0
我们必须首先检查是否存在WP_Customize_Control类，因为我们的所有选项都没有总是加载.然后，我们使用自己的课程扩展，声明$type属性和render_content()函数.我们需要输出HTML控件，注意当我们需要当前值和$this->link()代替名称参数时，请注意使用$this->value().
我创建了一个非常简单的滑块实现，有点jQuery Magic可以确保在文本字段中可见，并修改文本字段也会影响滑块.
我将某些选项(min，max，step)添加到SLIDE，其中我分配给构造函数中的属性.
要测试，我会创建一个小计数器，显示目前网站上的照片数量.在 index.php 文件中，我添加了以下内容.
加载GIST 5F48A994DB42688D788B47370C4AA9C0
现在是时候创建设置和控件了.该控件将使用新创建的范围滑块.
加载GIST 5F48A994DB42688D788B47370C4AA9C0
创建实时预览现在几乎微不足道，我需要做的就是确保正确的元素被javascript代码覆盖.
加载GIST 5F48A994DB42688D788B47370C4AA9C0
主题自定义程序滑块在操作中.
获取定制！
您现在应该能够在主题定制程序内工作，为您的主题创建更好的控件.使主题使用简单直观，定制者为此提供了很大的基础是非常重要的.
阅读列表
如果您想加快速度，那么主题自定义程序查看以下链接:
- 主题自定义api
- WordPress 4.7中的新增功能4.7
- 定制器在WordPress 4.7 中的改进
- 自定义API控制参考
- 改进的定制器UX 工具
- 自定义api
- wp_customizer_control文档
