WordPress插件制作教程(三): 添加菜單的方法

上一篇編寫了一個簡單的插件，讓大家對插件的簡單制作有個了解，這一篇我們在更深一步，當我們激活插件后后台會顯示菜單出來，然后通過單擊菜單顯示自己定義好的信息。激活之后會在WordPress后台顯示一個菜單，下面會有多個子菜單，如下圖：

1. 在WordPress后台添加一個同級主菜單，在主菜單下添加子菜單

// add_menu_page( $page_title, $menu_title, $capability, $menu_slug, $function, $icon_url, $position ); 
// 官方文檔： http://codex.wordpress.org/Function_Reference/add_menu_page
// 關於參數：
// $page_title：(字符串) (必須) 這個參數是子菜單的標題，將會顯示在瀏覽器的標題欄，默認為空；
// $menu_title：(字符串) (必須) 顯示的菜單名稱，默認為空；
// $capability：(字符串) (必須) 用戶權限，定義了具有哪些權限的用戶會看到這個子菜單（權限部分請看文章結尾處），默認為空；關於用戶權限的官方文檔：http://codex.wordpress.org/Roles_and_Capabilities
// $menu_slug：(字符串) (必須) 顯示在URl上面的菜單名稱，默認為空；
// $function：返回的方法名稱；
// $icon_url：(字符串) (可選) 顯示的菜單圖標，可以使用plugin_dir_url( __FILE__ )，圖標寬高為16像素；
// $position：(整數) (可選) 顯示菜單的位置。常用位置，4或者59或者99。
 // add_submenu_page( $parent_slug, $page_title, $menu_title, $capability, $menu_slug, $function ); // 官方文檔： http://codex.wordpress.org/Function_Reference/add_submenu_page
// 關於參數：
// $parent_slug：(字符串) (必須)頂級菜單名稱，可以在頂級菜單中加入我們的子菜單，也可以在自定義頂級菜單中加入子菜單；（也就是 add_menu_page() 函數中的 $menu_slug 參數）
// $page_title：(字符串) (必須) 這個參數是子菜單的標題，將會顯示在瀏覽器的標題欄，默認為空；
// $menu_title：(字符串) (必須) 顯示的菜單名稱，默認為空；
// $capability：(字符串) (必須) 用戶權限，定義了具有哪些權限的用戶會看到這個子菜單（權限部分請看文章結尾處），默認為空；關於用戶權限的官方文檔：http://codex.wordpress.org/Roles_and_Capabilities
// $menu_slug：(字符串) (必須) 顯示在URl上面的菜單名稱，默認為空；
// $function：所有調用的函數名稱，通過調用這個函數來顯示這個子菜單頁面的內容。

// 顯示主菜單和子菜單
add_action('admin_menu','add_settings_menu');
function add_settings_menu() {
    add_menu_page(__('自定義菜單標題'), __('測試菜單'), 'administrator',  __FILE__, 'my_function_menu', false, 100);
    add_submenu_page(__FILE__,'子菜單1','測試子菜單1', 'administrator', 'your-admin-sub-menu1', 'my_function_submenu1');
    add_submenu_page(__FILE__,'子菜單2','測試子菜單2', 'administrator', 'your-admin-sub-menu2', 'my_function_submenu2');
    add_submenu_page(__FILE__,'子菜單3','測試子菜單3', 'administrator', 'your-admin-sub-menu3', 'my_function_submenu3');
}
function my_function_menu() {
  echo "<h2>測試菜單設置</h2>";
}
function my_function_submenu1() {
   echo "<h2>測試子菜單設置一</h2>";
}
function my_function_submenu2() {
    echo "<h2>測試子菜單設置二</h2>";
}
function my_function_submenu3() {
    echo "<h2>測試子菜單設置三</h2>";
}

 

2. 在WordPress后台外觀菜單里面添加一個子菜單

// add_theme_page( $page_title, $menu_title, $capability, $menu_slug, $function );
// 官方文檔： http://codex.wordpress.org/Function_Reference/add_theme_page
// 關於參數：
// $page_title: (string) (required) 顯示菜單的標題，將會顯示在瀏覽器的標題欄，默認為空；
// $menu_title: (string) (required) 顯示的菜單名稱，默認為空；
// $capability: (string) (required) 用戶權限，定義了具有哪些權限的用戶會看到這個子菜單（權限部分請看文章結尾處），默認為空；關於用戶權限的官方文檔：http://codex.wordpress.org/Roles_and_Capabilities
// $menu_slug: (string) (required)  顯示在URl上面的菜單名稱. 默認為空；
// $function: (callback) (optional) 通過調用這個函數來顯示這個子頁面的內容。 Default: ' '

