欢迎来到本课程,我们将探索如何使用自定义 API 为经典主题添加选项。
通过本课程,你将能够:
- 描述自定义 API(也称为自定义器),
- 列举自定义器在主题中的使用示例,以及
- 使用自定义器注册主题选项。
什么是自定义器?
这里我们查看的是 Twenty Twenty-Four 主题。
当前激活的主题是什么?当我们将鼠标悬停在外观上时,我们看到可以访问站点编辑器。让我们进入主题,然后安装一个经典主题。
点击添加新主题,选择 Twenty Twenty-One 主题。安装并点击启用。
我们看到那里出现了几个新菜单。但是,我们不再看到编辑器选项,因为经典主题无法访问站点编辑器。
现在用户可以点击自定义来打开自定义器。在这里,用户可以进行全站范围的更改,例如更改颜色,并且还有一个深色模式选项。
这就是我们接下来要查看的内容。
使用自定义器
现在让我们看看自定义器在 Twenty Twenty-One 主题中是如何使用的。
当用户点击颜色和深色模式时,他们现在可以选择点击颜色选择器来更改背景颜色。
让我们查看代码,了解这是如何实现的。
如果我们打开 functions.php 文件,我们会看到刚才看到的默认颜色是使用 add_theme_support() 在这里指定的。这里还有编辑器调色板。这样用户就可以从调色板中选择颜色。
让我们再次查看前端,看看这在自定义器中是如何为用户整合的。
在这里,他们点击颜色选择器,然后看到那个调色板。请注意,他们也可以输入十六进制颜色代码,并且可以在这里滚动并选择他们喜欢的颜色。
注册主题选项
让我们看看如何使用自定义器注册主题选项。
这一切都始于 WP_Customize_Manager 类,它将帮助你创建自定义器中的那些控件。请注意下面更多信息下的注释,说明$wp_customize 对象如何作为此类的一个实例使用,并且这是你在主题中看到此类的主要用途。
<?php
// 示例代码:使用 $wp_customize 添加设置和控件
$wp_customize->add_setting( 'example_setting', array(
'default' => '#000000',
'sanitize_callback' => 'sanitize_hex_color',
) );
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'example_control', array(
'label' => __( '示例颜色', 'textdomain' ),
'section' => 'colors',
'settings' => 'example_setting',
) ) );
?>
这里我们查看的是 Twenty Twenty-One 主题中调用 WP_Customize_Manager 来创建该对象$wp_customize 的类。如果我们向下滚动一点,我们可以看到这个类是如何编写的,以便与我们刚才在 functions.php 文件中看到的内容联系起来。
我们定义了背景颜色,这里有控件注册,并且使用 get_theme_support() 调用调色板,最后我们使用一个数组来构建调色板。
然后,所有内容在底部整合,添加了背景颜色的控件,这覆盖了 WordPress 自带的默认背景颜色控件。
有关更多详细信息,强烈建议开发者研究核心自定义器代码。这是所有包含“customize”一词的核心文件,你可以在 WordPress 安装文件夹 ‘wp-includes/customize’ 中找到它们。
后续步骤
你可以参考 WordPress.org 上提供的主题手册,了解更多关于使用自定义 API 添加主题选项的信息。