kirki的快速WordPress定制选项-＆＃＆按-PHP中文网

kirki的快速WordPress定制选项

WordPress用户已经习惯了一件事，很容易，没有代码所需的主题自定义选项。这个想法是：下载主题，在主题面板中激活它，访问自定义面板，然后开始调整主题的颜色，布局，字体等。

WordPress为主题开发人员提供定制器API。这是一组干净，面向对象的方法集，可促进创建一致的自定义接口。在自定义面板上，用户可以轻松地进行更改并进行实时浏览，而无需与PHP或CSS代码混乱。

>使用Customizer API开发主题选项，同时是一个直接且合乎逻辑的过程，涉及编写一定数量的重复代码。为了减少构建功能和安全定制选项所需的一些步骤，Aristeides Stathopoulos一直在开发免费的开源插件Kirki。

在这篇文章中，我将展示如何将Kirki集成到您的WordPress主题中，以及如何使用它来构建一些定制器选项。

钥匙要点

Kirki通过提供更简单的语法和高级功能来增强WordPress Customizer API，从而使开发人员可以使用更少的代码编写更多。

工具包不断发展，鼓励用户在GitHub上为其开发做出贡献。

>工具包支持AJAX的实时预览，通过允许在没有页面重新加载的更改上进行更改来增强用户体验。
kirki文档

我想开车回家有关此工具包的两个分。

是时候看到Kirki在行动了。如果您想遵循，请准备好WordPress主题或获取包含本文中讨论的所有代码的SuperMinimal Demo主题。

如何将Kirki包括在您的主题中

Kirki被包装为WordPress插件。因此，您可以从WordPress.org插件存储库下载它，也可以直接从WordPress安装的后端下载，解开它并激活它。

>如果您希望将Kirki作为库中包含在主题中，请按照以下概述的步骤操作。

将Kirki目录复制到您的主题文件夹中。

通过将此行添加到functions.php（确保您调整到Kirki文件夹的路径以匹配您的主题的文件结构），将此行添加到functions.php（确保将此行添加到functions.php中）使您的主题“谈话”与Kirki进行“交谈”。
>
添加一个函数以包含Kirki配置选项，然后将其连接到Kirki/Config Felter。这取决于您要添加到此功能的内容。在这篇文章中，让我们通过添加代码Kirki需求以“了解”其新位置，即主题文件夹而不是插件文件夹。

<span>if ( ! class_exists( 'Kirki' ) ) {
</span>    <span>include_once( dirname( __FILE__ ) . '/inc/kirki/kirki.php' );
</span><span>}</span>

登录后复制

让我们开始添加选项

定制器选项现场直播，该部分位于面板内部。在本文的演示项目中，我使用本机定制方法将所有部分分组在专用面板中，例如so。
>
if ( ! class_exists( 'Kirki' ) ) { include_once( dirname( __FILE__ ) . '/inc/kirki/kirki.php' ); }
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
接下来，通过将此代码放置在上一个ADD_PANEL自定义方法下方，分别将此代码放置在网站文本颜色，站点布局和页脚文本选项中添加部分。
```
function superminimal_customizer_config() {
 $args = array(
 // Only use this if you are bundling the plugin with your theme 
 'url_path' => get_stylesheet_directory_uri() . '/inc/kirki/',

 );
 return $args;
 }
 add_filter( 'kirki/config', 'superminimal_customizer_config' );
```
登录后复制
登录后复制
登录后复制
现在，您准备添加第一个Kirki驱动的选项。
>
>文本颜色选项

