主題定制器是一個很棒的工具，可以讓您的用戶更自由地調整主題，而無需編輯代碼。但如果您想讓用戶更改其網站的顏色，事情可能會變得復雜。為他們可以更改的每個元素添加一個控件將使事情變得很麻煩，并且用戶最終可能會得到一個看起來花哨混亂的網站。
您可以簡單地創建一個配色方案，允許用戶選擇幾種顏色，然后將它們應用到主題中的一系列元素，而不是為您希望用戶能夠更改的所有元素添加大量控件.
在本教程中，我將帶您完成此過程的第一部分，即設置主題定制器控件。在下一部分中，我將向您展示如何將這些控件鏈接到您的主題，以便當用戶選擇顏色時，它們會被帶入主題。
起點
首先安裝啟動主題并激活它。主題定制器將如下所示：
完成本教程后，您的定制工具將有兩個額外的部分。
設置主題定制器
第一步是在主題中創建一個文件來保存定制器功能。我將使用一個基本的起始主題，該主題基于我在從靜態 HTML 創建 WordPress 主題系列中創建的主題。我對其進行了一些修改，以便它可以與配色方案功能一起使用，因此如果您想完成本教程，我建議您下載起始主題。
在主題的主文件夾中，創建一個名為 inc 的文件夾，并在其中創建一個名為 customizer.php 的文件。
打開 functions.php 文件并添加以下內容，其中將包含您剛剛創建的新文件：
include_once( 'inc/customizer.php' );
現在在您的 customizer.php 文件中，添加以下函數：
function wptutsplus_customize_register( $wp_customize ) { } add_action( 'customize_register', 'wptutsplus_customize_register' );
這將創建一個包含所有設置和控件的函數，并將其掛鉤到 customize_register 操作掛鉤。您的主題已準備就緒！
創建配色方案設置和控件
第一步是添加配色方案的設置和控件。您將添加四個顏色選擇器的控件：主顏色、輔助顏色和兩個鏈接顏色。
添加新部分
在您剛剛創建的函數中，添加以下內容：
/******************************************* Color scheme ********************************************/ // add the section to contain the settings $wp_customize->add_section( 'textcolors' , array( 'title' => 'Color Scheme', ) );
這會為您的配色方案控件創建一個空白部分。
定義顏色參數
緊接著在下面添加：
// main color ( site title, h1, h2, h4. h6, widget headings, nav links, footer headings ) $txtcolors[] = array( 'slug'=>'color_scheme_1', 'default' => '#000', 'label' => 'Main Color' ); // secondary color ( site description, sidebar headings, h3, h5, nav links on hover ) $txtcolors[] = array( 'slug'=>'color_scheme_2', 'default' => '#666', 'label' => 'Secondary Color' ); // link color $txtcolors[] = array( 'slug'=>'link_color', 'default' => '#008AB7', 'label' => 'Link Color' ); // link color ( hover, active ) $txtcolors[] = array( 'slug'=>'hover_link_color', 'default' => '#9e4059', 'label' => 'Link Color (on hover)' );
這會向主題定制器添加一個名為“配色方案”的新部分。然后，它為您將使用的四種顏色設置參數：slug、默認值和標簽。默認值是主題中使用的顏色，因此您可能需要將其更改為主題中的顏色。
創建顏色設置
接下來，您需要使用剛剛定義的參數創建顏色設置。在最后一個代碼塊下方，鍵入：
// add the settings and controls for each color foreach( $txtcolors as $txtcolor ) { // SETTINGS $wp_customize->add_setting( $txtcolor['slug'], array( 'default' => $txtcolor['default'], 'type' => 'option', 'capability' => 'edit_theme_options' ) ); }
這使用 foreach 語句來處理您剛剛定義的每種顏色，并使用您定義的參數為每種顏色創建一個設置。但您仍然需要添加控件，以便用戶可以使用主題定制器與這些設置進行交互。
添加控件
在 foreach 大括號內以及剛剛添加的 add_setting() 函數下方，插入以下內容：
// CONTROLS $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, $txtcolor['slug'], array('label' => $txtcolor['label'], 'section' => 'textcolors', 'settings' => $txtcolor['slug']) ) );
這會使用 WP_Customize_Color_Control() 函數為每種顏色添加一個顏色選擇器，該函數為主題定制器創建顏色選擇器。
整個 foreach 語句現在將如下所示：
// add the settings and controls for each color foreach( $txtcolors as $txtcolor ) { // SETTINGS $wp_customize->add_setting( $txtcolor['slug'], array( 'default' => $txtcolor['default'], 'type' => 'option', 'capability' => 'edit_theme_options' ) ); // CONTROLS $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, $txtcolor['slug'], array('label' => $txtcolor['label'], 'section' => 'textcolors', 'settings' => $txtcolor['slug']) ) ); }
現在，當您打開主題定制器并激活主題時，您將能夠看到新部分：
當您展開其中一個控件時，您將能夠看到顏色選擇器：
目前，您對顏色選擇器所做的任何操作都不會實際反映在您的主題中，因為您尚未添加任何 CSS使其發揮作用 – 我們將在本系列的第 2 部分中討論這一點?，F在，我們將添加另一個部分，以便用戶更好地控制他們的配色方案。
創建純色背景設置和控件
下一部分將不允許用戶選擇顏色，而是為他們提供向其網站的頁眉和/或頁腳添加純色背景的選項。如果他們選擇此選項，這些元素的背景和文本顏色將會改變。
在您剛剛添加的代碼下方，但仍在 wptutsplus_customize_register() 函數內，添加以下內容：
/************************************** Solid background colors ***************************************/ // add the section to contain the settings $wp_customize->add_section( 'background' , array( 'title' => 'Solid Backgrounds', ) ); // add the setting for the header background $wp_customize->add_setting( 'header-background' ); // add the control for the header background $wp_customize->add_control( 'header-background', array( 'label' => 'Add a solid background to the header?', 'section' => 'background', 'settings' => 'header-background', 'type' => 'radio', 'choices' => array( 'header-background-off' => 'no', 'header-background-on' => 'yes', ) ) ); // add the setting for the footer background $wp_customize->add_setting( 'footer-background' ); // add the control for the footer background $wp_customize->add_control( 'footer-background', array( 'label' => 'Add a solid background to the footer?', 'section' => 'background', 'settings' => 'footer-background', 'type' => 'radio', 'choices' => array( 'footer-background-off' => 'no', 'footer-background-on' => 'yes', ) ) );
這將添加第二個名為“純色背景”的新部分，然后向其中添加兩個控件，這兩個控件都是單選框。在每種情況下都有兩種選擇：是和否。在本系列的第二部分中，我將向您展示如何根據這些選擇定義變量并使用它們來更改主題中的 CSS。
您現在可以在主題定制器中看到新部分：
同樣，如果您選擇其中一個單選框，則不會發生任何事情，因為您尚未將其鏈接到主題的 CSS ，但這終將到來。
摘要
在第一部分中，您添加了為您的配色方案創建主題定制器界面所需的設置和控件。
在下一部分中，我將向您展示如何根據用戶在主題定制器中所做的選擇來定義變量，然后使用這些變量來設置 CSS。
