在项目中使用 Kirki 框架更快地构建定制器设置

已发表: 2019-08-10

Kirki 是一个免费的开源（MIT 许可）框架，专为希望将定制器控件添加到其主题或插件的开发人员而构建。

Kirki 的首席开发人员 Aristeides Stathopoulos 自 2014 年以来一直致力于该框架的开发。由于不断的更新和改进，Kirki 在 Github 上建立了一个社区，其中包括 1000 多个 star 和 300 个分叉。

在 Kirki 之前，我从未接触过定制器。 Kirki 帮助我了解了定制器并在更短的时间内完成了很多工作！
LebCit – WordPress 主题开发者

WordPress 核心定制器控件

默认情况下，WordPress Core 包含一些基本的定制器控件。例如：文本、文本区域、复选框、单选、选择、下拉页面、电子邮件、URL、数字、隐藏和日期控件。

Kirki 也支持 Core Controls，另外还有大约 20 个。一般来说，Kirki 控件涵盖了更高级的用例。例如：

排版
调色板
TinyMCE 编辑器
可排序字段

Kirki 还提供了 Core WordPress 中没有的功能，例如自动生成 CSS 输出和 postMessage 脚本。我们将在本文后面介绍的这些功能可以轻松地将您的开发时间缩短一半。

柯基很慢

对 Kirki 的普遍批评之一是它的速度很慢。事实上，这种批评适用于大多数框架（包括 WordPress）。这是有道理的，对吧？您正在加载很多您可能永远不会使用的代码。

在这种情况下，现实情况恰恰相反。大多数情况下，使用 Kirki 构建的控制面板实际上会比使用 Core Controls 构建的相同面板更快。

这是因为 Kirki 添加了一个 WordPress 未内置的优化层。

当定制器被初始化时，WordPress 会立即尝试加载所有控件，即使它们在一个部分或面板中并且用户还不能与它们交互。相比之下，Kirki 将加载推迟到用户与控件交互之前。

要查看实际效果，让我们尝试使用每种方法添加 50 个颜色控件。

核心方法：

 对于 ($i = 0; $i < 50; $i++){
	$wp_customize->add_setting( 'color_setting_hex_' . $i , array(
		'默认' => '#0088CC'
	));

	// 添加颜色选择器控件
	$wp_customize->add_control（新 WP_Customize_Color_Control（$wp_customize，'color_setting_hex_'。$i，数组（
		'标签' => '颜色控制',
		'section' => 'title_tagline',
		'设置' => 'color_setting_hex_' 。 $i,
	) ) );
}

与柯基：

 对于 ($i = 0; $i < 50; $i++) {
     Kirki::add_field('config_id', array(
         '类型' => '颜色',
         '设置' => 'color_setting_hex_' 。 $i,
         '标签' => __( '颜色控制', 'kirki' ),
         'section' => 'title_tagline',
         '默认' => '#0088CC',
     ));
 }

结果：

如您所见，使用 Kirki 时初始加载速度要快得多。创建控件所需的代码也更简洁。

将 Kirki 集成到您的项目中

有多种方法可以将 Kirki 框架集成到您的项目中，官方文档很好地解释了不同的方法。

我建议开发人员指导用户安装 Kirki 的插件版本，而不是直接在项目代码中包含框架。这可以使用 TGMPA 或提供的脚本来完成。

采用插件路线的原因是 Kirki 经常更新和改进。通过安装插件版本，您的用户将可以即时访问错误修复和安全更新。

相反，当您将框架作为项目的一部分包含在内时，用户只会在您更新主题或插件时收到更新，这可能比要求的频率低。

无论您使用哪种方法，请务必在添加设置之前检查 Kirki 是否已初始化：

 // 如果 Kirki 不存在，则提前退出。
如果（！class_exists（'Kirki'））{
    返回;
}

字段

在核心方法示例中，我们首先创建了一个设置，然后为它创建了一个控件。在大多数情况下，两者是直接相关的。 Kirki 简化了流程，并允许我们创建一个“字段”。创建字段时，它会在后台为我们构建设置和控件。

