也許大部分主題是使用相關(guān)的設(shè)置框架。如果我們的主題只有幾個(gè)選項(xiàng)呢？可以在主題的自定義里面配置。這一節(jié)就教大家如何制作主題的設(shè)置選項(xiàng)。

• 原文文檔：文檔1
• 中文文檔：詳情
• 相關(guān)項(xiàng)目：Github

本站下載該頁歷史版本

我開發(fā)的博客主題Mirages就是使用這個(gè)方法來進(jìn)行主題的設(shè)置。可以下載下來看看（新年前發(fā)布?）。

設(shè)置 API是在 2.7 版本中加入的新功能。它令包含設(shè)置表單的管理頁面實(shí)現(xiàn)“半自動(dòng)工作”，允許您定義整個(gè)管理頁面、選項(xiàng)區(qū)域，甚至具體的欄目。

• 參考主題：詳情

本站下載：

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

• 相關(guān)文檔：官方文檔

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

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

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

		
		//添加第二個(gè)設(shè)置節(jié)(文本節(jié))
		$wp_customize->add_section('sections_demo',       
		array(                
			'title'     => '第二個(gè)設(shè)置節(jié)',             
			'description' => '第二個(gè)設(shè)置節(jié)詳細(xì)補(bǔ)充',     
			'panel' => 'npcink_options',                 
		) );
		/////////////////////////////////////////////////////////////////////////////////////////////////
		//添加第二個(gè)設(shè)置節(jié)的第一個(gè)設(shè)置
        $wp_customize->add_setting('ccc',
        	array(
        		'default' => 'Npcink',
        	)
        );
        //添加第二個(gè)設(shè)置節(jié)的第一個(gè)設(shè)置控件
        $wp_customize->add_control('ccc',
        	array(
        		'label' => '第二個(gè)設(shè)置節(jié)的第二個(gè)設(shè)置標(biāo)題',
        		'section' => 'sections_demo', 
        		'type' => 'text',
        	)
        );

有啥規(guī)律？

面板 → 節(jié) → 設(shè)置、控件

怎么設(shè)置？

請您在主題的自定義中進(jìn)行設(shè)置。

怎么使用呢？

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

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

支持哪些控件？

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

添加更多類型請看這里：

• 參考鏈接：詳情

需要更多？

需要簡單的設(shè)置框架？