上一篇教程中貼出了一個可以很方便添加後台設置選項的類文件，下面是該類文件的使用方法：

一、載入類文件

在你的主題 functions.php 文件中使用 include_once 載入該文件，比如上節教程的類存放於主題文件夾下的 option-class.php 文件中：

  1. include_once('option-class.php');  

 二、檢查 js 文件

如果你需要使用上傳圖片的選項，請根據上節教程類代碼中 enqueue_head 函數裏面加載的 js 文件路徑，準備好一個 js 文件，js 代碼在上節教程中也貼出了。

三、新建配置文件

例如在主題文件夾中新建一耳光 option.php 文件，也使用 include_once 載入該文件：

  1. include_once('option.php');   

設置選項的配置代碼都添加在該文件中。

四、配置選項

用編輯器打開上面添加的 option.php，添加配置代碼，示例代碼如下：

注意

  1. 對於數組類型、複選框、編輯器，配置中的 id 有要求。
  2. 複選框和數組保存的數據為數組
  1. <?php      
  2.      
  3. $pageinfo = array('full_name' => '阿樹工作室網站設置', 'optionname'=>'ashu', 'child'=>false, 'filename' => basename(__FILE__));      
  4.      
  5. $options = array();      
  6.                   
  7. $options[] = array( "type" => "open");      
  8.      
  9. $options[] = array(       
  10.                 "name"=>"阿樹工作室-標題",      
  11.                 "desc"=>"這是一個設置頁面示範",      
  12.                 "type" => "title");      
  13.                       
  14. $options[] = array(      
  15.                 "name"=>"文本框",      
  16.                 "id"=>"_ashu_text",      
  17.                 "std"=>"阿樹工作室文本輸入框",      
  18.                 "desc"=>"阿樹工作室版權所有",      
  19.                 "size"=>"60",      
  20.                 "type"=>"text"     
  21.             );      
  22.      
  23. $options[] = array(      
  24.                 "name"=>"文本域",      
  25.                 "id"=>"_ashu_textarea",      
  26.                 "std"=>"阿樹工作室文本域",      
  27.                 "desc"=>"阿樹工作室版權所有",      
  28.                 "size"=>"60",      
  29.                 "type"=>"textarea"     
  30.             );      
  31.      
  32. $options[] = array(      
  33.             "name" => "圖片上傳",      
  34.             "desc" => "請上傳一個圖片或填寫一個圖片地址",      
  35.             "std"=>"",      
  36.             "id" => "_ashu_logo",      
  37.             "type" => "upload");              
  38.      
  39. $options[] = array(  "name" => "單選框",      
  40.             "desc" => "請選擇",      
  41.             "id" => "_ashu_radio",      
  42.             "type" => "radio",      
  43.             "buttons" => array('Yes','No'),      
  44.             "std" => 1);      
  45.      
  46. $options[] = array( "name" => "複選框",      
  47.             "desc" => "請選擇",      
  48.             "id" => "checkbox_ashu",   //id 必須以 checkbox_開頭   
  49.             "std" => 1,     
  50.             "buttons" => array('汽車','自行車','三輪車','公交車'),                
  51.             "type" => "checkbox");      
  52.                   
  53. $options[] = array( "name" => "頁面下拉框",      
  54.             "desc" => "請選擇一個頁面",      
  55.             "id" => "_ashu_page_select",      
  56.             "type" => "dropdown",      
  57.             "subtype" => 'page'      
  58.             );      
  59.      
  60. $options[] = array( "name" => "分類下拉框",      
  61.             "desc" => "請選擇大雜燴頁面",      
  62.             "id" => "_ashu_cate_select",      
  63.             "type" => "dropdown",      
  64.             "subtype" => 'cat'      
  65.             );   
  66.   
  67. $options[] = array( "name" => "分類下拉框",      
  68.             "desc" => "請選擇大雜燴頁面",      
  69.             "id" => "_ashu_side_select",      
  70.             "type" => "dropdown",      
  71.             "subtype" => 'sidebar'      
  72.             );      
  73.                   
  74. $options[] = array( "name" => "下拉框",      
  75.             "desc" => "請選擇",      
  76.             "id" => "_ashu_select",      
  77.             "type" => "dropdown",      
  78.             "subtype" => array(      
  79.                 '蘋果'=>'apple',      
  80.                 '香蕉'=>'banana',      
  81.                 '桔子'=>'orange'      
  82.                 )      
  83.             );   
  84.                
  85. $options[] = array(      
  86.             "name" => "編輯器",      
  87.             "desc" => "",      
  88.             "id" => "tinymce_ashu",   //id 必須以 tinymce_開頭   
  89.             "std" => "",   
  90.             "type" => "tinymce"     
  91.             );    
  92. $options[] = array(      
  93.             "name" => "數組信息",      
  94.             "desc" => "請輸入一組 id，以英文分號隔開，例如 1,2,3",      
  95.             "id" => "numbers_ashu", //id 必須以 numbers_開頭   
  96.             "size"=>60,   
  97.             "std" => "",   
  98.             "type" => "numbers_array"     
  99.             );             
  100.                   
  101. $options[] = array( "type" => "close");      
  102.      
  103. $options_page = new ashu_option_class($options, $pageinfo);      
  104. ?>  

最後面不要忘記類的實例化。

效果圖：

 

前台調用 (重要)：

注意，我們在類文件中聲明瞭一個全局變量： $ashu_option;  如果你的設置選項很多，如果前台每次使用一個設置選項都調用一次 get_option 函數，這是不明智的選擇，建議使用一個全局變量。而且我們所有的選項值都在一個選項組裏，只需要執行一次 get_option 函數即獲取了所有設置數據，所以將它保存在一個全局變量中。

範例：對於上面的示例設置選項，我們在首頁添加代碼將設置數據打印出來：

  1. <?php   
  2.     global $ashu_option;   
  3.     var_dump($ashu_option);   
  4. ?>  

輸出結果：

  1. array   
  2.   'ashu' =>    
  3.     array   
  4.       '_ashu_text' => string '阿樹工作室文本輸入框修改' (length=36)   
  5.       '_ashu_textarea' => string '阿樹工作室文本域修改' (length=30)   
  6.       '_ashu_logo' => string 'http://localhost/newtheme/wp-content/uploads/2012/08/1960_19591-360x200.jpg' (length=75)   
  7.       '_ashu_radio' => string '2' (length=1)   
  8.       '_ashu_checkbox' => string 'true' (length=4)   
  9.       '_ashu_page_select' => string '2' (length=1)   
  10.       '_ashu_cate_select' => string '1' (length=1)   
  11.       '_ashu_select' => string 'banana' (length=6)   
  12.       'save_my_options' => string '1' (length=1)   
  13.       'Submit' => string 'Save Changes' (length=12)  

到了這裏，如何調用其中的數據，就不贅述了