!
也想出现在这里? 联系我们
广告位

使用Kirki框架更快地构建WordPress Customizer定制器设置

开始之前,可能有些朋友对我所说的 WordPress 定制器 Customizer 有些陌生,其实就是我们后台 外观-自定义 进入的界面,如下图所示,左3 J 8 @ 9 d B边的部分就是:

按照! o v - I o r s WordPress 的开发规范,是建议开发者可以尽可能使用这个 Customizer 来添加设置选项。如果你曾; E Z c Q经开发过 Customizer 设置选项,你X ! X \ P会发现,添加一个选项所需要的代码和步骤是D c . z有些多的,倡萌也很不喜欢这样的添加方式。而今天介绍的主角 Kirki 就是用来更快地添加设置选项的框架。

Kirki 简介

Kirki 是一个免费的开源(由 MIT 许可)框架,专门为: 4 s p $ d o :主题插件开发者开发,用于添加定制器(Customizn $ T s +er)设置选项到主题或插件中。

官方网站: https://kirki.org/

自 2014 年以来,Kir0 v $ki 的主要开发人员 Aristeides Stathopoulos 一直在研究该框架。通过不断的更新和p f D x t 4 F + g改进,Kirki 在 Github 上建立了一个社区, ) Q % a p,其中包括 1000 多颗星星和 300 个复制。在 Kirki 之前,我从未接触过 WordPress 的定制器( Customizer )。Kirki 帮助我了解了定制器,并在更少的时间内完成了很多工作!

WordPress 核心 Customizer 控件

默认情况下,WordPress 核心^ | P + a V包括一些基本的 Customizer 控件。例如:文本、文本区域、复选框、单选、选择、下拉页面、电子U K x P # 9 . & I邮件、网址、数字、隐y Z O E 0 [ , \藏和日期控件。

Kirki 除了支持这些核心控件,还支持其他二十多个。可以说,Ki7 ` 2 h 4rki 控件涵盖了更高级的用例。b _ Y \ w H例如:

  • 排版
  • 调色板
  • TiF ! g S \ 2 @nyMCE 编辑器
  • 可排序字段

Kirki 还提供 WordPress 和兴中不可用的* : 6 o ? D )功能,例如自动生成 CSS 输出和 postMessage 脚本。这些功能(我们将在本文后面介绍)可以轻松地将开发时间缩短一半。e m h j

Kirki 很慢?

通常针对 Kirki 的一种批评是它运行缓慢。实际上,这种批评被用于大多数框架; ~ S k ) R \ Y +(包括 WordPress)。有道理吧?您正在加载很多您可能永远不会使用的代码。p ` U 7 & ] Z在这种情况下,事实是相反。实际上,使用 Kirki 构建的大多数时间控制面板实际& z # y上都比使用核心 Controls 构建的相同时间V j ) & e面板要快。这是因p 4 z n为 Kirki 添加了 WordPress 中未内置的优化层。

初始化自定义程序后,WorJ X ndPress 会立即尝试加载所有 Customizer 控件,即使它们位于某个部分或面板中,并且用户还没有与其进v d [ 9 v Q行交互。相比之下,Kirki 将加载推迟到用户与控件进行交互之前。为了在实践中看到这种效果,让我们尝试使用两A k ] , p g种不同方法添加 50 个颜色控件。
WordPress 核心方法:

  1. for (9 [ S 8 _$i = 0; $iz e T ) _ U = i < 50; $i++) Y , j M T (1;{
  2. $wp_customize->add_setting( 'color_setting_hex_' . $i , arrayV I a 0 } ; ; N H(
  3. 'default' => '#0088CC'
  4. ) );
  5. // add color picker control
  6. $n ] o . c y l A Cwp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'color_settinD % #g_hex_' . $i,! W F l f % array(
  7. 'label' => 'CP } L Y m + M S Yolor Control',
  8. 'sectiU F ` _ F $ Eon' => 'title_tagl# ^ ; H gine',t E a |
  9. 'settings' => 'color_setting_hex_' . $i,
  10. s l 3 3 K F1; ) );
  11. }

使用 Kirki:

  1. for ($i = 0; $i < 50; $i++) {
  2. Kirki:P i * v R:add_fieldO 8 N T w h * 30; 'config_id', arrayb = X040;
  3. 'type' => 'color',
  4. 'settings' => 'co; O I G \ +lor_setting_hex_' . $i,
  5. 'label' => __( 'Color Control', 'kirki5 R z B t $ j 6 F' &u ` S { 7#041;,
  6. 'section' => 'title_tagline',
  7. 'default' => '#0088CC',
  8. ) );
  9. }

结果:

将 Kirki 集成到您的S o k项目中

有很多种方法可以将 Kirki 框架集成到您的项目中,官方文档很好地介绍了不同的方法。我建E j ! : e议开发人员指导用# h D t + 0 i X (户安装 Kirki 插件版本,而不是直接在项/ U e ~ I S c J V目代码中包含框架。可以使用 TGMPA 或提供的脚本来完成Z u n *。采取插件途径的原因是 Kirki 经常得到更新和改进。通过安装插件版] k U c y本,您的用户将可以尽快获取错误修复和安全更新。相反,当您将框架作为项目的一部分包E b w含在项目时y z & U M ],仅当您更新主题或插件时,用户才会收到更新,更新的频率可能比所需的少。无论使用哪种方法,请确保在添加设置之前检查 Kirki 是否已初始化:

  1. // 如果 Kirki 类不存在就退出
  2. if ( ! class_exists( 'Kirki' ) ) {
  3. return;
  4. }

字段 Fields

在“WordPress 核心方法H * Y :”示例中,我% N j * @ V H R们首先创建了一个设置,然后为其创建了一个控件。在大多数情况下,两者是直接链接的。Kirki 简化了流程,并允许我们创建一个“字段”。创建字段后,它将在后台为我们构建设置和控件。字段j V ; o D {支持您期望的所有控制参数F * m(标签、描述、部分、默认值)以及某些 Kirki 特定参数。

'type'参数允许您选择 Kirki 的 30 种控件类型之一:https://kirki.org/docs/cont1 q = 9rols/

部分 Sections

CustomO 2 * g m 6 uizer 定制器部分允许您将控件分组在一起。WordPress 有六个内置部分,您也可以添加控件:

  • title_tagline –站点身份
  • colors –颜色
  • header_image –标题图片
  • backg& t N b P Nround_| E ~ c ximage –背景图片
  • static_front_pa( $ T ` : B F % $ge –主页设置
  • custom_css –自定义 CE & xSS

Kirki 中的部分与核心中的完全相同,Kirki::add_section() 方法只是$wp_customize->add_section()的封装C ( t A N ` h H,并接受相同的参数和值。

  1. Kirki::add_section( 'section_id', array(
  2. 'title' => esc_HTML__( 'My Section', 'kirki' ),
  3. 'description' => esc_html__( 'My section description.', 'kirki' ),
  4. ) );

面板 Panels

面板允许您通过将各部分分组在一起来创建另一个层次结构。WordPress 核心具有一个内置面板,即“菜单”。同样,Kirki 实~ I G S Q L / T J现只是核心功能的封装。

  1. Kirki::add_panel( 'panel_id', array(
  2. 'priority' => 10,
  3. 'ti& w x $ 3 G g $tle' => esc_html__( 'My Panel', 'kirki' ),
  4. 'description' => esc_html__( 'My panel descrW $ , I ( | Niption', 'kirki' )x 5 \ y % K L b,
  5. ) );

'transport' => 'auto'
在创建“定制器控件”时,您有两个用于传输参数的选项:

  • Ref+ ; } 1 2 w M O cresh–即刷新,每次用户进行更改时,都会刷新预览窗口来显示更i B F i , e k Y改。这可能需要几秒钟。
  • postMessage–每次用户进# q 6 k Q - x M ,行更改时,预览窗口都会使用 Javascript 更新,而无需刷新并且几乎是即时的。

毫无疑问,postMessage 是更新预览器的上乘方法,应尽可能使用它。但是,有一个缺点,使用 postMe` = X ^ Ussage 意味着C 1 L X 3 i L E R您需要为每个控件创建编写自定义 JS 代码。一个简单的实现看起来像这样:

  1. // 实时更新网站标题...
  2. wp.customize&f ( S C E +#040; 'bloI O B q 3 _ W o Hgname'C l k M ] S ] ~ \, function( valQ c + 2 $ue ) O 6 P123;
  3. vG j I q Z Value.bind( function( newval ) &z p % G # *#12A - 5 ! I ?3;
  4. $( '#site-titleM J v : ! a' ).html( newval );
  5. } );
  6. & w I J K \ k !5; );

当您进行许多设置时,就需要不断重复这些代码。这就是 Kirki 大放异彩的地方,它添加了第三个选项:'transport'=>'auto'。'transport'=>'auto'与 Kirki 添加的另一J x Q r个名为'output'的参数一起使用。定义两个值后,Kirki 将为您自动生成 postMessage 脚本。这意味着您无需编写任何 Javascripc o 8 Z [t 代码即可获得使用 postMessage 的所有好处。使V a # l N y ] 4用 transport =>'auto'的字段如下所示:

  1. Kirki::aM e h n ] ,dd_field( 'config_id', array; ~ n L * P n H040;
  2. 'type' => 'color',
  3. 'se) ? x 4 D , S ettings' => 'color_setting_hex',
  4. 'label' => __( 'Color Control', 'kirki' ),
  5. 'T u ? / g \section' => 'colors',
  6. 'default' => '#0088CC',
  7. 'transpoH ^ = j f w & xrt' => 'auto',
  8. 'output' => array(
  9. array(
  10. 'element'X M * => 'body',
  11. 'properb t + i ; O ?ty' => 'background-color',
  12. ),
  13. ),
  14. ) );

Kirki 的a ~ D * \ N L这种省时功能意味着大部分时间不再需要, p ( F 2 ^ Q编写或排队自己的 postMessage 脚本。

前端 CSS 输出` ? M n

创建 Customizer 设置的另一部分是在前端生成 CSS 输出。一个简单$ n ) n的示例可能如下所示:

  1. /**
  2. * Output the Customizer CSS to wp_head
  3. */
  4. function wptavern_custo* 5 J H - $ = Smizer_css() {
  5. $bg_color = get, { $ ? 6 v g E `_theme_mod( 'color_settiM 0 : y P R vng_hex' );
  6. ?>
  7. <style>
  8. body {
  9. background-color: <?php echo sanitize_hex_color( $bg_color ); ?>;
  10. }
  11. </style>
  12. <?php
  13. }
  14. add_action( 'wp_head', wptavern_customizz P _ | 7er_css );

像 postMessage 示例一样,如果您I , Z h h f l有很多设置,就需要不断重复类似的代码。幸M P \运的是,'transport'=>'auto'也会为您处理前端输出。即使在我们的简化示例中, 'transport'=>'auto' 也将W & *我们需要编写的代码减少了约 50%。

总结

在本文中,我们仅考察了 Kirki 框架的基础知识及其h q u m[ P G u ` / W v个参数,已经可以看到它如何使我们能够k 6 C ` t ~ 8更快地创建 Customizer 控件而又O u W g !不影响性能。

当您接触 Kirki 时,您会很快发现它在 Customize API 之上添加的丰富功能。毫不奇怪,它已在超过 400,000 个网站上使0 f 5 1 l [用,并且是市场上一些最大v * $ H ~ C V的 Wordd X Y uPress 主题的核心部分。

给TA打赏
共{{data.count}}人
人已打赏
WordPress教程

代码添加 WordPress 的 Post Embed 文章嵌入功能

2022-11-12 3:40:18

WordPress教程

禁用WordPress与官网连接解决后台打开速度慢的问题

2022-11-12 4:10:18

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索