在 WordPress 開發(fā)中，創(chuàng)建菜單是很多主題或插件開發(fā)者常做的事情，對于您，也是或多或少有些許了解的。

但我總結(jié)了一些新方法和實(shí)際案例，再通過諸多實(shí)例和實(shí)例圖給以詳細(xì)的介紹，寫能幫到您。

本人不才，在此稍做總結(jié)，希望能幫助各位查缺補(bǔ)漏，有些許收獲。

流程

效果

以下是一些自定義菜單的案例，供大家參考

頂級菜單

帶子菜單的頂級菜單

現(xiàn)有頂級菜單下的子菜單

菜單頁面是指您首次登錄 WordPress 時看到的菜單項(xiàng)。也就是說，它們是左側(cè)菜單中的可用選項(xiàng)，可以包含子菜單頁面列表。

創(chuàng)建頂級菜單

• add_menu_page（） |功能 |WordPress 開發(fā)者資源

參數(shù)

bash復(fù)制代碼add_menu_page(?
    string?$page_title,
    string?$menu_title,?
    string?$capability,?
    string?$menu_slug,?
    callable?$callback?=?'',?
    string?$icon_url?=?'',?
    int|float?$position?=?null?
):?string

實(shí)例

我們先創(chuàng)建一個頂級菜單出來，再解釋每一個參數(shù)的意思。

將下列代碼添加至當(dāng)前已啟用主題的 function.php 文件底部，

php復(fù)制代碼//創(chuàng)建一個菜單
function vuespa_create_menu_page()
{
    add_menu_page(
        'VueSpa選項(xiàng)',                   // 此菜單對應(yīng)頁面上顯示的標(biāo)題
        'VueSpa',                      // 要為此實(shí)際菜單項(xiàng)顯示的文本
        'administrator',               // 哪種類型的用戶可以看到此菜單
        'vuespa_id',                   //  此菜單項(xiàng)的唯一ID（即段塞）
        'vuespa_menu_page_display',    // 呈現(xiàn)此頁面的菜單時要調(diào)用的函數(shù)的名稱
        'dashicons-admin-customizer',  //圖標(biāo) - 默認(rèn)圖標(biāo)
        '500.1',                       //位置
    );
} // end vuespa_create_menu_page 
add_action('admin_menu', 'vuespa_create_menu_page');

保存后，刷新后臺頁面，即可看到新添加的菜單

效果

$page_title – VueSpa選項(xiàng)

$page_title 選擇菜單時要在頁面的標(biāo)題標(biāo)簽中顯示的文本

此內(nèi)容主要展示在頁面標(biāo)簽上

再就是之后介紹的回調(diào)函數(shù)中

php復(fù)制代碼<?php echo esc_html(get_admin_page_title()); ?>

$menu_title – VueSpa

$menu_title 是用于菜單的文本

出現(xiàn)在菜單中，比如這里

$capability – administrator

權(quán)限控制，那些權(quán)限的用戶可以看到此菜單

在本例子中，是只有管理員才能看到此菜單，更多權(quán)限可見此文底部給出的權(quán)限列表，根據(jù)自己的需求選擇對應(yīng) slug 接口.

用戶的權(quán)限控制在用戶菜單，所有用戶中，選擇您需要修改的用戶，點(diǎn)擊編輯，在角色選項(xiàng)中。

$menu_slug – vuespa_id

用于引用此菜單的輔助信息域名稱。對于此菜單頁面應(yīng)該是唯一的，并且僅包含小寫字母數(shù)字、短劃線和下劃線字符以與?sanitize_key（）?兼容。

這個很重要，WordPress 憑借此值找到您設(shè)置的菜單信息。

請根據(jù)要求填寫為唯一的ID，推薦用自己的專屬前綴，該信息展示在菜單鏈接中

bash復(fù)制代碼http://localhost:10004/wp-admin/admin.php?page=vuespa_id

同時，也會出現(xiàn)在頁面 $hook 中，此菜單的 $hook 值是

bash復(fù)制代碼toplevel_page_vuespa_id

此值是每個菜單的唯一標(biāo)識值。

后續(xù)，我們將使用這一值實(shí)現(xiàn)在指定菜單中加載 JS 和 CSS 的功能。

獲取此值的方法在頁面底部給出。

