Skip to content

[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:

Leave a Reply