WordPress 3.0 之 wp_nav_menu 详解

公告:

WordPress 3.0 之 wp_nav_menu 详解

作者:star0312 / 时间：12年前 (2013/06/21) / 分类:未命名 / 阅读:2001 / 评论:0

2012-07-06 10:33:47| 分类： wordpress | 标签： |字号大中小订阅

wp_nav_menu()方法位于wp-includes/nav-menu-templates.php文件中。

其主要用途是通过该方法，实现后台的生成菜单调用，并在前台显示。即后台这的地方：

使用该功能之前，必须激活主题3.0+菜单功能。

激活方法如下：

在对应主题包下的functions.php文件中加入（注意：不是wp-include下的functions.php文件）

if(function_exists('register_nav_menus')){  register_nav_menus( array( 'header-menu' => __( '导航自定义菜单' ), 'footer-menu' => __( '页角自定义菜单' ), 'sider-menu' => __('侧边栏菜单') ) ); }

调用菜单用函数如下：

<?php wp_nav_menu( array( 'theme_location'  => '' //指定显示的导航名，如果没有设置，则显示第一个 'menu'            => 'header-menu', 'container'       => 'div', //最外层容器标签名 'container_class' => 'primary', //最外层容器class名 'container_id'    => '',//最外层容器id值 'menu_class'      => 'sf-menu', //ul标签class 'menu_id'         => 'topnav',//ul标签id 'echo'            => true,//是否打印，默认是true，如果想将导航的代码作为赋值使用，可设置为false 'fallback_cb'     => 'wp_page_menu',//备用的导航菜单函数，用于没有在后台设置导航时调用 'before'          => '',//显示在导航a标签之前 'after'           => '',//显示在导航a标签之后 'link_before'     => '',//显示在导航链接名之后 'link_after'      => '',//显示在导航链接名之前 'items_wrap'      => '<ul id="%1$s">%3$s</ul>', 'depth'           => 0,////显示的菜单层数，默认0，0是显示所有层 'walker'          => ''// //调用一个对象定义显示导航菜单 )); ?>

根据是否登录生成不同该菜单栏

<?php if ( is_user_logged_in() ) {      wp_nav_menu( array( 'theme_location' => 'logged-in-menu' ) ); } else {      wp_nav_menu( array( 'theme_location' => 'logged-out-menu' ) ); } ?>

移除菜单栏

<?php function my_wp_nav_menu_args( $args = '' ) {  $args['container'] = false;  return $args; } // function  add_filter( 'wp_nav_menu_args', 'my_wp_nav_menu_args' ); ?>

或者

<?php wp_nav_menu( array( 'container' => '' ) ); ?>

生成的菜单css风格为

WordPress 3.0发

http://sinobloger.org/wordpress/wordpress-3-0-%E4%B9%8B-wp_nav_menu-%E8%AF%A6%E8%A7%A3/

已经有一段日子了，今天一时心血来潮，想研究一下新函数 wp_nav_menu. 运用这个新功能可以在后台添加导航菜单，并在前台显示，非常方便。

1、首先，在 functions.php 里添加以下代码：

if (function_exists('add_theme_support')) {
//开启导航菜单主题支持
add_theme_support('nav-menus');
//注册一个导航菜单
register_nav_menus( array( 'primary' => __( 'Primary Navigation', 'primary' ) ) );
}
//没有在后台设置导航菜单时调用的函数
function the_main_nav() {
?>
<div id="menu">
<ul id="nav">
<li><a <?php if (is_home()) echo " class=\"current\""; ?> href="<? php bloginfo('url'); ?>/">Home</a></li>
<?php wp_list_cats('style=list'); ?>
</ul>
</div>
<?php } ?>

2、在模版中添加导航菜单的标签：

$menu_args = array(
//最外层容器的标签名，默认div
'container' => 'div',
//最外层容器的class名
'container_class' => 'mainNavBlock',
//最外层容器的id名
'container_id' => 'menu',
//导航菜单ul标签的class名
'menu_class' => 'mainNav',
//导航菜单ul标签的id名
'menu_id' => "nav",
//是否打印，默认是true，如果想将导航的代码作为赋值使用，可设置为false
'echo' => true,
//备用的导航菜单函数，用于没有在后台设置导航时调用
'fallback_cb' => 'the_main_nav',
//显示在导航a标签之前
'before' => '<p>',
//显示在导航a标签之后
'after' => '</p>',
//显示在导航链接名之前
'link_before' => '<em>',
//显示在导航链接名之后
'link_after' => '</em>',
//显示的菜单层数，默认0，0是显示所有层
'depth' => 0,
//调用一个对象定义显示导航菜单
'walker' => new Walker_Nav_Menu(),
//指定显示的导航名，如果没有设置，则显示第一个
'theme_location' => 'primary',
);
//打印导航菜单
wp_nav_menu( $menu_args );

3、现在可以在wordpress后台 Appearance(外观) > Menus(菜单) 中设置菜单了。

设置的方法很简单，先创建一个菜单(Create Menu)，然后在左边添加需要的菜单项目，并设置标题属性(Title Attribute)，唯一值得注意的是如果想将某个菜单设置为子菜单，只需要将它拖动到父菜单的下面，然后往右拖动一格即可。
往右拖动 Flowers 目录即可将其设置为子菜单。

下面是一个walker类的实例，可以在导航菜单下显示说明：

class description_walker extends Walker_Nav_Menu {
function start_el(&$output, $item, $depth, $args) {
global $wp_query;
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

$class_names = $value = '';

$classes = empty( $item->classes ) ? array() : (array) $item->classes;

$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
$class_names = '';

$output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';

$attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : '';
$attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : '';
$attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : '';
$attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : '';

$prepend = '<strong>';
$append = '</strong>';
$description = ! empty( $item->description ) ? '<span>'.esc_attr( $item->description ).'</span>' : '';

if($depth != 0) {
$description = $append = $prepend = "";
}

$item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
$item_output .= $args->link_before .$prepend.apply_filters( 'the_title', $item->title, $item->ID ).$append;
$item_output .= $description.$args->link_after;
$item_output .= '</a>';
$item_output .= $args->after;
$item_output .= $item->object_id;
echo "<pre>";
print_r( get_post_type() );
print_r($item);
echo "</pre>";
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}

4.通过手动代码输出导航菜单
如果你的主题不支持Widget或你不想使用Widget，你可以使用函数wp_nav_menu()直接输出导航菜单：

//以下为引用的内容：
<?php wp_nav_menu($args); ?>

该函数可传递一个数组进去，指定该菜单的各项参数，比如调用哪个菜单、如何排序、给菜单指定一个div层等等。具体的各参数取值请见官方说明文档。
当你使用时，将调用第一个导航菜单。如果你想调用其它菜单，可以通过菜单的id， slug， menu名称来指定：
以下为引用的内容：