注意：此值在子菜單中可能會被轉(zhuǎn)義，請注意相關(guān)介紹中給出的解決方法。

$callback – vuespa_menu_page_display

調(diào)用以輸出此頁面內(nèi)容的函數(shù)

我們需要在菜單中展示的內(nèi)容，由此 vuespa_menu_page_display() 函數(shù)提供。下面是一個例子

php復(fù)制代碼function vuespa_menu_page_display()
{
?>

    <!--在默認(rèn)WordPress“包裝”容器中創(chuàng)建標(biāo)題-->
    <div class="wrap">
        <!--標(biāo)題-->
        <h2><?php echo esc_html(get_admin_page_title()); ?></h2>
        <!--提供Vue掛載點(diǎn)-->
        <div id="vuespa">此內(nèi)容將在掛載Vue后被替換{{data}}</div>
    </div>

<?php
} // vuespa_menu_page_display

其中，為了整體外觀的一致性，請?jiān)诓藛蝺?nèi)容的最外層，使用樣式 class="wrap" 包裹。

回調(diào)函數(shù)中打印的內(nèi)容或暴露的內(nèi)容等，會展示在菜單內(nèi)容中。

$icon_url – dashicons-admin-customizer

要用于此菜單的圖標(biāo)的 URL

用戶展示菜單用的圖標(biāo)值，如下

有以下兩個常用方法。

除此之外，還有更多添加自定義圖標(biāo)的方法，篇幅有限，后續(xù)補(bǔ)充。

WordPress 圖標(biāo)庫

• Dashicons | WordPress Developer Resources

可通過上述鏈接，在有限的圖標(biāo)中選擇自己需要的類型，選擇自己需要的圖標(biāo)，點(diǎn)擊 “Copy HTML”菜單，將需要的值填入即可。

自定義圖標(biāo)

我們可以去第三方平臺，比如開發(fā)圖標(biāo)庫和阿里巴巴矢量圖標(biāo)庫等，找到自己喜歡的svg圖標(biāo)，獲取其中的值，通過如下實(shí)例方法，進(jìn)行使用。

php復(fù)制代碼$icon = '<svg width="20" height="20" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path fill="black" d="M1280 704q0-26-19-45t-45-19q-172 0-318 49.5t-259.5 134-235.5 219.5q-19 21-19 45 0 26 19 45t45 19q24 0 45-19 27-24 74-71t67-66q137-124 268.5-176t313.5-52q26 0 45-19t19-45zm512-198q0 95-20 193-46 224-184.5 383t-357.5 268q-214 108-438 108-148 0-286-47-15-5-88-42t-96-37q-16 0-39.5 32t-45 70-52.5 70-60 32q-43 0-63.5-17.5t-45.5-59.5q-2-4-6-11t-5.5-10-3-9.5-1.5-13.5q0-35 31-73.5t68-65.5 68-56 31-48q0-4-14-38t-16-44q-9-51-9-104 0-115 43.5-220t119-184.5 170.5-139 204-95.5q55-18 145-25.5t179.5-9 178.5-6 163.5-24 113.5-56.5l29.5-29.5 29.5-28 27-20 36.5-16 43.5-4.5q39 0 70.5 46t47.5 112 24 124 8 96z"/></svg>';

 add_menu_page(
        'VueSpa選項(xiàng)',                   // 此菜單對應(yīng)頁面上顯示的標(biāo)題
        'VueSpa',                      // 要為此實(shí)際菜單項(xiàng)顯示的文本
        'administrator',               // 哪種類型的用戶可以看到此菜單
        'vuespa_id',                   //  此菜單項(xiàng)的唯一ID（即段塞）
        'vuespa_menu_page_display',    // 呈現(xiàn)此頁面的菜單時要調(diào)用的函數(shù)的名稱
        'data:image/svg+xml;base64,' . base64_encode( $icon ),  //圖標(biāo) 
        '500.1',                       //位置
    );
    

$position – 500.1

菜單順序中的位置

通過填寫不同的數(shù)字，可以改變菜單顯示的位置，我建議您帶上一個小數(shù)點(diǎn)，避免與第三方資源產(chǎn)生沖突。

WordPress 自帶的菜單有默認(rèn)的順序值，我會在頁面底部給出。

您按需選擇自己需要的數(shù)字即可。

子菜單

子菜單沒有圖標(biāo)

有時，單一的菜單不足以滿足自己的需求，例如下面這種情況

此時，就需要用到我們的子菜單了。

參數(shù)

bash復(fù)制代碼# add_submenu_page(?
    string?$parent_slug,?
    string?$page_title,?
    string?$menu_title,?
    string?$capability,?
    string?$menu_slug,?
    callable?$callback?=?'',?
    int|float?$position?=?null?
):?string|false

實(shí)例

在當(dāng)前已啟用主題的 function.php 文件下方添加以下代碼

php復(fù)制代碼//創(chuàng)建一個菜單
function vuespa_create_menu_page()
{
    add_menu_page(
        'VueSpa選項(xiàng)',                   // 此菜單對應(yīng)頁面上顯示的標(biāo)題
        'VueSpa',                      // 要為此實(shí)際菜單項(xiàng)顯示的文本
        'administrator',               // 哪種類型的用戶可以看到此菜單
        'vuespa_id',                   //  此菜單項(xiàng)的唯一ID（即段塞）
        'vuespa_menu_page_display',    // 呈現(xiàn)此頁面的菜單時要調(diào)用的函數(shù)的名稱
        'dashicons-admin-customizer',  //圖標(biāo) - 默認(rèn)圖標(biāo)
        '500.1',                       //位置
    );

    //添加子菜單
    add_submenu_page(
        'vuespa_id',               //使用上面定義的菜單注冊此子菜單
        '1號子菜單選項(xiàng)',                 // 當(dāng)此菜單項(xiàng)處于活動狀態(tài)時，瀏覽器中顯示的文本
        '控制1號',                    // 此菜單項(xiàng)的文本
        'administrator',          // 哪種類型的用戶可以看到此菜單
        'one_options',        // 此菜單項(xiàng)的唯一ID-段塞
        'one_options_display', // 用于將此頁面的菜單呈現(xiàn)到屏幕的函數(shù)
        '100.1',                   //位置
    );
    //添加子菜單
    add_submenu_page(
        'vuespa_id',               //使用上面定義的菜單注冊此子菜單
        '2號子菜單選項(xiàng)',                 // 當(dāng)此菜單項(xiàng)處于活動狀態(tài)時，瀏覽器中顯示的文本
        '控制2號',                    // 此菜單項(xiàng)的文本
        'administrator',          // 哪種類型的用戶可以看到此菜單
        'two_options',        // 此菜單項(xiàng)的唯一ID-段塞
        'two_options_display', // 用于將此頁面的菜單呈現(xiàn)到屏幕的函數(shù)
        '100.2',                   //位置
    );
} // end vuespa_create_menu_page 
add_action('admin_menu', 'vuespa_create_menu_page');

還得補(bǔ)上子菜單的回調(diào)函數(shù)

php復(fù)制代碼//1號子菜單的回調(diào)
function one_options_display()
{
?>
    <div class="wrap">
        我是1號
    </div>
<?php
}

//2號子菜單的回調(diào)
function two_options_display()
{
?>
    <div class="wrap">
        我是2號 - Npcink
    </div>
<?php
}

這里，我們在 VueSpa 菜單下新建了兩個菜單，效果如下

$parent_slug – vuespa_id

父菜單的 slug 名稱（或標(biāo)準(zhǔn) WordPress 管理頁面的文件名）

這里的 $parent_slug 的值，可以是我們之前創(chuàng)建頂級菜單時設(shè)置的 $menu_slug的值，也可以是 WordPress 自帶菜單的文件名的值，

相關(guān)參數(shù)于頁面底部給出

關(guān)于在WordPress 默認(rèn)菜單下添加子菜單，其他章節(jié)會詳細(xì)舉例。

在 WordPress 默認(rèn)菜單下方添加子菜單

這里，我們以在儀表盤下方添加子菜單為例

方法1 – 使用文件名

php復(fù)制代碼//儀表盤下創(chuàng)建子菜單 - 使用文件名

function npcink_add_menu_index()
{
    add_submenu_page(
        'index.php',
        '3號子菜單', // 此菜單對應(yīng)頁面上顯示的標(biāo)題
        '控制3號', // 要為此實(shí)際菜單項(xiàng)顯示的文本
        'manage_options', //權(quán)限，誰能訪問
        'three_options', //唯一ID
        'three_options_display', //呈現(xiàn)此頁面的菜單時要調(diào)用的函數(shù)的名稱
        '90'
    );
}
add_action('admin_menu', 'npcink_add_menu_index');

