网站优化

WordPress自带菜单功能实现多级菜单及自定样式

作者:admin 发布时间:2020-07-31

WordPress后台的“菜单”选项可以通过拖拽直接形成二级、三级菜单,可如何定义它们的样式,使其在前端完美的


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 >

其中的几个参数:

‘theme_location’:要显示的菜单,必须是在register_nav_menu() 中注册过的菜单才行。 ‘menu’:要显示的菜单,可使用id,slug或者名字。 ‘depth’:显示几级菜单,0表示显示全部。 ‘menu_class’ :ul 标签 class。 ‘items_wrap’:默认 ul id=”%1$s” >

这里简要的介绍了 wp_nav_menu 函数的几个参数,详细的请参考官方文档。

此时,这段函数生成的html代码大概为:

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 >

?php function end_lvl(  $output, $depth = 0, $args = array() ) { if( $depth == 0 ){ $output .=  /ul }else{ $output .=  /ul

上面的代码将二级菜单设置为 ul >

<
发帖子 取消回复

电子邮箱地址不会被公开。 必填项已用*标注

*名字: *邮箱:

在此电脑浏览器中保存我的名字、电邮和网站。


网上咨询: QQ交谈

邮箱:

上班时间:周一至周五,9:00-17:30,国家法定假日休息


收缩