给wordpress添加导航，实现后台的生成菜单调用，并在前台显示

2,452 人次阅读

共计 3780 个字符，预计需要花费 10 分钟才能阅读完成。

最近发现一款主题，很不错，但是接手之后，发现好多功能都不能实现，于是我通过查找资料，自己千万次测试，终于实现了一些功能。

这款主题可能是在wordpress3.0之前制作的吧，由于设置比较费力，不能在后台直接添加导航分类，也不能在后台添加友情链接，更不能实现下拉菜单以及cms模块分类，只能查找代码在本地一一手动添加ID和分类菜单标签以及链接，由于好多都是原作者之前的链接和分类标签，导致主题实现很费力。费时费力不说，以后想更换菜单还得改代码，真麻烦。鉴于我迫切需要这样一款cms类型的主题，网上用这款的人还很少，基本上没有，我估计是这款主题功能不完善吧。

经过在本地搭建php环境，测试了一遍又一遍，初步实现了后台生成菜单调用在前台显示，也实现了后台调用友情链接。实现了一些比如说前台登陆，登陆跳转，通过修改CSS修复了一些错位等等的问题，至于分类ID后台直接设置的功能暂时还不能很快实现，等我以后慢慢再研究吧。等主题基本可用的时候欢迎大家围观我的新站。这里就不献丑了。

这篇文章简单介绍一下我实现导航菜单的一些细节，由于网上的教程都很繁琐不能弄明白，我简单介绍一下，本人新手，就不在大侠面前班门弄斧了，只说一下经验。

如果你的主题是很早以前的版本，不能实现后台直接设置调用，或者你想要给你的主题新添加导航的话，我这里或许可以给你一些启发。

你需要接触到的是WordPress 3.0 的wp_nav_menu函数，这个函数主要用途是通过该方法，实现后台的生成菜单调用，并在前台显示。即后台这个地方：

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

你需要在主题文件functions.php中作如下申明：

// 菜单声明

if(function_exists(‘register_nav_menu’)){
register_nav_menu(‘mainmenu’,’主导航’);
register_nav_menu(‘topmenu’,’顶部导航’);
}
if (!is_nav_menu(‘主导航’)||!is_nav_menu(‘顶部导航’)){
$menu_id_1 = wp_create_nav_menu(‘主导航’);
$menu_id_2 = wp_create_nav_menu(‘顶部导航’);
wp_update_nav_menu_item($menu_id_1, 0);
wp_update_nav_menu_item($menu_id_2, 1);
}

申明之后，进入后台你就会发现菜单功能已经可以试用了，并且出现了主导航和顶部导航两个菜单。

以上代码的具体意义我就不过多说明了，相信经验丰富的你一看就知道是什么意思，鉴于是采用别人的代码，我自己也不敢妄加评说。

只是提醒大家，如果不需要添加顶部导航的话，可以把代码精简一下，我自己删减了几行，如下：

// 菜单声明
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);
}

这样的话，就只剩下“主导航”菜单了。

接下来你就可以在主导航里添加你想要的分类或者页面了。别急，这还不能在前台显示，要想在前台显示，你还需要在要在前台（主题中）调用这个主导航。

在你的主题模板中使用以下代码（在index.php挥着herder.php footer.php中，由于我想要弄顶部的大导航，所以我是添加在herder.php里。

<?php wp_nav_menu(‘menu=主导航&theme_location=mainmenu’); ?>

或者

<?php wp_nav_menu(‘theme_location=mainmenu’); ?>

即可实现调用，而我们把mainmenu改为topmenu，就将调用topmenu这个导航。wp_nav_menu()函数提供了一系列的函数参数，让我们在获得导航时有充分的控制。函数如下：

<?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 ); ?>

这个函数是官方给出的，用于设置导航显示出的效果，我通过谷歌浏览器的翻译功能，仔细研究了一下。结合我的主题本身给出的参数，就在以上的参数种选择性的截取了几条加在了我的herder.php中。

以下做简单翻译，当然我不懂的就不翻译了：

//最外层容器的标签名，默认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 );

根据我的导航条需要，由于一些参数我的herder.php里原先就有，于是我截取了如下内容：

<?php $defaults = array(
‘theme_location’ => ‘mainmenu’,
‘fallback_cb’ => ‘wp_page_menu’,
‘link_before’ => ‘<span>’,
‘link_after’ => ‘</span>’,
‘items_wrap’ => ‘<ul id=”%1$s”>%3$s</ul>’,
‘depth’ => 0,
); ?>

<?php wp_nav_menu( $defaults ); ?>

最终我的导航部分的所有代码如下：

<div>
<div>
<ul id=”hd-nav”>
<li><a href=”<?php echo get_option(‘siteurl’); ?>”><span>首页</span></a></li>
<?php $defaults = array(
‘theme_location’ => ‘mainmenu’,
‘fallback_cb’ => ‘wp_page_menu’,
‘link_before’ => ‘<span>’,
‘link_after’ => ‘</span>’,
‘items_wrap’ => ‘<ul id=”%1$s”>%3$s</ul>’,
‘depth’ => 0,
); ?>

<?php wp_nav_menu( $defaults ); ?>

</ul>
</div>
</div>