聪明的WordPress开发者的工具箱：Kirki

欢迎来到“智能WordPress开发人员工具箱”系列的第二部分！ 在这一部分中，我们将介绍Kirki，这是一个适用于WordPress主题开发人员的出色定制程序工具包。

让我们开始！

关于定制器的一句话

WordPress 3.4版引入了一个新的API，称为主题自定义API和“主题自定义程序”屏幕。 （在4.1版中，删除了“主题”一词，因为它不是专门的“主题定制器”。）它使我们可以在“ 外观”>“定制”菜单中添加定制选项，并有机会在预览网站时同时更改主题设置。

起初它并没有引起太大的炒作，但是随着时间的流逝，社区逐渐采用了它，我们逐渐对这种方便的API感到越来越兴奋。 自发布以来的两年多时间内，Customizer API已经发展成为一个出色的实用程序，甚至可以让我们发布帖子和自定义登录屏幕 。

毫不夸张地说，Customizer是WordPress最有价值的API之一，因为它可以完全改变用户的体验。

如果您想了解更多有关此主题的内容，请查看Lee Pham撰写的有关Customizer的系列文章 。

输入“ Kirki：轻松开发定制程序”屏幕

Kirki是改善主题用户体验的绝佳工具。 它仅专注于主题自定义，并通过切换，范围输入和图像作为单选按钮扩展了默认的Customizer控件。

一旦了解了它的工作原理，构建主题自定义屏幕将比以往更加容易。

呼吁采取行动： Kirki已准备好翻译，需要您的帮助才能将此开源项目翻译成其他语言。 我将处理土耳其语翻译，如果您可以帮助将Kirki译成您的语言，那将是很棒的。 如果您想捐款，请联系Kirki的作者Aristeides Stathopoulos，以获取详细信息。

将Kirki嵌入主题并进行配置

实际上，将主题与Kirki捆绑在一起非常容易。 您只需要从GitHub下载最新版本，将内容提取到主题的文件夹中，并将主插件文件（通过使用include_once()函数）包含在主题的functions.php文件中。

这是一个例子：

<?php

include_once( dirname( __FILE__ ) . '/path/to/kirki/kirki.php' );

?>

小菜一碟，不是吗？ 在此之下，您可以创建一个配置以避免与其他使用Kirki的主题或插件冲突：

<?php

Kirki::add_config( 'my_theme', array(
    'capability'    => 'edit_theme_options',
    'option_type'   => 'option',
    'option_name'   => 'my_theme',
) );

?>

做完了！

在主题中使用Kirki

现在，我们已经了解了如何在主题中嵌入和配置Kirki，是时候来看一些如何构建主题自定义页面的示例了。

让我们从基础开始。 这是带有一些面板和部分但没有任何控制字段的基本安装代码：

<?php

/**
 * Add panels
 */
Kirki::add_panel( 'panel_id', array(
    'priority'    => 10,
    'title'       => __( 'My Title', 'textdomain' ),
    'description' => __( 'My Description', 'textdomain' ),
) );

/**
 * Add sections
 */
Kirki::add_section( 'custom_css', array(
    'title'          => __( 'Custom CSS' ),
    'description'    => __( 'Add custom CSS here' ),
    'panel'          => '', // Not typically needed.
    'priority'       => 160,
    'capability'     => 'edit_theme_options',
    'theme_supports' => '', // Rarely needed.
) );

?>

现在，让我们看看Kirki提供的控制字段。

Kirki的控制字段类型

创建面板和部分后，可以使用“控制字段”填充部分。 这是在部分内添加字段的代码：

<?php

Kirki::add_field( 'my_theme', array(
    'type'        => 'text',
    'setting'     => 'text_demo',
    'label'       => __( 'This is the label', 'kirki' ),
    'description' => __( 'This is the control description', 'kirki' ),
    'help'        => __( 'This is some extra help text.', 'kirki' ),
    'section'     => 'my_section',
    'default'     => __( 'This is some default text', 'kirki' ),
    'priority'    => 10,
) );

?>

