WordPress主题定制者的完整指南

VPS1352主机测评网(www.vps1352.com)
本文链接:https://www.vps1352.com/11639.html

WordPress 4.7已发布,具有大量的新功能(您可以在此处查看),包括某些用户体验和用户界面升级到主题自定义程序.

如果您是第一次听到自定义程序,它是WordPress管理员中的一个功能(转到外观>自定义),允许用户使用wysiwyg interface调整主题设置自定义主题的颜色,字体,文本,以及您要更改的其他任何其他功能.

在这篇文章中,我将通过如何使用定制者的主题来携带更好的用户体验和WordPress 4.7引入的所有新的精彩性.

我们将涵盖以下内容:

  • 对主题定制者的介绍
  • 开发主题定制者
  • 部分,设置和控制
  • 生成CSS
  • 实时预览
  • 进一步的例子
  • 使用部分和编辑快捷方式
  • 添加范围滑块

主题自定义程序的介绍

主题定制者首先在WordPress 3.4中引入,并允许您实现对主题的预览更改.您可以在不修改您的直播网站时播放您喜欢的所有信息.当您进行了更改时,只需单击保存并且即时应用一切.

wordpress主题自定义程序在操作中.

作为开发人员,我们可以访问核心功能,例如站点标题或标头图像的编辑,并且我们还可以通过主题自定义API构建我们想要的任何内容的自定义控件.

为主题自定义程序开发

在编码定制者时有三个感兴趣的区域.您需要创建 实现主题中的设置的css和/或逻辑的控件:-可选- Live 预览功能提供更好的用户体验.

第一步

在我们开始之前,让我们创建一个我们可以工作的环境.对于本教程,让我们创建一个全新的非常简单的主题.实际上,它甚至不会有资格作为一个适当的主题,我只需使用一个简单的 index.php 文件来创建一个登录页面.

Initial theme for our customize project 我的初始主题为此自定义程序项目.

你可以下载我正在使用或跟随的起动主题,以及github上的代码来自己.

如果您访问WordPress admin中的自定义程序,则可以在您的网站中控制网站标题,说明和其他CSS(最终的CSS(最终是一个新功能).这是因为默认情况下,自定义程序通过刷新整个页面来显示更改.我们稍后会让这个更顺畅,但现在这将是.

Additional CSS In The Theme Customizer 在主题自定义程序 中添加其他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.

我们现在有一个完整的设置控制对,它将显示在我们的新部分中.它尚未做任何事情,但设置在那里,它的价值实际上是更改.

Color Setting In The Customizer 定制者中的颜色设置.

生成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.多彩乐趣随之而来:

Live Preview Color Change oooh...漂亮的颜色!

核心功能的实时预览

由于核心代码的魔力,已经存在修改标题和博客描述的能力.让我们也将动态预览应用于这些元素.

虽然我们没有定义这些选项和控件,但我们仍然有修改它们的方法.我们将使用自定义程序类中的get_setting()方法来获取和修改设置的选项.

加载GIST 5F48A994DB42688D788B47370C4AA9C0

上面的代码应该在cd_customizer_settings()函数中添加.最后一步是添加在设置的值更改时将被解雇的JavaScript代码.

加载GIST 5F48A994DB42688D788B47370C4AA9C0

在此过程结束时,您应该看到博客标题和描述更新,根据您键入.

Updating Text With The Customizer 使用自定义程序更新文本

其他示例

你可以用自定义程序做些如此之多,我认为包括更多的例子是一个好主意.让我们从一些控制按钮行为的控件开始.

显示/隐藏部分

显示/隐藏我选择的元素以创建单选按钮元素.我们将使用两个参数为add_control(),这意味着第一个是一个简单的字符串,而不是控制对象.第二个参数将拥有控制需要构建UI的所有细节.这是应该放在cd_customizer_settings()功能中的完整代码.

加载GIST 5F48A994DB42688D788B47370C4AA9C0

index.php i中,我将按钮包裹在一个条件语句中,检查设置的值并适当显示按钮.

加载GIST 5F48A994DB42688D788B47370C4AA9C0

请注意,目前我将传输方法设置为refresh.当按钮隐藏时,页面上未加载,因此我们需要多于通过JavaScript显示/隐藏元素.我们将学习如何快点更好!

Showing And Hiding A Button With The Customizer 使用自定义程序显示和隐藏按钮.

文本修改

继续使用我们的按钮修改,让我们制作文本编辑.我们已经有按钮部分,我们需要的只是一个设置和简单的文本字段控制.

加载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

Theme Customizer Slider 主题自定义程序滑块在操作中.

获取定制!

您现在应该能够在主题定制程序内工作,为您的主题创建更好的控件.使主题使用简单直观,定制者为此提供了很大的基础是非常重要的.

阅读列表

如果您想加快速度,那么主题自定义程序查看以下链接:

  • 主题自定义api
  • WordPress 4.7中的新增功能4.7
  • 定制器在WordPress 4.7
  • 中的改进
  • 自定义API控制参考
  • 改进的定制器UX
  • 工具

  • 自定义api
  • wp_customizer_control文档

0
订阅评论
提醒
0 评论
内联反馈
查看所有评论