>您所有与选项相关的代码都将放置在功能中。然后通过Kirki/Fields滤波器过滤此功能。
```
function superminimal_demo_panels_sections( $wp_customize ) {
 /**
 * Add Panel
 */
 $wp_customize->add_panel( 'sitepoint_demo_panel', array(
 'priority' => 10,
 'title' => __( 'SitePoint Demo Panel', 'superminimal' ),
 'description' => __( 'Kirki integration for SitePoint demo', 'superminimal' ),
 ) );
 
 //More code to come
 }
 add_action( 'customize_register', 'superminimal_demo_panels_sections' );
```
登录后复制
登录后复制
>让您给您的WordPress主题用户一种更简单的更改文本颜色的方法。 Kirki很快就完成了。在返回$字段上方的Superminimal_demo_fields（）函数中添加以下代码片段；陈述。
```
/**
 * Add a Section for Site Text Colors
 */
 $wp_customize->add_section( 'superminimal_text_colors', array(
 'title' => __( 'Site Text Colors', 'superminimal' ),
 'priority' => 10,
 'panel' => 'sitepoint_demo_panel',
 'description' => __( 'Section description.', 'superminimal' ),
 ) );
 
 /**
 * Add a Section for Site Layout
 */
 $wp_customize->add_section( 'superminimal_site_layout', array(
 'title' => __( 'Site Layout', 'superminimal' ),
 'priority' => 10,
 'panel' => 'sitepoint_demo_panel',
 'description' => __( 'Section description.', 'superminimal' ),
 ) );
 
 /**
 * Add a Section for Footer Text
 */
 $wp_customize->add_section( 'superminimal_footer_text', array(
 'title' => __( 'Footer Text', 'superminimal' ),
 'priority' => 10,
 'panel' => 'sitepoint_demo_panel',
 'description' => __( 'Section description.', 'superminimal' ),
 ) );
```
登录后复制
登录后复制
Kirki提供了一种凝结的语法，可以一次添加设置和相关控件。

>让我们分解$ fields [] array。
>
- >
- >
- 优先级是指相对于同一部分内其他控件的该特定颜色控制的位置。
- >默认值设置为默认的CSS颜色值。
- >最后，输出是应用设置价值的出色柯基（Kirki）。只需将其提供给CSS选择器和属性，Kirki处理所有必要的操作。
- >按照上面的示例，您可以继续添加链接的颜色选项。
接下来，让我们为主题的用户提供自定义站点布局的选项。
>站点布局选项
Kirki提供了许多复杂的定制器控件。我最喜欢的是无线电图像控件。

>这是您可以将其添加到主题的方法，以便为用户提供更改其网站布局的选项。

>将代码放在上面的$ fields []阵列代码段之后。请注意，如何将输出参数添加到代码中。之所以如此，是因为每个无线电图像输入的值不是CSS属性值。
>您可以通过本机Customizer get_theme_mod方法从superminimal_layout设置提取值的方式。然后，您将该值用作模板文件中合适的HTML元素的类属性值。最后，这只是编写适当的CSS的问题，以实现您的样式表中的.fullwidth，Sidebar-Left和.sidebar-Right类的所需布局。

>查看如何在SuperMinimal Demo主题中实现布局选项的详细信息。

>页脚文本选项

