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 按鈕 
這樣就完成簡單的後台介面

WP Plugin開發 (1)-Plugin 起始設定

文章參考:https://codex.wordpress.org/Writing_a_Plugin

檔案&目錄

建立Plugin第一件事就是命名,要取一個獨一無二的外掛名稱,不然跟別的名稱衝到就會發生慘案了
Plugin的資料夾是在 wp-content/plugins/ 
如果我的Plugin名稱為 MyFristPlugin
就在 wp-content/plugins/ 中建立一個資料夾 MyFristPlugin
然後在資料夾中建立一個 MyFristPlugin.php 的主程式

readme.txt

如果要把自己的plugin發布上傳到官網給大家下載,包裝檔案內一定要包含readme.txt

readme.txt 範本:https://wordpress.org/plugins/readme.txt

更改後可以透過驗證器檢查內容
https://wordpress.org/plugins/developers/readme-validator/

更多發布細節請參考:https://wordpress.org/plugins/developers/

MyFristPlugin.php 的檔案開頭一定要加上 File Headers 自我介紹
Header設定可以參考:https://developer.wordpress.org/plugins/plugin-basics/header-requirements/

<?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/
*/

?>

通常 Header 除了自我介紹外還會加入版權宣告
https://developer.wordpress.org/plugins/plugin-basics/including-a-software-license/

所以完整的Header就像這樣

/**
 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/

 {Plugin Name} is free software: you can redistribute it and/or modify
 it under the terms of the GNU General Public License as published by
 the Free Software Foundation, either version 2 of the License, or
 any later version.
  
 {Plugin Name} is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 GNU General Public License for more details.
   
 You should have received a copy of the GNU General Public License
 along with {Plugin Name}. If not, see {License URI}
*/

設定好後在已安裝的外掛清單中就可以看到剛儲存的外掛


環境配置:

一般plugin資料夾中我會建立下列目錄
同時會用 plugin_dir_path() & plugins_url() 來做路徑的設定

wp-content/plugins/MyFristPlugin
wp-content/plugins/MyFristPlugin/includes
wp-content/plugins/MyFristPlugin/js
wp-content/plugins/MyFristPlugin/css
wp-content/plugins/MyFristPlugin/images

利用 plugin_dir_path() 來 include 檔案:

define('MY_FRIST_PLUGIN_PATH', plugin_dir_path( __FILE__ )); // plugin所在目錄
define('MY_FRIST_PLUGIN_PATH_INCLUDES',MY_FRIST_PLUGIN_PATH.DIRECTORY_SEPARATOR.'includes'.DIRECTORY_SEPARATOR); // include 檔所在目錄

require_once MY_FRIST_PLUGIN_PATH_INCLUDES . 'function.php'; // 載入檔案

利用 plugins_url() 載入 js 檔或 css

<link rel='stylesheet' id='my-css' href='<?php echo plugins_url( '/css/my.css' , __FILE__ ); ?>'>' type='text/css' media='all' />
<script type='text/javascript' src='<?php echo  plugins_url( '/js/script.js' , __FILE__ ); ?>'></script>

基本的環境配置好了,下一步就開始製作程式囉