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(最终是一个新功能).这是因为默认情况下,自定义程序通过刷新整个页面来显示更改.我们稍后会让这个更顺畅,但现在这将是.

铺设粉底
让我们首先奠定我们的定制工作的基础.我将创建一个 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.多彩乐趣随之而来:

核心功能的实时预览
由于核心代码的魔力,已经存在修改标题和博客描述的能力.让我们也将动态预览应用于这些元素.
虽然我们没有定义这些选项和控件,但我们仍然有修改它们的方法.我们将使用自定义程序类中的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文档