//3號子菜單的回調(diào)
function three_options_display()
{
?>
    <div class="wrap">
        我是3號 - Npcink
    </div>
<?php
}

效果

方法2 – 使用輔助函數(shù)

• add_dashboard_page() | Function | WordPress Developer Resources

這里，我們?nèi)サ袅?$parent_slug 。

php復(fù)制代碼//儀表盤下創(chuàng)建子菜單 - 使用函數(shù)名

function npcink_add_menu_index_s()
{
    add_dashboard_page(
        '5號子菜單', // 此菜單對應(yīng)頁面上顯示的標(biāo)題
        '控制5號', // 要為此實(shí)際菜單項(xiàng)顯示的文本
        'manage_options', //權(quán)限，誰能訪問
        'five_options_s', //唯一ID
        'five_options_display_s', //呈現(xiàn)此頁面的菜單時要調(diào)用的函數(shù)的名稱
        '90'
    );
}
add_action('admin_menu', 'npcink_add_menu_index_s');

//3號子菜單的回調(diào)
function five_options_display_s()
{
?>
    <div class="wrap">
        我是5號 - Npcink_s
    </div>
<?php
}

效果

添加不包含頂級菜單的子菜單

在包含頂級菜單時，我們希望點(diǎn)擊頂級菜單，就能跳轉(zhuǎn)到第一個子菜單，而不是把頂級菜單內(nèi)容也加到子菜單中。您可以參考如下寫法

//創(chuàng)建一個菜單
function vuespa_create_menu_page()
{
    add_menu_page(
        'VueSpa選項(xiàng)',                   // 此菜單對應(yīng)頁面上顯示的標(biāo)題
        'VueSpa',                      // 要為此實(shí)際菜單項(xiàng)顯示的文本
        'administrator',               // 哪種類型的用戶可以看到此菜單
        'vuespa_id',                   //  此菜單項(xiàng)的唯一ID（即段塞）
        false,    // 呈現(xiàn)此頁面的菜單時要調(diào)用的函數(shù)的名稱 'vuespa_menu_page_display'
        'dashicons-admin-customizer',  //圖標(biāo) - 默認(rèn)圖標(biāo)
        '500.1',                       //位置
    );

    //添加子菜單
    add_submenu_page(
        'vuespa_id',               //使用上面定義的菜單注冊此子菜單
        '1號子菜單選項(xiàng)',                 // 當(dāng)此菜單項(xiàng)處于活動狀態(tài)時，瀏覽器中顯示的文本
        '控制1號',                    // 此菜單項(xiàng)的文本
        'administrator',          // 哪種類型的用戶可以看到此菜單
        'vuespa_id',        // 此菜單項(xiàng)的唯一ID-段塞
        'one_options_display', // 用于將此頁面的菜單呈現(xiàn)到屏幕的函數(shù)
        '100.1',                   //位置
    );
    //添加子菜單
    add_submenu_page(
        'vuespa_id',               //使用上面定義的菜單注冊此子菜單
        '2號子菜單選項(xiàng)',                 // 當(dāng)此菜單項(xiàng)處于活動狀態(tài)時，瀏覽器中顯示的文本
        '控制2號-Npcink',                    // 此菜單項(xiàng)的文本
        'administrator',          // 哪種類型的用戶可以看到此菜單
        'two_options',        // 此菜單項(xiàng)的唯一ID-段塞
        'two_options_display', // 用于將此頁面的菜單呈現(xiàn)到屏幕的函數(shù)
        '100.2',                   //位置
    );
} // end vuespa_create_menu_page 
add_action('admin_menu', 'vuespa_create_menu_page');

其中，其他不變，我將頂級菜單的回調(diào)函數(shù)設(shè)為 `false` ，并且將第一個子菜單的slug設(shè)為頂級菜單的slug，這樣，就實(shí)現(xiàn)了如下效果

資料

感謝以下鏈接提供的資料

• The WordPress Settings API, Part 3: All About Menus (tutsplus.com)

權(quán)限表

