我们在WordPress主题开发中导航菜单的调用设计也是很重要的。如果我们自用主题的话，导航人工写到模板里那也没有问题，如果是公开的主题你得设计可以自动的调用。这里我们简单的整理 WordPress 主题开发的时候自定义导航菜单的调用。
正常情况下，我们需要在后端菜单创建指定位置的菜单，比如顶部或者底部，或者主导航。
// 申明菜单
if(function_exists('register_nav_menu')){
register_nav_menu('mainmenu','主导航');
}
if (!is_nav_menu('主导航')){
$menu_id_1 = wp_create_nav_menu('主导航');
wp_update_nav_menu_item($menu_id_1, 0);
}
这里我们在申明菜单后，可以在后端中看到主菜单，具体的名字可以自定义。
如果在前端直接调用的话，可以这样子。
<?php wp_nav_menu('theme_location=mainmenu'); ?>
当然，我们不能这样，还没有加载自己的前端样式。
<?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 ); ?>
默认的函数是这样子的，具体的参数需要设置到我们的前端样式中。比如我正在开发的一款主题我这样设置的。
<?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 ); ?>
这里还有一个小功能需要设置的，比如我们在当前的菜单下会高亮的，这里我们需要提前设置一个active样式，然后我们需要用定义函数设置。
/*
* 给激活的导航菜单添加 .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' );
对应的"spring_"是我们自己的主题名称。会自动给当前的菜单添加的active样式，我们只需要提前加一个active样式CSS。
评论