WordPress自带菜单功能实现多级菜单及自定义样式
2016-12-29 11:27
633 查看
WordPress自带菜单功能实现多级菜单及自定义样式
A-A+MoMo2015.4.21菜单菜单2921
次浏览6
WordPress后台的“菜单”选项可以通过拖拽直接形成二级、三级菜单,可如何定义它们的样式,使其在前端完美的显示呢,本文就详细的介绍一下。
首先你需要在 functions.php 中使用 register_nav_menus 函数注册菜单,如本主题注册的几个菜单是:
<?php
register_nav_menus( array(
'header_menu' => '头部菜单' ,
'header_right_menu' => '头部右侧菜单' ,
'footmenu1' => '底部菜单1' ,
'footmenu2' => '底部菜单2',
'footmenu3' => '底部菜单3',
) );
?>
这样你在后台的“菜单”选项里面就能看到“头部菜单”、“头部右侧菜单”等几个选项了。你可以分别为它们分配一个自建的菜单。
然后,在需要显示它们的地方使用wp_nav_menu 函数进行调用,如本主题调用的头部菜单代码:
<?php
if ( has_nav_menu( 'header_menu' ) ) {
wp_nav_menu( array(
'theme_location' => 'header_menu',
'menu' => 'header_menu',
'depth' => 0,
'container' => '',
'container_class' => '',
'menu_class' => 'nav navbar-nav',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
'walker' => new WPMoMo_Bootstrap_Menu() ) );
}
?>
其中的几个参数:
‘theme_location’:要显示的菜单,必须是在register_nav_menu() 中注册过的菜单才行。
‘menu’:要显示的菜单,可使用id,slug或者名字。
‘depth’:显示几级菜单,0表示显示全部。
‘menu_class’ :ul 标签 class。
‘items_wrap’:默认<ul id=”%1$s” class=”%2$s”>%3$s</ul>,%1$s 指的是 ‘menu_id’参数,%2$s 指的是 ‘menu_class’ 参数,%3$s 指的是显示的菜单列表。
这里简要的介绍了 wp_nav_menu 函数的几个参数,详细的请参考官方文档。
此时,这段函数生成的html代码大概为:
<ul class="nav navbar-nav">
<li><a href="">分类 1</a></li>
<li><a href="">分类 2</a></li>
<li><a href="">分类 3</a>
<ul class="sub-menu">
<li><a href="">分类 3.1</a></li>
<li><a href="">分类 3.2</a></li>
<li><a href="">分类 3.3</a></li>
</ul>
</li>
<li><a href="">分类 4</a></li>
</ul>
可以看到,只用到上面几个函数,只能进行简单的样式定制(只能定义到一级菜单),如果想进行深层次的定制,就需要运用到’walker’参数,该参数接受一个自定义的walker对象,对它进行定制比较复杂,最简单的办法是从 \wp-includes\nav-menu-template.php 中找到默认的Walker_Nav_Menu函数,然后只修改你想改变的地方,比如本主题改变的是二级、三级菜单的类。
改变二级、三级菜单的类:
<?php
function start_lvl( &$output, $depth = 0, $args = array() ) {
if( $depth == 0 ){
$output .= '<ul class="dropdown-menu">';
}else{
$output .= '<ul class="dropdown2">';
}
}
?>
<?php
function end_lvl( &$output, $depth = 0, $args = array() ) {
if( $depth == 0 ){
$output .= "</ul>";
}else{
$output .= '</ul>';
}
}
?>
上面的代码将二级菜单设置为<ul class=”dropdown-menu”>,三级菜单设置为<ul class=”dropdown2″>。
相关文章推荐
- 屏蔽FLEX右键菜单以及实现自定义的FLEX右键功能
- 创建选项卡实现弹出菜单,以及自定义菜单样式。
- EditText实现全选和复制的功能,自定义样式只有底部才有线
- COM组件实现右键自定义多级菜单
- 转--创建选项卡实现弹出菜单,以及自定义菜单样式。
- 屏蔽FLEX右键菜单以及实现自定义的FLEX右键功能
- 模块管理常规功能自定义系统的设计与实现(05--权限和菜单)
- 自定义右键菜单,禁用浏览器自带的右键菜单[右键菜单实现--Demo]
- 如何在微信的自定义菜单上实现“历史消息”功能?
- 注册表实现右键自定义多级菜单
- 给EditCtrl添加自定义菜单并实现Copy,Cut和Paste功能
- C# 自定义样式实现菜单和工具栏的分割线
- 屏蔽FLEX右键菜单以及实现自定义的FLEX右键功能
- GridView分页的实现以及自定义分页样式功能实例
- wordpress自定义url参数实现路由功能的代码示例
- js实现完全自定义可带多级目录的网页鼠标右键菜单方法
- [转]编程实现自定义系统右键菜单功能
- 自定义RadioButton样式,实现菜单
- GridView分页的实现以及自定义分页样式功能实例
- js实现完全自定义可带多级目录的网页鼠标右键菜单方法