• 超級管理員 – 有權(quán)訪問站點(diǎn)網(wǎng)絡(luò)管理功能和所有其他功能的人。請參閱創(chuàng)建網(wǎng)絡(luò)一文。
• 管理員（slug：“administrator”） ——有權(quán)訪問單個站點(diǎn)內(nèi)所有管理功能的人。
• 編輯器（slug：“editor”） ——可以發(fā)布和管理帖子（包括其他用戶的帖子）的人。
• 作者（slug：“author”） ——可以發(fā)布和管理自己的帖子的人。
• 貢獻(xiàn)者（slug：“contributor”） ——可以編寫和管理自己的帖子但不能發(fā)布的人。
• 訂閱者（slug：“subscriber”） ——只能管理其個人資料的人。

獲取頁面唯一 $hook

php復(fù)制代碼function wpdocs_myselective_css_or_js( $hook ) {
    echo '<h1 style="color: crimson;text-align: center;">' . esc_html( $hook ) . '</h1>';
}

add_action( 'admin_enqueue_scripts', 'wpdocs_myselective_css_or_js' ); 

默認(rèn)菜單順序值

網(wǎng)絡(luò)管理菜單是開啟多站點(diǎn)管理時才會出現(xiàn)的，一般用戶無需關(guān)注

默認(rèn)值：菜單結(jié)構(gòu)底部

• 2 – 儀表板
• 4 – 分離器
• 5 – 帖子
• 10 – 媒體
• 15 – 鏈接
• 20 – 頁
• 25 – 評論
• 59 – 分離器
• 60 – 外觀
• 65 – 插件
• 70 – 用戶
• 75 – 工具
• 80 – 設(shè)置
• 99 – 分離器

對于“網(wǎng)絡(luò)管理”菜單，值不同：

• 2 – 儀表板
• 4 – 分離器
• 5 – 站點(diǎn)
• 10 – 用戶
• 15 – 主題
• 20 – 插件
• 25 – 設(shè)置
• 30 – 更新
• 99 – 分離器

默認(rèn)菜單的子菜單

文件名

1、在儀表盤添加子菜單: add_submenu_page( ‘index.php’, … );

2、在文章處添加子菜單: add_submenu_page( ‘edit.php’, … );

3、在媒體處添加子菜單: add_submenu_page( ‘upload.php’, … );

4、在鏈接處添加子菜單: add_submenu_page( ‘link-manager.php’, … );

5、在頁面處添加子菜單: add_submenu_page( ‘edit.php?post_type=page’, … );

6、在評論處添加子菜單: add_submenu_page( ‘edit-comments.php’, … );

7、在你自定義文章類型處添加子菜單: add_submenu_page(‘edit.php?post_type=your_post_type’,…)

8、在外觀處添加子菜單: add_submenu_page( ‘themes.php’, … );

9、在插件處添加子菜單: add_submenu_page( ‘plugins.php’, … );

10、在用戶處添加子菜單: add_submenu_page( ‘users.php’, … );

11、在工具處添加子菜單: add_submenu_page( ‘tools.php’, … );

12、在設(shè)置處添加子菜單: add_submenu_page( ‘options-general.php’, … );

函數(shù)

父頁面輔助信息域	替代功能
index.php（儀表板）	add_dashboard_page()
edit.php（帖子）	add_posts_page()
upload.php（媒體）	add_media_page()
edit.php?post_type=page（頁）	add_pages_page()
edit-comments.php（評論）	add_comments_page()
themes.php（外觀）	add_theme_page()
plugins.php（插件）	add_plugins_page()
users.php（用戶）	add_users_page()
tools.php（工具）	add_management_page()
options-general.php（設(shè)置）	add_options_page()

完整代碼

