WordPress导航菜单函数register_nav_menus() 和 wp_nav_menu()
导航菜单是每一个WordPress主题必须的元素,如果你要制作一个WordPress主题,那就必须熟悉WordPress导航菜单注册函数 register_nav_menus() 和 导航菜单调用函数wp_nav_menu() ,这两个参数一般都是配合使用的。今天我们就一起来解释一下这两个函数,并举例说明。
导航菜单注册函数 register_nav_menus() 介绍
register_nav_menus() 是3.0以后用来注册自定义菜单的函数,通过它可以很方便地给你的主题注册一个或多个菜单,在主题的 functions.php 中添加:
1 2 3 4 |
register_nav_menus( array('header_menu' => 'My Custom Header Menu','footer_menu' => 'My Custom Footer Menu' ) ); |
上面的代码注册了两个代码,其中 ‘header_menu’ 和 ‘footer_menu’ 分别是这两个菜单的“键key”,而后面的 ‘My Custom Header Menu’ 和 ‘My Custom Footer Menu’ 是对这个菜单的描述,会在 外观 – 菜单 中显示出来。下文将会图例说明。
按照上面的结构,就可以注册多个菜单。
导航菜单调用函数 wp_nav_menu() 介绍
wp_nav_menu() 是WordPress 3.0 以后添加的一个自定义导航菜单调用函数,可用来调用 register_nav_menus() 注册的菜单。wp_nav_menu()的使用方法位于wp-includes/nav-menu-templates.php文件中。
可以通过 <?php wp_nav_menu( $args ); ?> 来调用菜单,其中参数 $args 的默认值如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<?php$defaults = 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' => '' );wp_nav_menu( $defaults );?> |
每个参数的详细介绍如下:
- $theme_locaton:(字符串)(可选)
默认值: None
用于在调用导航菜单时指定注册过的某一个导航菜单名,如果没有指定,则显示第一个。
1 |
wp_nav_menu(array( 'theme_location' =>'primary')); //调用第一个菜单 |
- $menu:(字符串)(可选)
默认值: None
使用导航菜单的名称调用菜单,可以是 id, slug, name (按顺序匹配的) 。
- $container:(字符串)(可选)
默认值: div
ul 父节点(这里指导航菜单的容器)的标签类型,只支持div 和 nav 标签, 如果是其它值, ul 父节点的标签将不会被显示。也可以用false(container => false)去掉ul父节点标签。
- $container_class:(字符串)(可选)
默认值: menu-{menu slug}-container
ul 父节点的 class 属性值。
- $container_id:(字符串)(可选)
默认值: None
ul 父节点的 id 属性值。
- $menu_class:(字符串)(可选)
默认值: menu
ul 节点的 class 属性值。
- $menu_id:(字符串)(可选)
默认值: menu slug, 自增长的
ul 节点的 id 属性值。
- $echo:(布尔型)(可选)
默认值: true (直接显示)
确定直接显示导航菜单还是返回 HTML 片段,如果想将导航的代码作为赋值使用,可设置为false。
- $fallback_cb:(字符串)(可选)
默认值: wp_page_menu (显示页面列表作为菜单)
用于没有在后台设置导航时调的回调函数。
- $before:(字符串)(可选)
默认值: None
显示在每个菜单链接前的文本。
- $after:(字符串)(可选)
默认值: None
显示在每个菜单链接后的文本。
- $link_before:(字符串)(可选)
默认值: None
显示在每个菜单链接文本前的文本。
- $link_after:(字符串)(可选)
默认值: None
显示在每个菜单链接文本后的文本。
- $items_wrap:(字符串)(可选)
默认值: None
使用字符串替换修改ul的class。
- $depth:(整型)(可选)
默认值: 0
显示菜单的深度, 当数值为 0 时显示所有深度的菜单。
- $walker:(对象型)(可选)
默认值: new Walker_Nav_Menu
导航菜单注册和调用示例
要想定义出灵活强大的菜单,需要我们熟悉上面介绍的 导航菜单注册函数 register_nav_menus() 和 导航菜单调用函数wp_nav_menu() 。
1.首先我们先要激活 WordPress 3.0 以后的自定义菜单功能,也就是要注册菜单。在主题的 functions.php文件中添加下面的代码:
1 2 3 4 5 |
//添加导航register_nav_menus(array('left-menu' => '左边栏菜单','top-menu' => '顶部菜单',)); |
这样我们就注册了 左边栏菜单 和顶部菜单,你可以在 外观-菜单 中查看到:
我们可以使用下面的函数调用 左边栏菜单:
1 2 3 4 5 |
<?php if(function_exists('wp_nav_menu')) {wp_nav_menu(array( 'theme_location' => 'left-menu','container_id'=>'menu_left') ); } ?> |
其中,’theme_location’ 后面的值 是 ‘left-menu’,就是调用前面注册的那个 左边栏菜单,而 ‘container_id’ 自定义为 ‘menu_left’,最终输出的html结构如下:
1 2 3 4 5 6 7 8 |
<div id="menu_left" class="menu-xxx-container"><ul class="menu"><li><a href="https://www.wpdaxue.com">首页</a></li><li><a href="https://www.wpdaxue.com/news">WP资讯</a></li>…………<li><a href="https://www.wpdaxue.com/announce">本站相关</a></li></ul> </div> |
也就是说,菜单使用 <div id="menu_left">……</div> 来包含了,接下来,你就可以根据这个 id 来写css美化菜单的显示效果了。
小结:只要灵活运用 导航菜单注册函数 register_nav_menus() 和 导航菜单调用函数wp_nav_menu() ,加上一流的前端技术,就能设计出强大和漂亮的菜单啦!
WordPress导航菜单函数register_nav_menus() 和 wp_nav_menu()相关推荐
- wordpress菜单显示css字体,WordPress导航菜单图标字体插件font awesome 4 menus
用了wordpress后,大伙都不约而同的给菜单用上了图标字体,确实给博客带来了一定的美化效果.不过,在强迫症的眼里,能代码化就尽量不用插件吧!于是将这个插件改造成代码版,顺便精简了基本用不到的 sh ...
- php更改导航栏图标,wordpress导航菜单前添加矢量小图标
wordpress导航菜单前的 Icon矢量图标看着很舒服,于是就研究了一下.网上的方法有很多像插件,大多收费并影响服务器,所以不推荐;还有就是在标题前加img标签,好丑的样子,不推荐.最后,一种是最 ...
- 给wordpress导航菜单添加个性图标
一.WP后台--插件--安装插件页面搜索:Font Awesome 4 Menus,下载安装并启用. 二.到这里找到你需要的图标http://fortawesome.github.io/Font-Aw ...
- wordpress菜单显示css字体,使用WordPress导航CSS类花式玩耍菜单栏
使用简单的css类给WordPress导航菜单添加多重个性化样式 前言 前几天云落在做自己的网站的时候发现菜单不够,所以我想能不能把菜单折叠起来,做成一般企业网站那种,本来打算用导航的CSS类来做的, ...
- wordpress主题开发:怎样添加导航菜单?
2019独角兽企业重金招聘Python工程师标准>>> 这是一篇针对wordpress新手的文章,如果你是一位老手,可以离开看看别的内容.一些新手朋友在刚接触到wordpress时, ...
- WordPress主题开发自定义导航菜单方法
一个网站的导航菜单可能有顶部导航菜单.主导航菜单.底部导航菜单等.所以,在WordPress主题开发时,我们就要考虑到如何自定义这些导航菜单.下面我们看看WordPress主题开发自定义导航菜单方法. ...
- wordpress输出导航菜单
定义导航菜单 在主题根目录functions.php键入如下代码 注册菜单 register_nav_menus(array('PrimaryMenu'=>'导航','friendlinks'= ...
- WordPress为导航菜单添加个性图标字体
目前图标字体非常流行,图标字体使用简单,与图片格式的小图标相比,支持视网膜显示,可以无限放大.特别是一些响应式设计的主题模板,都会或多或少使用图标字体.我所经常用的wordpress主题就可以自定义图 ...
- 如何在WordPress中制作导航菜单(7个功能点)
在wordpress中添加导航菜单是初级的操作,但对于新手而言依旧会遇到一些问题,接下来我们就逐一讲解. 什么是导航菜单 导航菜单通常位于网站的顶部和底部,用于方便用户快速打开关键页面,譬如下方两张图 ...
最新文章
- 两种ICP的改进算法:PLICP与NICP
- C语言中标准输入流、标准输出流、标准错误输出流
- 面试官:如果让你设计一个消息中间件,如何将其网络通信性能优化10倍以上?【石杉的架构笔记】...
- C语言指针与函数传参
- spring boot项目配置RestTemplate超时时长
- MyBatis源码分析-IDEA新建MyBatis源码工程
- 目录扫描工具dirsearch用法
- python发微信工资条_帮公司财务妹子写了个“群发工资条”的Python脚本!
- python编程(关于cocos2d)
- ip 地址 192.168.1.255 代表( )。_如何批量ping大量ip地址?一个软件搞定
- 缓存击穿、缓存穿透、缓存雪崩简单总结
- 万分之二用百分之怎么表示_怎么腐熟猪粪做有机肥
- 银行计算机知识,银行考试计算机知识试题及答案
- 串口重映射printf
- [线段树]打字练习记录
- html图片不能拖动,关于html5图片拖动的代码的问题?
- SSL用pem和key文件生成jks文件
- 天津达内可靠么 老员工揭秘真实的达内教育
- 计算机科学与技术专业实践范文,计算机科学与技术专业毕业实习报告范文.docx...
- Linux: 磁盘状态观察命令lsblk、blkid
热门文章
- PPP认证方式pap chap chap2
- 写一个函数,输入int型,返回整数逆序后的字符串
- win10下安装ubuntu14.04双系统(UEFI固件)
- dataguru北京线下沙龙-第二部 《Oracle 索引优化思路--案例分享 -- 刘盛》
- 递归函数基例和链条_链条和叉子
- 自定义按钮动态变化_新闻价值的变化定义
- ruby nil_Ruby中的数据类型-True,False和Nil用示例解释
- 2018黄河奖设计大赛获奖_宣布我们的freeCodeCamp 2018杰出贡献者奖获奖者
- r语言r-shiny_使用Shiny和R构建您的第一个Web应用程序仪表板
- 周末想找个地方敲代码_观看我们的代码游戏,全周末直播