上一篇教程中貼出了一個可以很方便新增後臺設定選項的類檔案，下面是該類檔案的使用方法：

一、載入類檔案

在你的主題 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)  

到了這裡，如何呼叫其中的資料，就不贅述了