//創(chuàng)建一個菜單
function vuespa_create_menu_page()
{
    add_menu_page(
        'VueSpa選項(xiàng)',                   // 此菜單對應(yīng)頁面上顯示的標(biāo)題
        'VueSpa',                      // 要為此實(shí)際菜單項(xiàng)顯示的文本
        'administrator',               // 哪種類型的用戶可以看到此菜單
        'vuespa_id',                   //  此菜單項(xiàng)的唯一ID（即段塞）
        'vuespa_menu_page_display',    // 呈現(xiàn)此頁面的菜單時要調(diào)用的函數(shù)的名稱
        'dashicons-admin-customizer',  //圖標(biāo) - 默認(rèn)圖標(biāo)
        '500.1',                       //位置
    );

    //添加子菜單
    add_submenu_page(
        'vuespa_id',               //使用上面定義的菜單注冊此子菜單
        '1號子菜單選項(xiàng)',                 // 當(dāng)此菜單項(xiàng)處于活動狀態(tài)時，瀏覽器中顯示的文本
        '控制1號',                    // 此菜單項(xiàng)的文本
        'administrator',          // 哪種類型的用戶可以看到此菜單
        'one_options',        // 此菜單項(xiàng)的唯一ID-段塞
        'one_options_display', // 用于將此頁面的菜單呈現(xiàn)到屏幕的函數(shù)
        '100.1',                   //位置
    );
    //添加子菜單
    add_submenu_page(
        'vuespa_id',               //使用上面定義的菜單注冊此子菜單
        '2號子菜單選項(xiàng)',                 // 當(dāng)此菜單項(xiàng)處于活動狀態(tài)時，瀏覽器中顯示的文本
        '控制2號-Npcink',                    // 此菜單項(xiàng)的文本
        'administrator',          // 哪種類型的用戶可以看到此菜單
        'two_options',        // 此菜單項(xiàng)的唯一ID-段塞
        'two_options_display', // 用于將此頁面的菜單呈現(xiàn)到屏幕的函數(shù)
        '100.2',                   //位置
    );
} // end vuespa_create_menu_page 
add_action('admin_menu', 'vuespa_create_menu_page');

//菜單回調(diào) - 展示的內(nèi)容
function vuespa_menu_page_display()
{
?>

    <!--在默認(rèn)WordPress“包裝”容器中創(chuàng)建標(biāo)題-->
    <div class="wrap">
        <!--標(biāo)題-->
        <h2><?php echo esc_html(get_admin_page_title()); ?></h2>
        <!--提供Vue掛載點(diǎn)-->
        <div id="vuespa">此內(nèi)容將在掛載Vue后被替換{{data}}</div>
    </div>


<?php

} // vuespa_menu_page_display

//1號子菜單的回調(diào)
function one_options_display()
{
?>
    <div class="wrap">
        我是1號
    </div>
<?php
}

//2號子菜單的回調(diào)
function two_options_display()
{
?>
    <div class="wrap">
        我是2號 - Npcink
    </div>
<?php
}

//儀表盤下創(chuàng)建子菜單 - 使用文件名

function npcink_add_menu_index()
{
    add_submenu_page(
        'index.php',
        '3號子菜單', // 此菜單對應(yīng)頁面上顯示的標(biāo)題
        '控制3號', // 要為此實(shí)際菜單項(xiàng)顯示的文本
        'manage_options', //權(quán)限，誰能訪問
        'three_options', //唯一ID
        'three_options_display', //呈現(xiàn)此頁面的菜單時要調(diào)用的函數(shù)的名稱
        '90'
    );
}
add_action('admin_menu', 'npcink_add_menu_index');

//3號子菜單的回調(diào)
function three_options_display()
{
?>
    <div class="wrap">
        我是3號 - Npcink
    </div>
<?php
}


//儀表盤下創(chuàng)建子菜單 - 使用函數(shù)名

function npcink_add_menu_index_s()
{
    add_dashboard_page(
        '5號子菜單', // 此菜單對應(yīng)頁面上顯示的標(biāo)題
        '控制5號', // 要為此實(shí)際菜單項(xiàng)顯示的文本
        'manage_options', //權(quán)限，誰能訪問
        'five_options_s', //唯一ID
        'five_options_display_s', //呈現(xiàn)此頁面的菜單時要調(diào)用的函數(shù)的名稱
        '90'
    );
}
add_action('admin_menu', 'npcink_add_menu_index_s');

//3號子菜單的回調(diào)
function five_options_display_s()
{
?>
    <div class="wrap">
        我是5號 - Npcink_s
    </div>
<?php
}

預(yù)告

這里主要講了如何在 WordPress 中創(chuàng)建菜單，在下一節(jié)，我們講解決兩個實(shí)際問題

• 菜單Tab選項(xiàng)卡
• 指定菜單加載JS和CSS
• 指定用戶可見菜單