如前所述，Kirki用新的扩展了默认控制字段列表。 为了编写一个更“完整”的教程，我将包括核心控制字段以及Kirki的其他控制字段。

1. text允许您添加简单的文本输入。
2. textarea允许您添加一个文本区域。
3. editor允许您添加一个所见即所得的编辑器。
4. radio允许您添加单选按钮。
5. checkbox可让您添加复选框。
6. color和color-alpha （支持透明度）使您可以使用漂亮的颜色选择器选择颜色。
7. background允许您添加完整CSS背景定制器。
8. palette允许您添加调色板。
9. select允许您添加一个下拉菜单。
10. select2允许您添加一个“更好的”选择菜单，它不同于默认的<option> HTML元素。
11. select2-multiple允许您添加具有多个选择的选择菜单。 （大胆的猜测：将来可能会与select2字段合并。）
12. dropdown-pages允许您添加一个下拉菜单，列出数据库中的页面。
13. upload允许您添加本机上传器。
14. image允许您添加本机图像选择器/上载器。
15. radio-image允许您添加充当单选按钮的图像。
16. radio-buttonset按钮集允许您添加充当单选按钮的按钮集。
17. number允许您添加HTML5数字输入。
18. slider可让您添加HTML5范围滑块。
19. multicheck允许您添加具有多个复选框输入的列表。
20. switch允许您添加一个类似于复选框但更漂亮的“ switch”按钮。
21. toggle允许您添加一个“切换”按钮，该按钮也类似于复选框。
22. sortable允许您添加复选框控件的可排序列表。
23. custom允许您添加一个自定义控件字段，它基本上是任何有效HTML代码片段。

造型基尔基

Kirki有一些非常酷的设置供您为主题创建自定义的定制程序。 您可以在控制字段上方显示徽标，为“定制程序”设置不同的配色方案，等等。

• logo_image ：指定徽标图像的URL。
• description ：指定在单击徽标时将显示的描述文本。
• color_active ：指定菜单项，帮助按钮等的“活动”颜色。
• color_light ：指定禁用和非活动控件的“辅助”颜色。
• color_select ：为选中的东西指定“选中”的颜色。
• color_accent ：指定在滑块控件和图像选择上使用的“重点”颜色。
• color_back ：指定定制程序的背景颜色。
• url_path ：指定url_path的URL路径，用于在其/assets/文件夹中加载CSS文件。
• stylesheet_id ：要设置为CSS排队过程中的句柄的样式表ID。

要设置这些样式选项，您将需要使用kirki/config过滤器。 这是有关如何配置Kirki的示例：

<?php

/**
 * Styling configuration for the Kirki Customizer
 */
function kirki_demo_configuration_sample_styling( $config ) {

    $config['logo_image']   = 'http://kirki.org/img/kirki-new-logo-white.png';
    $config['description']  = __( 'The theme description.', 'kirki' );
    $config['color_accent'] = '#00bcd4';
    $config['color_back']   = '#455a64';
    $config['width']        = '20%';

    return $config;

}
add_filter( 'kirki/config', 'kirki_demo_configuration_sample_styling' );

?>

获得价值

您必须使用Kirki存储的主题中的值，对吗？ 这是如何做：

<?php

$value = Kirki::get_option( $config_id, $option_id );

?>

就那么简单。 当然，您仍然可以使用核心的get_option()和get_theme_mod()函数。

总结今天

这样的工具使WordPress更加人性化且易于开发，您不觉得吗？ 就像我在系列简介中所说的那样，WordPress的功能来自其社区，而这样的工具是社区发展的关键。 Kirki提供的内容比我在本教程中写的要多，而Ari（作者）承诺， 只要用它 ，用他的话说，他将继续开发Kirki。

您如何看待Kirki？ 在下面的评论部分中发表您的想法。 而且，如果您喜欢这篇文章，请不要忘记与您的朋友分享！

下一部分见，我们将介绍主题检查插件。

翻译自: https://code.tutsplus.com/tutorials/toolbox-of-the-smart-wordpress-developer-kirki--cms-23739