字段支持您期望的所有控制参数（标签、描述、部分、默认），以及一些特定于 Kirki 的参数。

'type' 参数允许您选择 Kirki 的 30 种控件类型之一：https://kirki.org/docs/controls/

部分

定制器部分允许您将控件组合在一起。 WordPress 有六个内置部分，您也可以添加控件：

title_tagline – 网站标识
颜色 – 颜色
header_image - 标题图像
background_image - 背景图像
static_front_page – 主页设置
custom_css – 附加 CSS

Kirki 中的部分与 Core 中的工作方式完全相同，Kirki::add_section() 方法只是 $wp_customize->add_section() 的包装器，并接受相同的参数和参数。

 Kirki::add_section('section_id', array(
     'title' => esc_html__('我的部分', 'kirki' ),
     'description' => esc_html__('我的部分描述', 'kirki' ),
 ));

面板

面板允许您通过将部分组合在一起来创建另一个层次结构。 WordPress Core 有一个内置面板，即“菜单”。

同样，Kirki 实现只是核心功能的包装器。

 Kirki::add_panel('panel_id', array(
     '优先级' => 10,
     'title' => esc_html__('我的面板', 'kirki' ),
     'description' => esc_html__('我的面板描述', 'kirki' ),
 ));

'运输' => '汽车'

传统上，在创建定制器控件时，传输参数有两个选项：

刷新– 每次用户进行更改时，预览窗格都会刷新以显示更改。这可能需要几秒钟。
postMessage – 每次用户进行更改时，预览窗格都会使用 Javascript 进行更新，该 Javascript 不需要刷新并且几乎是即时的。

postMessage 无疑是更新预览器的最佳方法，应尽可能使用。但是，有一个缺点，使用 postMessage 意味着您需要为每个控件创建编写自定义 JS 代码。一个简单的实现如下所示：

 // 实时更新站点标题...
wp.customize（'博客名称'，函数（值）{
    value.bind(函数(newval){
        $( '#site-title a' ).html( newval );
    });
});

当您有很多设置时，这很快就会变得重复。

这就是 Kirki 的亮点，它增加了第三个选项：'transport' => 'auto'。

'transport' => 'auto' 与 Kirki 添加的另一个名为 'output' 的参数一起使用。定义这两个值后，Kirki 将为您自动生成 postMessage 脚本。这意味着您无需编写任何 Javascript 代码即可获得使用 postMessage 的所有好处。

使用 transport => 'auto' 的字段如下所示：

 Kirki::add_field('config_id', array(
     '类型' => '颜色',
     '设置' => 'color_setting_hex',
     '标签' => __( '颜色控制', 'kirki' ),
     '部分' => '颜色',
     '默认' => '#0088CC',
     '运输' => '汽车',
     '输出' => 数组（
         大批（
             '元素' => '身体',
             '属性' => '背景色',
         ),
     ),
 ));

Kirki 的这一省时特性意味着大多数时候您将不再需要编写或将您自己的 postMessage 脚本排入队列。

前端 CSS 输出

创建定制器设置的另一部分是在前端生成 CSS 输出。一个简单的示例可能如下所示：

 /**
 * 将定制器 CSS 输出到 wp_head
 */
功能 wptavern_customizer_css() {
	$bg_color = get_theme_mod('color_setting_hex');
	?>
	<风格>
		身体 {
			背景颜色：<?php echo sanitize_hex_color( $bg_color ); ?>;
		}
	</style>
	<?php
}
add_action('wp_head', wptavern_customizer_css);

与 postMessage 示例一样，如果您有很多设置，编写此代码很快就会变得重复。

幸运的是，'transport' => 'auto' 也为您处理前端输出。即使在我们的简化示例中，'transport' => 'auto' 也将我们需要编写的代码减少了约 50%。

结论

在本文中，我们只了解了 Kirki 框架的基础知识及其两个论点，我们已经可以看到它如何让我们更快地创建定制器控件并且不影响性能。

当您深入了解 Kirki 时，您会很快发现它在自定义 API 之上添加的丰富功能。毫不奇怪，它已在超过 300,000 个网站上使用，并且是市场上一些最大的 WordPress 主题的核心部分。