wordpress主题开发：导航菜单函数wp_nav_menu()使用方法

wordpress主题开发：导航菜单函数wp_nav_menu()使用方法

空谷2016-5-6 1400次浏览 0个评论

我们在做wordpress主题开发的时候，必不可少的是要读取后台外观-菜单中的导航结构，那么就需要用到wp_nav_menu()函数，本篇文章小编问大家介绍wp_nav_menu()函数的使用方法。

wp_nav_menu()函数使用非常的简单，只需要在你需要的地方放入以下代码即可：

 
 
<?php wp_nav_menu($args) ;?>

其中$args是函数的参数，下面会详细说明：

 
 
<?php
 
$defaults = array(
	'theme_location'  => '',//用于在调用导航菜单时指定注册过的某一个导航菜单名，如果没有指定，则显示第一个
	'menu'            => '',//使用导航菜单的名称调用菜单，可以是 id, slug, name (按顺序匹配的) 。
	'container'       => 'div',//最外层容器标签名 
	'container_class' => '',//最外层容器class名  
	'container_id'    => '',//最外层容器id值  
	'menu_class'      => 'menu',//ul 节点的 class 属性值。
	'menu_id'         => '',//ul 节点的 id 属性值。
	'echo'            => true,//确定直接显示导航菜单还是返回 HTML 片段，如果想将导航的代码作为赋值使用，可设置为false。
	'fallback_cb'     => 'wp_page_menu',//备用的导航菜单函数，用于没有在后台设置导航时调用  
	'before'          => '',//显示在导航a标签之前  
	'after'           => '',//显示在导航a标签之后
	'link_before'     => '',//显示在导航链接名之前
	'link_after'      => '',//显示在导航链接名之后  
	'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',//使用字符串替换修改ul的class。
	'depth'           => 0,//显示菜单的深度, 当数值为 0 时显示所有深度的菜单。
	'walker'          => ''//自定义的遍历对象，调用一个对象定义显示导航菜单。
);
wp_nav_menu( $defaults );
?>

使用

 
 
<?php wp_nav_menu($args) ;?>

读取出来的导航菜单HTML结构如下

 
 
<div class="menu-%e5%af%bc%e8%88%aa-container"><ul id="menu-%e5%af%bc%e8%88%aa" class="menu"><li id="menu-item-62" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-62"><a href="http://localhost/wordpress/">首页</a></li>
<li id="menu-item-32" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-32"><a href="http://localhost/wordpress/category/html">HTML</a></li>
<li id="menu-item-33" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-33"><a href="http://localhost/wordpress/category/css">CSS</a></li>
<li id="menu-item-34" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-34"><a href="http://localhost/wordpress/category/javascript">JavaScript</a></li>
<li id="menu-item-35" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-35"><a href="http://localhost/wordpress/category/jquery">jquery</a></li>
<li id="menu-item-36" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-36"><a href="http://localhost/wordpress/category/php">PHP</a></li>
<li id="menu-item-37" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-37"><a href="http://localhost/wordpress/sample-page">示例页面</a></li>
</ul></div>

如果我们希望把DIV和UL去掉可以用以下代码：

 
 
 <?php echo str_replace("</ul></div>", "", ereg_replace("<div[^>]*><ul[^>]*>", "", wp_nav_menu(array('theme_location' => 'nav', 'echo' => false)) )); ?>

读取的HTML代码结构如下：

 
 
<li id="menu-item-62" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-62"><a href="http://localhost/wordpress/">首页</a></li>
<li id="menu-item-32" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-32"><a href="http://localhost/wordpress/category/html">HTML</a></li>
<li id="menu-item-33" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-33"><a href="http://localhost/wordpress/category/css">CSS</a></li>
<li id="menu-item-34" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-34"><a href="http://localhost/wordpress/category/javascript">JavaScript</a></li>
<li id="menu-item-35" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-35"><a href="http://localhost/wordpress/category/jquery">jquery</a></li>
<li id="menu-item-36" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-36"><a href="http://localhost/wordpress/category/php">PHP</a></li>
<li id="menu-item-37" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-37"><a href="http://localhost/wordpress/sample-page">示例页面</a></li>
 

推荐阅读：字符串替换函数str_replace() 与正则表达式替换函数ereg_replace()的使用方法