WordPress 動態添加菜單到頂部管理工具條

之前分享過《25+自定義WordPress頂部管理工具條的技巧》,今天補充下,如何將 外觀-菜單 設置的菜單項目添加到頂部工具條,然後你可以直接在 外觀-菜單 管理這個菜單的鏈接,效果如下如:

2016-09-25_074335

一起來看下實現方法,在此之前,建議大傢先看下文章開頭提到的文章,熟悉下添加菜單到工具條的基本方式,然後你才可能看的懂下面提到的代碼。

1、假設我們通過  register_nav_menus() 函數註冊瞭幾個菜單位置:

1
2
3
4
5
6
7
8
9
add_action( 'after_setup_theme', 'cmp_theme_setup' );
function cmp_theme_setup() {
    register_nav_menus( array(
        'main-menu' => __( 'Main Menu', 'cmp' ),
        'foot-menu' => __( 'Footer Menu', 'cmp' ),
        'foot-link' => __( 'Footer Links', 'cmp' ),
        'user-menu' => __( 'User Menu', 'cmp' )
        ) );
}

add_action( ‘after_setup_theme’, ‘cmp_theme_setup’ );
function cmp_theme_setup() {
register_nav_menus( array(
‘main-menu’ => __( ‘Main Menu’, ‘cmp’ ),
‘foot-menu’ => __( ‘Footer Menu’, ‘cmp’ ),
‘foot-link’ => __( ‘Footer Links’, ‘cmp’ ),
‘user-menu’ => __( ‘User Menu’, ‘cmp’ )
) );
}

註:這裡是我添加到主題的 functions.php 來創建菜單位置的函數,就如上圖所示的“主題位置”中的主菜單、底部菜單、頁腳菜單和用戶菜單。大傢可以自己找到你的主題的相似函數(一般搜索 register_nav_menu 可以找到的,每個主題不一樣,也不一定是在這個文件,大傢自己找找吧,不知道的就問主題作者)

2、然後我們要調用的是 user-menu (用戶菜單)這個菜單位置的菜單,就可以使用下面的代碼:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
/**
 * 添加菜單到管理工具條
 * https://www.wpdaxue.com/wordpress-add-menu-to-admin-bar.html
 * @since 1.2
 */
function cmp_add_admin_bar_menu( &$wp_admin_bar )
{
    //判斷 user-menu 這個菜單位置是否掛載瞭菜單
    if(has_nav_menu('user-menu')){
        //獲取 user-menu 菜單的鏈接
        $menu = wp_get_nav_menu_object( 'user-menu' );
        $menu_items = wp_get_nav_menu_items( $menu->term_id );
        //添加一級菜單
        $wp_admin_bar->add_menu( array(
            'id' => 'user-menu-0',
            'title' => __('Frontend User Menu','cmp'),
            ) );
        //循環輸出 user-menu 菜單的鏈接作為子菜單
        foreach ( $menu_items as $menu_item ) {
            $wp_admin_bar->add_menu( array(
                'id' => 'user-menu-' . $menu_item->ID,
                'parent' => 'user-menu-' . $menu_item->menu_item_parent,
                'title' => $menu_item->title,
                'href' => $menu_item->url,
                'meta' => array(
                    'title' => $menu_item->attr_title,
                    'target' => '_blank',
                    'class' => implode( ' ', $menu_item->classes ),
                    ),
                ) );
        }
    }
}
add_action( 'admin_bar_menu', 'cmp_add_admin_bar_menu',999 );

/**
* 添加菜單到管理工具條
* https://www.wpdaxue.com/wordpress-add-menu-to-admin-bar.html
* @since 1.2
*/
function cmp_add_admin_bar_menu( &$wp_admin_bar )
{
//判斷 user-menu 這個菜單位置是否掛載瞭菜單
if(has_nav_menu(‘user-menu’)){
//獲取 user-menu 菜單的鏈接
$menu = wp_get_nav_menu_object( ‘user-menu’ );
$menu_items = wp_get_nav_menu_items( $menu->term_id );
//添加一級菜單
$wp_admin_bar->add_menu( array(
‘id’ => ‘user-menu-0’,
‘title’ => __(‘Frontend User Menu’,’cmp’),
) );
//循環輸出 user-menu 菜單的鏈接作為子菜單
foreach ( $menu_items as $menu_item ) {
$wp_admin_bar->add_menu( array(
‘id’ => ‘user-menu-‘ . $menu_item->ID,
‘parent’ => ‘user-menu-‘ . $menu_item->menu_item_parent,
‘title’ => $menu_item->title,
‘href’ => $menu_item->url,
‘meta’ => array(
‘title’ => $menu_item->attr_title,
‘target’ => ‘_blank’,
‘class’ => implode( ‘ ‘, $menu_item->classes ),
),
) );
}
}
}
add_action( ‘admin_bar_menu’, ‘cmp_add_admin_bar_menu’,999 );

註意看下代碼的註釋,關鍵點就是獲取菜單的鏈接,然後循環輸出作為工具條的二級菜單。

參考資料:

http://wpsnipp.com/index.php/functions-php/attach-a-navigation-menu-to-the-admin-bar/https://www.wpdaxue.com/custom-wordpress-bar.htmlhttps://codex.wordpress.org/Function_Reference/register_nav_menus

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *