GG资源网

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

使用主题自定义 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 的函数。

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

实时预览

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

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

将实时预览脚本加入队列

这一步唯一不规则的地方是我们需要使用 customize_preview_init 和我们 必须 确保在我们的脚本之前加载“jquery”和“customize-preview”。 除此之外,它是一个标准的队列,指向我们主题中的一个 javascript 文件:

为设置添加实时预览支持

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

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

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

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

封装在一个类中

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

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

更多选项

我强烈建议阅读 WordPress Codex 中有关主题自定义 API 的文档。 它包含许多额外的设置和使用 API 的方法。

标签:

由于网站搬家,部分链接失效,如无法下载,请联系站长!谢谢支持!
1. 带 [亲测] 说明源码已经被站长亲测过!
2. 下载后的源码请在24小时内删除,仅供学习用途!
3. 分享目的仅供大家学习和交流,请不要用于商业用途!
4. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
5. 本站所有资源来源于站长上传和网络,如有侵权请邮件联系站长!
6. 没带 [亲测] 代表站长时间紧促,站长会保持每天更新 [亲测] 源码 !
7. 盗版ripro用户购买ripro美化无担保,若设置不成功/不生效我们不支持退款!
8. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
9. 如果你也有好源码或者教程,可以到审核区发布,分享有金币奖励和额外收入!
10.如果您购买了某个产品,而我们还没来得及更新,请联系站长或留言催更,谢谢理解 !
GG资源网 » 使用主题自定义 API 创建 WordPress 主题选项

发表回复

CAPTCHAis initialing...