>您遇到过多少次WordPress主题用户，要求您帮助他们更换主题的页脚区域中的任何开发人员？添加一个选项，让用户轻松地管理自定义器的页脚文本需要几分钟的时间。这是代码。
if ( ! class_exists( 'Kirki' ) ) { include_once( dirname( __FILE__ ) . '/inc/kirki/kirki.php' ); }
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
上面的代码输出一个文本方面，用户可以在其中编写版权通知，信用等。
>
>提取并显示在文本中心中输入的文本，请在footer.php中使用本机定制方法get_theme_mod，如下所示。
function superminimal_customizer_config() { $args = array( // Only use this if you are bundling the plugin with your theme 'url_path' => get_stylesheet_directory_uri() . '/inc/kirki/', ); return $args; } add_filter( 'kirki/config', 'superminimal_customizer_config' );
登录后复制
登录后复制
登录后复制
接下来，让我们检查一下Kirki可以通过WordPress Customizer改善用户体验的方法。

如何添加条件选项

作为主题设计师，您不喜欢用很多令人困惑的选项压倒用户。在用户选择一些特定选择之前，不需要做出一些选择。定制器为面板，部分和控件提供了方便的Active_callback参数。您可以将此参数设置为在定制器中显示面板，部分或控件之前必须满足的特定条件。

>在这方面，Kirki提供了什么？
kirki api使用所需的参数根据另一个控件的值在定制器中隐藏或显示控件。
例如，假设您想显示TextArea，以使用户只有在检查复选框时才修改页脚文本。为此，请将以下代码添加到Superminimal_footer_text控件中。

>将上面的摘要添加到TextArea控件的代码中，可确保Superminimal_reveal_footer_text Control的值在自定义器中显示TextAarea控件之前等于1。让我们将superminimal_reveal_footer_text控件添加到superminimal_demo_fields（）函数。
```
function superminimal_demo_panels_sections( $wp_customize ) {
 /**
 * Add Panel
 */
 $wp_customize->add_panel( 'sitepoint_demo_panel', array(
 'priority' => 10,
 'title' => __( 'SitePoint Demo Panel', 'superminimal' ),
 'description' => __( 'Kirki integration for SitePoint demo', 'superminimal' ),
 ) );
 
 //More code to come
 }
 add_action( 'customize_register', 'superminimal_demo_panels_sections' );
```
登录后复制
登录后复制
> superminimal_reveal_footer_text控件是一个复选框，默认情况下将其设置为0，即未经检查。这样可以防止文本框架显示。
```
/**
 * Add a Section for Site Text Colors
 */
 $wp_customize->add_section( 'superminimal_text_colors', array(
 'title' => __( 'Site Text Colors', 'superminimal' ),
 'priority' => 10,
 'panel' => 'sitepoint_demo_panel',
 'description' => __( 'Section description.', 'superminimal' ),
 ) );
 
 /**
 * Add a Section for Site Layout
 */
 $wp_customize->add_section( 'superminimal_site_layout', array(
 'title' => __( 'Site Layout', 'superminimal' ),
 'priority' => 10,
 'panel' => 'sitepoint_demo_panel',
 'description' => __( 'Section description.', 'superminimal' ),
 ) );
 
 /**
 * Add a Section for Footer Text
 */
 $wp_customize->add_section( 'superminimal_footer_text', array(
 'title' => __( 'Footer Text', 'superminimal' ),
 'priority' => 10,
 'panel' => 'sitepoint_demo_panel',
 'description' => __( 'Section description.', 'superminimal' ),
 ) );
```
登录后复制
登录后复制
>仅在选中复选框后，即通过将其值从0更改为1，即文本中心出现在Customizer中。

增强实时预览

>自定义器带有功能强大的JavaScript API，可在预览区域添加AJAX功能。这种增强功能使用户可以实时检查其修改，而无需等待整个Customizer预览页面刷新。

>我们可以通过在$ fields []数组中添加一些方便的参数来实现Kirki的相同结果。
例如，要将Ajaxified Live预览添加到SuperMinimal_body_color设置中，请将以下片段附加到适当的$ fields []数组。
if ( ! class_exists( 'Kirki' ) ) { include_once( dirname( __FILE__ ) . '/inc/kirki/kirki.php' ); }
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
>让我解释上述代码的作用。
- 接下来，JS_VARS参数值表示将使用CSS颜色属性修改正文和P元素。
- Kirki为功能参数提供了两个预定义值。如果您要添加的设置，请使用CSS值，例如背景色，颜色，字体大小等诸如CSS规则。
作为如何使用HTML值的示例，让我们将Ajax Live Preview功能添加到管理页板文本更改的设置中。在包含superminimal_footer_text设置的$字段[]数组的末尾附加此片段。

就是这样，然后尝试在Superminimal_footer_text部分中的Textarea中写入一些内容。您很快就会注意到预览屏幕中的相应页脚文本在没有完整的页面重新加载的情况下进行了相应的更改。凉爽的！
带有无线电图像控制的Ajax Live Preview
>在某些情况下，CSS和HTML都不适合启用Ajax Live Preview的函数参数。一个很好的例子是为更改站点布局的设置。使用CSS作为函数参数的值没有意义，因为所讨论的设置不会存储任何CSS属性值。同样，使用HTML并不能完全削减它。实际上，它最终只会在预览页面上吐出
function superminimal_customizer_config() { $args = array( // Only use this if you are bundling the plugin with your theme 'url_path' => get_stylesheet_directory_uri() . '/inc/kirki/', ); return $args; } add_filter( 'kirki/config', 'superminimal_customizer_config' );
登录后复制
登录后复制
登录后复制
fullwidth
，
sidebar-left >或
> sidebar-right
>选择控制按钮。但这不可能是您想完成的。
好消息是，您可以插入自定义的JavaScript函数名称作为函数参数的值，并且它有效！ >您需要加入自定义功能生存的JavaScript文件并将其挂接到customize_preview_init Action Hook。最后，编写使用本机Customizer JavaScript API处理实时预览的JavaScript函数。
if ( ! class_exists( 'Kirki' ) ) { include_once( dirname( __FILE__ ) . '/inc/kirki/kirki.php' ); }
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
关于Kirki的伟大之处在于，您可以将其与WordPress Customizer API一起使用，而不是代替WordPress Customizer API。因此，在情况需要的地方，您可以立即轻松地在两个API之间切换。

资源

渴望更多？这是一些很棒的资源。
- Aristeides Stathopoulos使用Kirki定制器构建WordPress主题。
- >主题选项 - wordpress.org主题手册的自定义API。
>我已经展示了如何将Kirki Toolkit集成到WordPress主题中。
Kirki正在积极开发和支持Kirki。它的API和自定义控件已经显着优化了开发定制器主题选项所需的时间。如果您希望在WordPress.org主题存储库中列出主题，这将变得尤为重要。实际上，需要提供自定义选项的主题必须通过自定义器而不是自定义选项页面进行。

>深入研究本文中讨论的代码的详细信息，请随时从Github下载超级演示主题。

我期待您的反馈！

经常询问有关快速WordPress定制器选项开发的问题
什么是Kirki？如何使WordPress开发受益？

Kirki是一种工具包，旨在简化为WordPress开发主题的过程。它提供了一系列功能，使创建，自定义和管理WordPress主题变得更容易。这些包括一个定制器，该定制器可让您实时预览更改，不同类型的内容的各种控件以及一个模块化结构，该结构可让您仅包含所需的功能。通过使用Kirki，开发人员可以节省时间和精力，并创建更强大，更灵活的主题。

>如何安装和设置WordPress的Kirki？您可以从WordPress插件目录下载并像其他任何插件一样安装它。安装后，您可以通过WordPress Customizer访问Kirki的功能。要设置Kirki，您需要为主题添加配置。这涉及在主题的functions.php文件中添加几行代码。该配置指定主题的选项和设置。

Kirki提供哪些类型的控件？

Kirki为不同类型的内容提供了广泛的控件。其中包括基本控件，例如文本，复选框和无线电按钮，以及更高级的控件，例如彩色选择器，图像上传器和排版选择器。每个控件都带有其自己的一组选项和设置，使您可以自定义控件以适合您的需求。
>如何在Kirki？

中使用实时预览功能。要使用此功能，您需要在控制配置中添加“传输”选项。 “传输”选项指定了预览中如何反映对控件的变化。通过将此选项设置为“ postmessage”，您可以为控件启用实时预览。

我可以将kirki与任何wordpress主题使用？

是的，kirki旨在与任何人一起使用WordPress主题。但是，要充分利用Kirki的功能，您的主题需要支持WordPress定制器。大多数现代WordPress主题都支持定制器，因此对于大多数用户而言，这不是一个问题。
>
>如何使用kirki？

>使用kirki添加新面板涉及添加一个新面板主题函数的代码很少。php文件。该代码指定面板的ID，标题，描述和优先级。一旦添加，面板将出现在WordPress Customizer中，您可以向其添加部分和控件。
>
> kirki的模块化结构是什么？它如何使我受益？ Kirki的结构意味着将其分为单独的模块，每个模块提供一组特定的功能。这使您仅包括所需的模块，从而降低主题的大小和复杂性。它还使管理和更新主题变得更容易，因为您可以更新或替换单个模块而不会影响主题的其余部分。
>
>如何使用Kirki？ 🎜> Kirki提供了一个排版控件，可让您自定义主题中的版式。此控件提供了设置字体系列，变体，大小，线高，字母间距和颜色的选项。您还可以将Google字体添加到控件中，使您可以访问各种字体。

>我可以使用kirki创建子主题吗？孩子主题。子主题是继承另一个主题的功能和样式的主题，称为父主题。通过创建子主题，您可以修改父主题而不会影响原始代码。 Kirki提供了一系列功能，使创建和自定义儿童主题变得更加容易。

如何更新Kirki？
>更新Kirki与更新任何其他WordPress插件一样简单。您可以通过WordPress仪表板进行更新，或者通过从WordPress插件目录下载最新版本并手动安装它。重要的是要保持Kirki的最新状态，以确保与最新版本的WordPress兼容，并从新功能和改进中受益。
>