WP给主题添加自定义菜单，实例应用BlueSpeech

文章来源：http://blog.yation.com/webpro/wp_nav_menu/

　　据统计，WP的安装数量在同类以及相关类产品中是遥遥领先的，可见WP的用户数量之多，相关的资料和帮助文档也相当的齐全。我本人也是WP新手，在找主题的时候发现了BlueSpeech（首先得感谢Dofeo的制作分享）。这款皮肤在制作上应该花了相当大的精力（从代码，细节处理上都看的出来），可以用“精于心简于形”来形容，但是这款皮肤没有自定义菜单。找了下Dofeo博客原文，评论中也有用户提到过这个问题，所以决定自己研究学习下给加上。方法拙劣，属于东拼西凑型的，欢迎大家讨论指正。

　　用WP的博主都晓得，WP主题调用导航菜单有wp_list_categories和wp_list_pages方法分别可调用文章分类和单页面，但是要实现混搭的话这两个方法可能就不够用了。好在WP的扩展性是超强的，在WP的后台外观栏目中有个菜单项，该项支持主题创建多个自定义菜单以供调用。以下便是我使用BlueSpeech主题添加自定义菜单的过程（修改之前需要备份主题文件避免失误代理不必要的麻烦）。
　　
　　1、给主题注册一自定义菜单：
编辑主题functions.php文件（可以看到里面的部分代码还使用类封装了），在第二行（<!--p标识的下面）加上以下代码：<-->

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

/******************************* MENUS SUPPORT ********************************/ if ( function_exists( 'wp_nav_menu' ) ){ if (function_exists('add_theme_support')) { add_theme_support('nav-menus'); add_action( 'init', 'register_my_menus' ); function register_my_menus() { register_nav_menus( array( 'primary-menu' => __( 'Primary Menu' ), //'secondary-menu' => __( 'Secondary Menu' ) ) ); } } }

　　保存修改，点击“外观”->“菜单”项中创建一个菜单如下图：

　　创建好菜单之后应该就能在左侧的板块（板块是可以拖动，所以位置不一定是下图中的最顶端，没看见的可以往下找找）中看到“主题位置”我们刚在functions.php文件中注册的Primary Menu了，并给它绑定数据源（就是选择刚创建菜单的名称再点保存）如下图：

　　主题支持自定义菜单了，自定义菜单也创建了，现在可以往菜单中加一些链接进去（左边的版块中各个文章分类和页面都可以勾选添加到菜单，还可以自定义链接），以上步骤完成后剩下的就是调用自定义菜单了。

　　2、修改header.php文件第53行左右（代码分的比较开，可以复制其中一行去搜索），找到以下代码：

1 2 3 4 5

<!-- menus START --> <ul> …… 中间多行 </ul> <!-- menus END -->

把中间的代码都删除（包括

标签）只留下头尾两个注释，然后加上一下代码：

1 2 3 4 5 6 7 8 9 10 11

<?php $head_li = "<li class=\"$home_menu\"><a class=\"home\" title=\"" . __('Home', 'inove') . "\" href=\"" . get_settings('home') . "/\">" . __('Home', 'inove') . "</a></li>"; if (function_exists('wp_nav_menu')) { $temp = wp_nav_menu(array('theme_location' => 'primary-menu', 'container' => '', 'menu_id' => 'menus', 'menu_class' => '', 'echo' => 0)); if ($temp) { $temp = substr_replace($temp, $head_li, 15, 0); $temp = substr_replace($temp, '<li><a class="lastmenu" href="javascript:void(0);"></a></li>', -5, 0); echo $temp; } } ?>

　　保存对header.php文件的修改，这个时候查看下前台首页，应该就可以看到刚的自定义菜单了，而且Home小图标也在，只是目前如果是文章分类，点击的话不会有选中样式，但是页面菜单是有的。我们来做最后一步，给文章分类链接也做上选中区分样式。

3、修改style.css文件，大概705行在

#menus li.current-cat a{
background-position:0 -62px;
}

的上面添加一行（别落了逗号），修改保存多刷新几次（一般服务器对CSS文件都设有缓存）

#menus li.current-menu-item a,

最后的演示

　　BlueSpeech主题自定义菜单的添加告一段落（这里仅做了一层的，多层代码的没考虑，有需要的朋友可以研究下），仅需要修改3个文件不算长的代码，我就不重新打包了，希望能给需要的博主带来帮助，有任何问题请留言。

延伸阅读：
BlueSpeech主题下载：http://www.dofeo.com/themes/bluespeech
wp_nav_menu 代码详解：http://codex.wordpress.org/Function_Reference/wp_nav_menu