前面我們知道了怎樣在 WordPress 後臺新增一個設定頁面,有了設定頁面,我們只需要在這個頁面新增上設定表單,然後儲存資料即可。這篇教程我們以例項來講述怎樣新增一個設定選項。
同樣的我們還是使用預設主題 Twenty Ten 來作測試,(前面我們已經在預設的 Twenty Ten 主題中新建一個 myfuntions.php , 然後在 functions.php 檔案中 include 新檔案) 。
一、製作表單用編輯器開啟 myfunctions.php 檔案,清空裡面的程式碼,重新寫。先新建一個後臺設定頁面,程式碼如下:
- <?php
- function test_function(){
- add_theme_page( '阿樹工作室', '阿樹工作室', 'administrator', 'ashu_slug','display_function');
- }
- add_action('admin_menu', 'test_function');
- function display_function(){ ?>
- <form method="post" name="ashu_form" id="ashu_form">
- <h2> 阿樹工作室主題設定</h2>
- <p>
- <label>
- <input name="ashu_copy_right" size="40" />
- 請輸入文字
- </label>
- </p>
- <p class="submit">
- <input type="submit" name="option_save" value="<?php _e('儲存設定'); ?>" />
- </p>
- </form>
- <?php } ?>
上面的程式碼在後臺 「外觀」 選單下新加一個子選單項,輸出了一個只有一個文字輸入框的表單。儲存之後,後臺效果如圖:

現在已經完成第一步,製作表單,我們還需要在表單中顯示上次設定的額資料,以及還有提交資料後處理資料、儲存資料的程式碼。
二、處理儲存資料
其實這些也很簡單,WordPress 有提供更新、儲存等 API 。所以我們將將資料直接提交到 options.php 即可,wp-admin/options.php 檔案為設定選項管理介面,裡面還有資料處理 API,如果你直接訪問這個檔案,可以得到所有設定選項,比如在我本地直接訪問 http://localhost/newtheme/wp-admin/options.php 即可。你也可以使用手動的方法來儲存資料,請參考下一篇教程:資料的儲存
在官網的介紹頁面中: 還是用了 register_setting 、 settings_fields 和 do_settings 三個函式,然而實際上現在已經沒有 do_settings 這個函式了。使用簽名兩個函式也很繁瑣,將這兩個函式輸出的內容直接寫出來即可。
首先新增 wp_nonce_field 函式,該函式輸出兩個隱藏域,用來驗證表單來源,其次再手動輸入兩個隱藏域。如下:
- <!--new code-->
- <?php wp_nonce_field('update-options'); ?>
- <input type="hidden" name="action" value="update" />
- <input type="hidden" name="page_options" value="ashu_copy_right" />
- <!--new code-->
第一個函式用來輸出更新設定選項時的驗證資料,第二個隱藏域也固定不變,第三個隱藏域,value 的值為前面表單的值,比如我們前面只有一個文字輸入框 ashu_copy_right,所以這裡的 value 值就一個,如果我們有很多個文字輸入框,比如 input1 、 input2 、 input3 這裡的 value 值應該三個都寫上,並且用逗號隔開: value="input1,input2,input3"。在 optinos 儲存設定資料的時候就根據這個隱藏域中的值來儲存。
新增上面程式碼後,我們後臺檢視錶單原始碼即可看到輸出的幾個隱藏域:
- <form method="post" name="ashu_form" id="ashu_form" action="options.php">
- <h2>阿樹工作室主題設定</h2>
- <p>
- <label>
- <input name="ashu_copy_right" size="40" value="">
- 請輸入文字
- </label>
- </p>
- <input type="hidden" id="_wpnonce" name="_wpnonce" value="a34ef763fa">
- <input type="hidden" name="_wp_http_referer" value="/newtheme/wp-admin/themes.php?page=ashu_slug&settings-updated=true">
- <input type="hidden" name="action" value="update">
- <input type="hidden" name="page_options" value="ashu_copy_right">
- <p class="submit">
- <input type="submit" name="option_save" value="儲存設定">
- </p>
- </form>
三、顯示以前的設定資料
這一步很重要也很簡單,要在文字輸入框中顯示上次設定的資料,只需要獲取相應的選項即可,獲取選項使用:get_option 函式,這個函式有兩個引數:
- <?php
- get_option( $option, $default );
- //option--選項名稱
- //default--沒有資料是的預設資料
- ?>
將我們的文字輸入框程式碼改成:
- <input name="ashu_copy_right" size="40" value="<?php echo get_option('ashu_copy_right'); ?>"/>
即可。
到此,myfunctions.php 的完整程式碼應該是:
- <?php
- function test_function(){
- add_theme_page( '阿樹工作室', '阿樹工作室', 'administrator', 'ashu_slug','display_function');
- }
- add_action('admin_menu', 'test_function');
- function display_function(){ ?>
- <form method="post" name="ashu_form" id="ashu_form" action="options.php">
- <h2> 阿樹工作室主題設定</h2>
- <p>
- <label>
- <input name="ashu_copy_right" size="40" value="<?php echo get_option('ashu_copy_right'); ?>"/>
- 請輸入文字
- </label>
- </p>
- <?php wp_nonce_field('update-options'); ?>
- <input type="hidden" name="action" value="update" />
- <input type="hidden" name="page_options" value="ashu_copy_right" />
- <p class="submit">
- <input type="submit" name="option_save" value="<?php _e('儲存設定'); ?>" />
- </p>
- </form>
- <?php } ?>
四:輸出選項值
例:開啟 twenty ten 主題的 footer.php 檔案,在適當的位置新增程式碼:
- <?php echo get_option('ashu_copy_right'); ?>
效果 (點選圖片放大):
