如何為 WordPress 主題定制器創建自定義控件
已發表: 2015-06-17WordPress Theme Customizer（也稱為“Customizer”）功能使開發人員能夠自定義主題的外觀，甚至幫助他們實時預覽對主題所做的更改。 在當今時代，吸引客戶訪問網站的競賽正在加劇，您經常會感到需要定制您的網站設計。 並且感謝主題定制器，您可以通過實時預覽對 WordPress 設計所做的更改來節省大量寶貴的時間。
WordPress 主題定制器是作為主題定制 API 的一部分引入的（在 WordPress 版本 3.4 中引入。如果您想更改主題設置，那麼您需要使用主題附帶的自定義控件像複選框、文本字段、收音機和其他一些自定義工具。但是，如果您想將自己的自定義控件添加到您的 WordPress 主題中怎麼辦？
為了幫助您了解如何創建和添加定制以滿足您的特定需求的控件，我們將演示如何創建三個自定義控件來對我們的主題頁腳進行一些更改。 但是，要開始該過程，您首先需要熟悉 WP_Customizer_Control 類。
了解“WP_Customizer_Control”類
為了生成自定義控件，您需要創建一個新類並使用 WP_Customizer_Control 類對其進行擴展。 此類使用“$wp_customize->add_control()”方法將您自己的自定義控件添加到您的 WordPress 站點主題自定義屏幕。 此外，為了訪問此方法，您需要使用操作掛鉤中可用的 $wp_customize 對象：customize_register。
讓我們考慮一個示例，說明如何將現有自定義控件添加到主題部分（在“customize_register”操作掛鉤中），如下所示：
$wp_customize->add_control( new WP_Customize_Header_Image_ Control( $wp_customize, 'header_image', array( 'label' => __( 'Header image', 'mynewtheme' ), 'section' => 'header_image_settings', 'settings' => 'header_image_position', ) ) );$wp_customize->add_control( new WP_Customize_Header_Image_ Control( $wp_customize, 'header_image', array( 'label' => __( 'Header image', 'mynewtheme' ), 'section' => 'header_image_settings', 'settings' => 'header_image_position', ) ) );
在上面的示例中，我們正在創建一個控件，使用戶能夠選擇新的標題圖像。
示例演示：如何創建更多自定義控件？
本節分為三個不同的步驟，其中每個步驟都包含將為您的主題定制器的文本區域生成自定義控件的代碼。 我們將在 WordPress 主題的 footer.php 文件中添加代碼，以便通過新的文本區域控件對頁腳進行更改。
Step1：創建一個簡單的文本區域控件
正如我們上面所討論的，為了創建一個新的自定義控件，我們需要定義一個用於擴展 WP_Customize_Control 類的類。 本質上，該類與 WordPress Theme Customization API 一起使用，用於在主題自定義屏幕上添加輸入控件（即自定義控件）。 讓我們看一下實現這個任務的代碼：
/*Customizer Code HERE*/ add_action('customize_ register', 'theme_footer_customizer'); function theme_footer_customizer($wp_ customize){ //adding section in wordpress customizer $wp_customize->add_section(' footer_settings_section', array( 'title' => 'Footer Text Section' )); //adding setting for footer text area $wp_customize->add_setting(' text_setting', array( 'default' => 'Default Text For Footer Section', )); $wp_customize->add_control(' text_setting', array( 'label' => 'Footer Text Here', 'section' => 'footer_settings_section', 'type' => 'textarea', ));/*Customizer Code HERE*/ add_action('customize_ register', 'theme_footer_customizer'); function theme_footer_customizer($wp_ customize){ //adding section in wordpress customizer $wp_customize->add_section(' footer_settings_section', array( 'title' => 'Footer Text Section' )); //adding setting for footer text area $wp_customize->add_setting(' text_setting', array( 'default' => 'Default Text For Footer Section', )); $wp_customize->add_control(' text_setting', array( 'label' => 'Footer Text Here', 'section' => 'footer_settings_section', 'type' => 'textarea', ));
在這段代碼中，customer_register 動作鉤子用於告訴 WordPress 自定義函數，我們創建的名稱為：theme_footer_customizer。 您可能知道，WP_Customize_Manager 類有助於控制 WordPress 主題定制器，因此自定義控件將成為該類的一部分。 但是，要訪問您的控件，您需要使用“wp_customize”對象，它是 customize_register 掛鉤的一個實例。
在我們的例子中， wp_customize 對像用於定義將包含在文本區域中的新頁腳部分。 因此，無論您在頁腳部分“文本區域”中鍵入什麼內容，都將顯示在主題的頁腳中，如下面的屏幕截圖所示：
在此屏幕截圖中，您可以看到主題中添加了一個新的“頁腳文本部分”。 本節中編寫的文本將顯示在主題的頁腳中。
第 2 步：添加自定義控件以更改背景顏色
所以，現在我們已經創建了一個文本區域控件，您可以向它添加許多不同的自定義控件。 在此示例中，我們將向新的頁腳文本部分添加一個自定義控件，這將有助於更改頁腳的背景顏色。 為此，只需在主題的 footer.php 文件中添加以下代碼片段：
//adding setting for background $wp_customize->add_setting(' background_color', array( 'default' => '#ffffff', ) ); $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'background_color', array( 'label' => 'Footer Color Setting', 'section' => 'footer_settings_section', 'settings' => 'background_color', )));//adding setting for background $wp_customize->add_setting(' background_color', array( 'default' => '#ffffff', ) ); $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'background_color', array( 'label' => 'Footer Color Setting', 'section' => 'footer_settings_section', 'settings' => 'background_color', )));
正如您在上面的屏幕截圖中所看到的，從“頁腳顏色設置”中選擇合適的顏色，頁腳的背景顏色已變為灰色。
第 3 步：添加自定義控件以添加徽標
我們添加到頁腳文本部分的另一個控件是“頁腳徽標”。 顧名思義，“頁腳徽標”控件將有助於在頁腳中添加徽標。 要添加此控件，您需要在 footer.php 文件中包含以下代碼片段：
//adding setting for footer logo $wp_customize->add_setting(' footer_logo'); $wp_customize->add_control(new WP_Customize_Upload_Control($ wp_customize,'footer_logo', array( 'label' => __('Footer Logo', 'mytheme'), 'section' => 'footer_settings_section', 'settings' => 'footer_logo', ))); }//adding setting for footer logo $wp_customize->add_setting(' footer_logo'); $wp_customize->add_control(new WP_Customize_Upload_Control($ wp_customize,'footer_logo', array( 'label' => __('Footer Logo', 'mytheme'), 'section' => 'footer_settings_section', 'settings' => 'footer_logo', ))); }
讓我們結束吧！
您可能會發現創建自定義控件的過程有點耗時。 但是，您不能忽視這樣一個事實，即您將添加到您的網站主題自定義屏幕的控件越好，您的用戶就可以節省更多的時間，從而提高用戶體驗。 因此，如果您計劃自己構建一些自定義控件以添加到 WordPress 主題定制器中，那麼這篇文章將為您提供豐富的指南。
