【wp教程】wordpress导航菜单详解及改造

  • A+
所属分类:wp教程

对于wordpress主题来说

wp的菜单是必不可少的

可以用于制作导航栏

也可以做侧边栏、页脚导航等等

只要熟练掌握

就能利用wp菜单做成想要的东西

话不多说

现在先讲一下菜单的创建

 

首先要开启导航菜单功能

下面是一个例子

 

<?php 

/*

register_nav_menu( $location, $description )

 

函数功能:开启导航菜单功能

@参数 string $location, 导航菜单的位置

@参数 string $description, 导航菜单的描述

开启多个位置的导航菜单,只需要重复调用此函数即可

*/

register_nav_menu( 'header-menu', '导航' );     //注册一个菜单

?>

 

如上述代码

就是创建一个别名为‘header-menu’,名称为导航的菜单

那么如果要创建多个菜单的话

参考下面代码

 

<?php 

register_nav_menu(  array(

        'header_menu' => '头部导航',

        'footer_menu' => '页脚导航'

) );

?>

 

 

这只是注册菜单的代码

那么我们要怎么在主题内开启呢?

需要用到钩子

将以下代码放进主题的function.php文件即可

function register_my_menus() {

  register_nav_menus( array(

      'header-menu' => '头部导航',

      'footer-menu' =>‘页脚导航',

      'sidebar-menu'=>'侧边导航'

    ));

}

add_action( 'init', 'register_my_menus' );

 

代码内的菜单名与别名根据实际需要来起

当然照我所写代码也可

具体怎么使用稍后会讲

 

然后在wp后台菜单处显示如下

 

【wp教程】wordpress导航菜单详解及改造

 

菜单创建好了

要怎么引用呢?

 

我们只需在需要放菜单的地方

放如下代码

 

<?php 

wp_nav_menu( array(

  'theme_location'  => 'header-menu',

  'depth'   => '1',

) );

?>

 


很显然,theme_location的参数为创建的导航别名

depth代表导航级数

例如上面这段代码表示调用别名为header-menu的一级导航

相关参数还有很多

完整代码如下

 

<?php 

wp_nav_menu( array(

  'theme_location'  => '',

  'menu'   => '',

  'container'  => 'div',

  'container_class' => '',

  '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' => ''

) );

?>

 

 

实际使用我们并不会用到这么多参数

根据实际需要来调整即可

 

theme_location 导航别名

menu 期望显示的菜单

container_id       ul父节点id值

container_class     ul父节点class值

menu_class   ul节点class值

menu_id       ul节点id值

before 菜单链接前的文本

after         菜单链接后的文本

link_before     每个菜单链接文本前的文本

link_after       每个菜单链接文本后的文本

depth     菜单深度

container     false 时去除div标签

items_wrap 值为 '%3$s' 去ul保持li不变

更多相关的内容

参考官方对菜单函数的说明

https://developer.wordpress.org/reference/functions/wp_nav_menu/

 

下面是一些实例

如果只用最简单的代码

输出的结构是这样的

(方便起见,不写类名)

 

<div>

    <ul>

        <li><a href="" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  /></a></li>

    </ul>

</div>

 

 

如果我们要更改输出的结构

像外层div

只需 'container' => false 即可

如果要去除外层ul

那么可以这样写

 

<?php 

if(function_exists('wp_nav_menu')) {

wp_nav_menu(array('container' => false, 'items_wrap' => '%3$s', 'theme_location' => 'main-menu')); 

}

?>

 

 

那么输出的结构就只是

 

<li><a href="" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  /></a></li>

 

 

当然,实际上输出的菜单

会带有很多css选择器id或class

但这也可以改

 

//移除菜单的多余CSS选择器

add_filter('nav_menu_css_class', 'my_css_attributes_filter', 100, 1);

add_filter('nav_menu_item_id', 'my_css_attributes_filter', 100, 1);

add_filter('page_css_class', 'my_css_attributes_filter', 100, 1);

function my_css_attributes_filter($var) {

return is_array($var) ? array() : '';

}

 

 

将以上代码放入function.php文件

就能移除所有的css选择器id或class

 

但并不是都移除就是最好的

有些css选择器对我们是很有帮助的

这里先给出默认菜单输出的结构

 

【wp教程】wordpress导航菜单详解及改造

可以看到,生成的class名太多了

但图中红线划中的地方

在某些情况下对我们是很有帮助的

 

例如通过点击导航栏某个栏目

跳转到这个栏目的页面时

导航栏此栏目位置高亮

观察导航栏结构

我们会发现

该栏目会有一个类名

current-menu-item

那么事情就简单了

我们只需要写css样式即可

 

这里就不过多叙述

如果不太理解

可以自己尝试并自己观察

 

回到正题

移除多余css选择器,但有些选择器不想移除

我们可以这样写

add_filter('nav_menu_css_class', 'my_css_attributes_filter', 100, 1);

add_filter('nav_menu_item_id', 'my_css_attributes_filter', 100, 1);

add_filter('page_css_class', 'my_css_attributes_filter', 100, 1);

function my_css_attributes_filter($var) {

return is_array($var) ? array_intersect($var, array('current-menu-item','current-post-ancestor','current-menu-ancestor','current-menu-parent')) : '';

}

 

不想移除的css选择器

自己根据需要加上即可

 

接着再来讲一个多级菜单

一般来说

我们最多只需要二级菜单

我们只需把depth改为2即可

 

但如果要三级菜单以上呢

可不是简简单单那改个depth就行了

 

构造三级菜单

我们需要对菜单进行定制

需要使用walker参数

该参数接受一个自定义的walker对象

这个比较复杂

最简便的方法就是修改

wp-includesnav-menu-template.php 中默认的Walker_Nav_Menu函数

<?php 

function start_lvl( &$output, $depth = 0, $args = array() ) {

if( $depth == 0 ){

$output .= '<ul class="sub-menu">';

}else{

$output .= '<ul class="third-menu">';

}

}

?>

<?php

function end_lvl( &$output, $depth = 0, $args = array() ) {

if( $depth == 0 ){

$output .= "</ul>";

}else{

$output .= '</ul>';

}

}

?>

 

 

按上面改的话

就是会生成二级菜单类名为sub-menu,三级菜单类名为third-menu的菜单

四级菜单?应该没有这么奇葩的要求吧

如果真有,就得再改造一番了

 

如果想自定义walker函数

自己定制菜单

只要有能力,完全可以

 

下面给一个用wp菜单实现输出bootstrap菜单结构的教程

http://www.ashuwp.com/courses/highgrade/610.html

可以参考一下

 

那么以上就是关于wordpress菜单几乎所有的教程了

这是我通过长时间的积累

以及这期间搜集的教程

整理出这个wp菜单教程

希望能对大家有所帮助

weinxin
我的微信
这是我的微信扫一扫

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: