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兼容，並從新功能和改進中受益。
>