//在WordPress后台外觀菜單里面添加一個子菜單
add_action('admin_menu', 'appearance_submenu');
function appearance_submenu() {
  add_theme_page(__('插件設置'), __('插件設置'), 'administrator', 'your-unique-identifier', 'add_appearance_submenu');
}

function add_appearance_submenu() {
  echo '<div><p>這兒就是主題插件設置的地方.</p></div>';
}

 

3.  在WordPress后台儀表盤處添加一個子菜單

// add_dashboard_page( $page_title, $menu_title, $capability, $menu_slug, $function); // 官方文檔： http://codex.wordpress.org/Function_Reference/add_dashboard_page
// 關於參數：
// $page_title: (string) (required) 顯示菜單的標題，將會顯示在瀏覽器的標題欄，默認為空；
// $menu_title: (string) (required) 顯示的菜單名稱，默認為空；
// $capability: (string) (required) 用戶權限，定義了具有哪些權限的用戶會看到這個子菜單（權限部分請看文章結尾處），默認為空；關於用戶權限的官方文檔：http://codex.wordpress.org/Roles_and_Capabilities
// $menu_slug: (string) (required)  顯示在URl上面的菜單名稱. 默認為空；
// $function: (callback) (optional) 通過調用這個函數來顯示這個子頁面的內容。 Default: ' '

// 在WordPress后台儀表盤處添加一個子菜單
add_action('admin_menu', 'dashboard_submenu');
function dashboard_submenu() {
    add_dashboard_page(__('儀表盤設置'), __('儀表盤設置'), 'read', 'your-unique-identifier', 'add_dashboard_submenu');
}
function add_dashboard_submenu() {
  echo '<div><p>這兒就是儀表盤菜單設置的地方.</p></div>';
}

 

4. 在WordPress后台評論處添加一個子菜單

// add_comments_page( $page_title, $menu_title, $capability, $menu_slug, $function); // 官方文檔： http://codex.wordpress.org/Function_Reference/add_comments_page
// 關於參數：
// $page_title: (string) (required) 顯示菜單的標題，將會顯示在瀏覽器的標題欄，默認為空；
// $menu_title: (string) (required) 顯示的菜單名稱，默認為空；
// $capability: (string) (required) 用戶權限，定義了具有哪些權限的用戶會看到這個子菜單（權限部分請看文章結尾處），默認為空；關於用戶權限的官方文檔：http://codex.wordpress.org/Roles_and_Capabilities
// $menu_slug: (string) (required)  顯示在URl上面的菜單名稱. 默認為空；
// $function: (callback) (optional) 通過調用這個函數來顯示這個子頁面的內容。 Default: ' '

// 在WordPress后台評論處添加一個子菜單
add_action('admin_menu', 'comments_submenu');
function comments_submenu() {
    add_comments_page(__('評論菜單'), __('我的評論'), 'read', 'your-unique-identifier-comments', 'add_comments_submenu');
}
function add_comments_submenu() {
    echo '<div><p>這兒就是評論菜單設置的地方.</p></div>';
}

 

5. 以上介紹了不同的顯示方法和顯示位置。除此之外還有

add_posts_page();      // 在文章處添加子菜單
add_media_page();      // 在媒體處添加子菜單
add_links_page();      // 在鏈接處添加子菜單
add_pages_page();      // 在頁面處添加子菜單
add_plugins_page();    // 在插件處添加子菜單
add_users_page();        // 在用戶處添加子菜單
add_management_page(); // 在工具處添加子菜單
add_options_page();    // 在設置處添加子菜單 // 這些都是在WordPress后台添加菜單以及子菜單的方法。大家可以根據自己的需要來進行選擇

最后附上：各個用戶角色所具有的權限，可以參看這個對應關系表：Capability vs. Role Table，橫坐標是用戶角色，縱坐標是用戶權限，中間藍色高亮部分為各個角色所擁有的權限。

 

本章總結：

1. 分別在WP后台的，主菜單、外觀菜單、儀表盤菜單、評論菜單處，添加菜單級子菜單

2. 有關本章所涉及到的函數參考，官方文檔：https://codex.wordpress.org/Function_Reference

 

下一章我們繼續講解：將數據保存到數據庫的方法