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

最新推荐文章于 2024-09-05 09:25:34 发布

cunjie3951

最新推荐文章于 2024-09-05 09:25:34 发布

阅读量623

点赞数

文章标签： java python php 小程序 linux ViewUI

欢迎来到“智能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的其他控制字段。

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