我們?cè)赪ordPress主題開發(fā)中導(dǎo)航菜單的調(diào)用設(shè)計(jì)也是很重要的。如果我們自用主題的話，導(dǎo)航人工寫到模板里那也沒(méi)有問(wèn)題，如果是公開的主題你得設(shè)計(jì)可以自動(dòng)的調(diào)用。這里我們簡(jiǎn)單的整理 WordPress 主題開發(fā)的時(shí)候自定義導(dǎo)航菜單的調(diào)用。

正常情況下，我們需要在后端菜單創(chuàng)建指定位置的菜單，比如頂部或者底部，或者主導(dǎo)航。

// 申明菜單
if(function_exists('register_nav_menu')){
register_nav_menu('mainmenu','主導(dǎo)航');
}
if (!is_nav_menu('主導(dǎo)航')){
$menu_id_1 = wp_create_nav_menu('主導(dǎo)航');
wp_update_nav_menu_item($menu_id_1, 0);
}

這里我們?cè)谏昝鞑藛魏?，可以在后端中看到主菜單，具體的名字可以自定義。

如果在前端直接調(diào)用的話，可以這樣子。

<?php wp_nav_menu('theme_location=mainmenu'); ?>

當(dāng)然，我們不能這樣，還沒(méi)有加載自己的前端樣式。

<?php $defaults = array(
'theme_location'  => ,
'menu'            => ,
'container'       => 'div',
'container_class' => 'menu-{menu slug}-container',
'container_id'    => ,
'menu_class'      => 'menu',
'menu_id'         => ,
'echo'            => true,
'fallback_cb'     => 'wp_page_menu',
'before'          => ,
'after'           => ,
'link_before'     => ,
'link_after'      => ,
'items_wrap'      => '<ul id=\"%1$s\" class=\"%2$s\">%3$s</ul>',
'depth'           => 0,
'walker'          => );
?>
<?php wp_nav_menu( $defaults ); ?>

默認(rèn)的函數(shù)是這樣子的，具體的參數(shù)需要設(shè)置到我們的前端樣式中。比如我正在開發(fā)的一款主題我這樣設(shè)置的。

<?php $defaults = array(
'theme_location' => 'mainmenu',
'container' => 'div',
'container_class' => 'collapse navbar-collapse navbar-right',
'container_id' => 'navigation',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_page_menu',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul class="%2$s">%3$s</ul>',
'depth' => 2,
); ?>

<?php wp_nav_menu( $defaults ); ?>

這里還有一個(gè)小功能需要設(shè)置的，比如我們?cè)诋?dāng)前的菜單下會(huì)高亮的，這里我們需要提前設(shè)置一個(gè)active樣式，然后我們需要用定義函數(shù)設(shè)置。

/*
 * 給激活的導(dǎo)航菜單添加 .active
 */
function spring_nav_menu_css_class( $classes ) {
    if ( in_array('current-menu-item', $classes ) OR in_array( 'current-menu-ancestor', $classes ) )
         $classes[]     =     'active';
    return $classes;
}
add_filter( 'nav_menu_css_class', 'spring_nav_menu_css_class' );

對(duì)應(yīng)的"spring_"是我們自己的主題名稱。會(huì)自動(dòng)給當(dāng)前的菜單添加的active樣式，我們只需要提前加一個(gè)active樣式CSS。