[WordPress] 外掛開發筆記(3) 替外掛在 WP-Admin 中建立設定頁面

Last Updated on 2021-11-21 by Clay

WP-Admin 就是我們平日所看到的後台。對於大部分 WordPress 的站長來說想必都十分熟悉吧。

而本篇文章，則探討如何替自己開發的外掛建立一個後台的設定頁面。在本篇文章中並不會探討到『儲存設定』，只是單純地做出後台設定頁面。

---

直接新增側欄頁面

這裡我先簡單地介紹一下 add_action() 這個函式，它是開發 WordPress 外掛時最常見的函式之一，我們至少需要傳入兩個值：

• $tag：字串，執行的動作名稱（有哪些動作請參考 Plugin API/Action Reference），當核心執行到此動作時便會執行 $function_to_add
• $function_to_add：動作觸發時，被呼叫的函式名稱

而我們要做的，便是在 'admin_menu' 這個動作執行時，在自己定義的函式中使用 add_menu_page() 來替 wp-admin 後台的側邊欄新增頁面。

而 add_menu_page() 可設定以下參數：

• $page_title：（必需）頁面最上頭顯示的名稱
• $menu_title：（必需）選單上顯示的名稱
• $capability：（必需）此選單向用戶顯示的功能
• $menu_slug：（必需）此選單唯一的 slug 名稱，就像選單的 ID 一般
• $function：輸出頁面所調用的函式
• $icon_url：選單圖示
• $position：選單位置

下方是一個範例的外掛頁面程式：

<?php
/**
 * Plugin Name:       Test Plugin
 * Plugin URI:        https://example.com/plugins/the-basics/
 * Description:       This is a test plugin.
 * Version:           0.0.1
 * Requires at least: 5.2
 * Requires PHP:      7.2
 * Author:            Clay Atlas
 * Author URI:        https://clay-atlas.com
 * License:           GPL v2
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Update URI:        https://example.com/my-plugin/
 * Text Domain:       my-basic-plugin
 * Domain Path:       /languages
 */


// Create options
add_action( 'admin_menu', 'create_menu' );

function create_menu() {
    // Build main menu
    add_menu_page(
        'Test Plugin Settings',     // Page title
        'Test Plugin Settings',     // Menu title
        'manage_options',           // Capability
        'test-plugin-0-main',       // Menu slug (ID)
        'test_plugin_setting_page', // callable $Function
        'dashicons-coffee',         // Icon
        60                          // Position
    );
}


// test_plugin_settings_page
function test_plugin_setting_page() {
?>
    <h1> Test Plugin Setting Page</h1>
<?php
    echo "test";
}


?>

Output: