WP Plugin開發 (2)-Plugin 後台建立設定頁

通常開發時會做的第一件事就是建立後台頁面
這邊先貼出完整檔案
詳細說明可以參考 https://codex.wordpress.org/Creating_Options_Pages

<?php
/**
 * Plugin Name:       My Frist Plugin
 * Plugin URI:        http://www.gocar.idv.tw/plugins/MyFristPlugin/
 * Description:       我的第一個Plugin
 * Version:           1.0
 * Author:            Henry Tsai
 * Author URI:        http://www.gocar.idv.tw/
*/

// 執行建立選單function
add_action('admin_menu', 'my_frist_plugin_create_menu');

function my_frist_plugin_create_menu() {
    // 加入左方選單
    add_menu_page('My Frist Plugin Settings', 'My Frist Plugin', 'administrator', __FILE__, 'my_frist_plugin_settings_page' , plugins_url('/images/icon.png', __FILE__) );

    // 執行欄位註冊function
    add_action( 'admin_init', 'register_my_frist_plugin_settings' );
}

function register_my_frist_plugin_settings() {
    //向 wordpress 註冊要儲存的欄位
    register_setting( 'my-frist-plugin-settings-group', 'new_option_name' );
    register_setting( 'my-frist-plugin-settings-group', 'some_other_option' );
    register_setting( 'my-frist-plugin-settings-group', 'option_etc' );
}

function my_frist_plugin_settings_page() {
?>
<div class="wrap">
<h1>My Frist Plugin</h1>

<form method="post" action="options.php">
    <?php settings_fields( 'my-frist-plugin-settings-group' ); ?>
    <?php do_settings_sections( 'my-frist-plugin-settings-group' ); ?>
    <table class="form-table">
        <tr valign="top">
        <th scope="row">New Option Name</th>
        <td><input type="text" name="new_option_name" value="<?php echo esc_attr( get_option('new_option_name') ); ?>" /></td>
        </tr>

        <tr valign="top">
        <th scope="row">Some Other Option</th>
        <td><input type="text" name="some_other_option" value="<?php echo esc_attr( get_option('some_other_option') ); ?>" /></td>
        </tr>

        <tr valign="top">
        <th scope="row">Options, Etc.</th>
        <td><input type="text" name="option_etc" value="<?php echo esc_attr( get_option('option_etc') ); ?>" /></td>
        </tr>
    </table>

    <?php submit_button(); ?>

</form>
</div>
<?php } ?>

這邊對程式內容用到的function做說明

add_action () 執行function
https://developer.wordpress.org/reference/functions/add_action/

add_action('admin_menu', 'my_frist_plugin_create_menu');
為什麼會用 add_action 來執行 function?
這跟WordPress的Hook機制有關，簡單來說，WP有很多程式區塊，想要讓function在特定區塊執行時就要透過Hook的方式執行
這段指的就是在 admin_menu 這個程式區塊執行 my_frist_plugin_create_menu 這個 function
add_action( 'admin_init', 'register_my_frist_plugin_settings' ); 也是類似原理，
主要是在admin_init時向WP註冊使用欄位
有機會會再對WP的Hook機制另闢文章說明，有興趣可以先google 會有很多相關說明

add_menu_page() 新增選單
https://developer.wordpress.org/reference/functions/add_menu_page/

add_menu_page('頁面標題', '選單顯示的名稱', '允許看到的權限',別名,產生頁面的Function,前面的icon圖);
頁面標題指的是後台頁面的<title>My Frist Plugin Settings</title>
icon尺寸則是要128x128
如果要子選單的話可以參考add_submenu_page()：https://developer.wordpress.org/reference/functions/add_submenu_page/

建立設定參數

register_setting() 註冊設定參數
https://developer.wordpress.org/reference/functions/register_setting/

register_setting( '群組名稱', '欄位名稱' );
一開始我們要先註冊要使用的欄位，所以建立了register_my_frist_plugin_settings() function 並在當中設定3個欄位 
function register_my_frist_plugin_settings() { 
  register_setting( 'my-frist-plugin-settings-group', 'new_option_name' );
  register_setting( 'my-frist-plugin-settings-group', 'some_other_option' );
  register_setting( 'my-frist-plugin-settings-group', 'option_etc' ); 
}

function my_frist_plugin_settings_page() 
首先建立 my_frist_plugin_settings_page 這個 function來負責產生頁面

form 表單設定：

  <form method="post" action="options.php">  
表單資料只要送給 options.php ,不用SQL語法 WP 就會自動幫我們處理資料
所以表單開頭要設定
settings_fields( '群組名稱' );
do_settings_sections( '群組名稱' ); 
這樣 options.php 才知道我們要處理的是哪個欄位群組

然後再建立 input 並透過 get_option('new_option_name') 取得欄位目前所儲存資料
<input type="text" name="new_option_name" value="<?php echo esc_attr( get_option('new_option_name') ); ?>" /> 
最後再加入 submit_button(); submit 按鈕 
這樣就完成簡單的後台介面