wordpress导航菜单详解及改造

对于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媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏听雨堂

JQuery笔记(二) animate支持的属性

以常见的图片切换效果对animate的动画做了实验,用了两种方式,一种是修改相对位置,一个是修改背景的位置,结果第一种可以,第二种失败。 <!DOCTYPE h...

21810
来自专栏张戈的专栏

为iFrame添加动态载入效果,提高用户体验

中国博客联盟-成员展示导航一直都是直勾勾的加载,并且未加载完成之前还会强行占据一大片空白区域,体验很不友好!昨天在制作展示导航 WordPress 插件时,把这...

3034
来自专栏Android小菜鸡

自定义组件——ModuleView

  ModuleView是一个模快化的View。可以快速搭建一个常用的模块页面,显示不同模块的数据内容。它的难点在于解决ScrollView与RecyclerV...

1011
来自专栏前端人人

React技巧4(如何处理List里面的Item)

本教程总共5篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1.React 技巧1(状态组件与无状态组件的使用) --...

3518
来自专栏PPV课数据科学社区

【工具】一个投行工作十年MM的Excel操作大全

>移动到当前数据区域的边缘:CTRL+ 箭头键 移动到行首:HOME 移动到工作表的开头:CTRL+HOME 移动到工作表的最后一个单元格。:CTRL+END ...

2934
来自专栏向治洪

android 优化之布局优化

布局优化的思路很简单,尽量减少布局文件的层级,看过系统源码的都知道,Android view绘制都是逐层绘制的,所以布局的层级少了,decodeview的时候绘...

2276
来自专栏CDA数据分析师

50个逆天功能,看完变Excel绝顶高手(全都是动图!)

Excel的50个逆天功能,动画教程珍藏版。 1、自动筛选 ? 2、在Excel中字符替换 ? 3、在Excel中冻结行列标题 ? 4、在Excel中为导入外部...

2826
来自专栏听雨堂

动态加载控件

参考文章:http://blog.csdn.net/yicko/archive/2005/04/16/349740.aspx 1、加载的是普通的控件,不是用户控...

2227
来自专栏Python

linux每日命令(11):cat命令

cat命令的用途是连接文件或标准输入并打印。这个命令常用来显示文件内容,或者将几个文件连接起来显示,或者从标准输入读取内容并显示,它常与重定向符号配合使用。

933
来自专栏DeveWork

WordPress自带TinyMCE编辑器相关功能增强

WordPress 默认的那个编辑器叫做TinyMCE。TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,由JavaScript写成。它对IE6+和Fi...

3525

扫码关注云+社区

领取腾讯云代金券