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: