怎么用WordPress Customize API添加原生設置？-WordPress開發

也許大部分主題是使用相關的設置框架。如果我們的主題只有幾個選項呢？可以在主題的自定義里面配置。這一節就教大家如何制作主題的設置選項。

• 原文文檔：文檔1
• 中文文檔：詳情
• 相關項目：Github

本站下載該頁歷史版本

我開發的博客主題Mirages就是使用這個方法來進行主題的設置。可以下載下來看看（新年前發布?）。

設置 API是在 2.7 版本中加入的新功能。它令包含設置表單的管理頁面實現“半自動工作”，允許您定義整個管理頁面、選項區域，甚至具體的欄目。

• 參考主題：詳情

本站下載：

[zrz_file link="https://n.getimg.net/www/2019/01/10eca19b133531.zip" name="colormag.1.3.4" code=""]

• 相關文檔：官方文檔

在主題的functions.php文件中底部添加如下代碼：

//面板、設置節、設置，控件
        //添加一個設置面板
		$wp_customize->add_panel( 'npcink_options',             //ID=npcink_options
		array(          
			'capabitity'  => 'edit_theme_options',              //根據用戶的權限級別顯示或隱藏該部分。默認為edit_theme_options 
			'description' => __( 'Npcink出品', 'npcink' ),      //可選。顯示在面板頂部的描述隱藏在幫助圖標后面。
			'priority'    => 30,                               //優先級，可選。這將控制此部分在Theme Customizer側欄中的顯示順序。
			'title'       => __( 'Lifet主題設置', 'npcink' ),    //面板的可見名稱。
		) );
		 

		//添加第一個設置節(文本節)
		$wp_customize->add_section('sections_text_demo',       //id = sections_1
		array(                
			'title'     => '第一個設置節',               //設置的可見名稱。
			'description' => '第一個設置節詳細補充',      //設置的詳細信息
			'panel' => 'npcink_options',                 //加入第一個設置面板'npcink_options'  => 50//優先級
		) );
		/////////////////////////////////////////////////////////////////////////////////////////////////
		//添加第一個設置節的第一個設置
        $wp_customize->add_setting('aaa',
        	array(
        		'default' => 'Npcink出品',    //默認值
        	)
        );
        //添加第一個設置節的第一個設置控件
        $wp_customize->add_control('aaa',
        	array(
        		'label' => '第一個設置節的第一個設置標題',
        		'section' => 'sections_text_demo',    //填入設置節的ID
        		'type' => 'text',
        	)
        );
		
		///////////////////////////////////////////////////////////////////////////////////////////////////
		//添加第一個設置節的第二個設置
        $wp_customize->add_setting( 'bbb',    //（必填）用作ID的唯一類似slug的字符串。默認值：無
        	array(
        		'default' => '',                          //可選。如果數據庫中沒有值，則關聯控件中的默認值。默認值：空白
				'transport' => 'refresh',                 //可選。定義實時預覽的更新方式。默認值：刷新。
				'type' => 'theme_mod',                   // 可選 'theme_mod' or 'option'. 默認: 'theme_mod'
        	//	'sanitize_callback' => 'skyrocket_text_sanitization'   //可選的。在將輸入數據保存到數據庫之前將用于清除輸入數據的函數的名稱
        	)
        );
        //添加第一個設置節的第二個設置的控件
        $wp_customize->add_control( 'bbb',//必填：自定義控件對象或**與此控件關聯的設置的ID**。默認值：無
        	array(
        		'label' => __( '第一個設置節的第二個設置標題' ),          //可選：將顯示設置的標題，默認：空白
        		'description' => esc_html__( '可以輸入的格式見代碼注釋' ),//可選：描述
        		'section' => 'sections_text_demo',               // 必填：填入設置節的ID
        		'priority' => 10,                       // 必填：確定控件在該部分中的顯示順序。默認值：10
        		'type' => 'text',                      // 必填：要顯示的控件類型。類型可以是文本，電子郵件，URL，數字，隱藏或日期。默認值："文本"
        		'capability' => 'edit_theme_options', // 可選：根據用戶的權限級別顯示或隱藏控件。通常從設置的功能派生。默認值為"edit_theme_options"
        		'input_attrs' => array(              // 可選：控件輸出的定制輸入屬性列表。僅用于文本區域和輸入字段。默認值：空白
        			'class' => 'my-custom-class',
        			'style' => 'border: 1px solid rebeccapurple',
        			'placeholder' => __( 'Enter name...' ),
        		),
        	)
        );
            
		///////////////////////////////////////////////////////////////////////////////////////////////////

		
		//添加第二個設置節(文本節)
		$wp_customize->add_section('sections_demo',       
		array(                
			'title'     => '第二個設置節',             
			'description' => '第二個設置節詳細補充',     
			'panel' => 'npcink_options',                 
		) );
		/////////////////////////////////////////////////////////////////////////////////////////////////
		//添加第二個設置節的第一個設置
        $wp_customize->add_setting('ccc',
        	array(
        		'default' => 'Npcink',
        	)
        );
        //添加第二個設置節的第一個設置控件
        $wp_customize->add_control('ccc',
        	array(
        		'label' => '第二個設置節的第二個設置標題',
        		'section' => 'sections_demo', 
        		'type' => 'text',
        	)
        );

有啥規律？

面板 → 節 → 設置、控件

怎么設置？

請您在主題的自定義中進行設置。

怎么使用呢？

在你需要的地方添加如下代碼：

<?php echo get_theme_mod( 'aaa', 'Npcink榮譽出品' ); ?>
<br>
<?php echo get_theme_mod( 'bbb', 'Npcink榮譽出品' ); ?>
<br>
<?php echo get_theme_mod( 'ccc', 'Npcink榮譽出品' ); ?>

支持哪些控件？

• 輸入控件
• 復選框控件
• 選擇控件
• 單選按鈕控件
• 下拉頁面控件
• Textarea控件
• 顏色控件
• 媒體控件
• 圖像控件
• 裁剪圖像控件
• 日期時間控件

添加更多類型請看這里：

• 參考鏈接：詳情

需要更多？

需要簡單的設置框架？