首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >wordpress导航菜单详解及改造

wordpress导航菜单详解及改造

作者头像
企鹅号小编
发布2018-02-24 12:57:43
3K0
发布2018-02-24 12:57:43
举报
文章被收录于专栏:企鹅号快讯企鹅号快讯

对于wordpress主题来说

wp的菜单是必不可少的

可以用于制作导航栏

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

只要熟练掌握

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

话不多说

现在先讲一下菜单的创建

首先要开启导航菜单功能

下面是一个例子

/*

register_nav_menu( $location, $description )

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

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

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

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

*/

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

如上述代码

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

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

参考下面代码

register_nav_menu(array(

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

'footer_menu'=>'页脚导航'

) );

这只是注册菜单的代码

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

需要用到钩子

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

functionregister_my_menus() {

register_nav_menus(array(

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

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

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

));

}

add_action('init', 'register_my_menus');

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

当然照我所写代码也可

具体怎么使用稍后会讲

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

至于怎么设置菜单,具体见下面wordpress大学的教程

https://www.wpdaxue.com/wordpress-nav-menus.html

菜单创建好了

要怎么引用呢?

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

放如下代码

wp_nav_menu(array(

'theme_location'=>'header-menu',

'depth'=>'1',

) );

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

depth代表导航级数

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

相关参数还有很多

完整代码如下

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'=>'%3$s',

'depth'=> 0,

'walker'=> ''

) );

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

根据实际需要来调整即可

theme_location导航别名

menu期望显示的菜单

container_idul父节点id值

container_classul父节点class值

menu_classul节点class值

menu_idul节点id值

before菜单链接前的文本

after菜单链接后的文本

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

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

depth菜单深度

containerfalse 时去除div标签

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

更多相关的内容

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

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

下面是一些实例

如果只用最简单的代码

输出的结构是这样的

(方便起见,不写类名)

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

像外层div

只需 'container' => false 即可

如果要去除外层ul

那么可以这样写

if(function_exists('wp_nav_menu')) {

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

}

那么输出的结构就只是

当然,实际上输出的菜单

会带有很多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);

functionmy_css_attributes_filter($var) {

returnis_array($var) ? array() : '';

}

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

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

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

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

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

可以看到,生成的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);

functionmy_css_attributes_filter($var) {

returnis_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-includes\nav-menu-template.php中默认的Walker_Nav_Menu函数

functionstart_lvl(&$output,$depth=,$args=array()){

if($depth==){

$output.='';

}else{

$output.='';

}

}

functionend_lvl(&$output,$depth=,$args=array()){

if($depth==){

$output.="";

}else{

$output.='';

}

}

按上面改的话

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

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

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

如果想自定义walker函数

自己定制菜单

只要有能力,完全可以

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

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

可以参考一下

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

这是我通过长时间的积累

以及这期间搜集的教程

整理出这个wp菜单教程

希望能对大家有所帮助

本文来自企鹅号 - 逝去的Space媒体

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文来自企鹅号 - 逝去的Space媒体

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档