WordPress 主题添加菜单

制作 WordPress 主题时,一定会用到菜单,比如站点主导航,甚至可以用来做友情链接,只有你想不到,没有你做不到。添加菜单也很简单,只需两步!

注册菜单

在主题中添加自定义菜单,需要先在 functions.php 文件中使用<?php register_nav_menu(); ?><?php register_nav_menus(); ?> 函数注册。

如果你只需要一个菜单,使用前者即可,如register_nav_menu('primary', 'Primary Menu');

如果你需要多个菜单,则使用后者,如

1
2
3
4
register_nav_menus(array(
'pluginbuddy_mobile' => 'PluginBuddy Mobile Navigation Menu',
'footer_menu' => 'My Custom Footer Menu',
));

当然,这样还不够,完整代码示例如下:

1
2
3
4
5
6
7
function register_paranoid_menus(){
register_nav_menus(array(
'site_nav' => '站点导航',
'social_links' => '社交链接'
));
}
add_action('after_setup_theme', 'register_paranoid_menus');

后面的 add_action(); 函数不能省略,否则无效!

引用菜单

接下来就可以在主题相应的位置通过 “ 函数引入菜单了,比如我引入站点导航菜单:

1
2
3
4
5
6
7
8
9
<?php wp_nav_menu( array(
'theme_location' => 'site_nav',
'fallback_cb' => false,
'container' => 'nav',
'container_class' => 'site-nav',
'menu_class' => 'menu menu-left',
'menu_id' => 'menu'
));
?>

最后生成的菜单默认格式如下:

1
2
3
4
5
6
7
<div>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>

wp_nav_menu(); 函数的一些参数如下:

  • theme_location,显示哪个菜单,比如我的站点导航菜单 site_nav
  • container,最外层的容器,默认为 div,如果你不想要,可以设为 false
  • container_class,默认为 menu-{menu slug}-container,如果你 container 设为 false 了,再设置这个就无效了;
  • container_id,顾名思义,不多说了;
  • fallback_cb,用于菜单不存在的情况下,如果菜单不存在或未设置,默认为 wp_page_menu,也就是所有页面的链接,如果你不想要,可以设为 false
  • beforea 标签之前的内容;
  • aftera 标签之后的内容;
  • menu_classul 标签的 class;
  • menu_idul 标签的 id;

更多用法,请参考 WordPress 官方参考文档