wordpress网站模板开发中,怎样创建自定义导航菜单?#学浪计划#
xsobi 2024-11-24 23:32 14 浏览
在前面的章节中,我们介绍了wordpress网站模板开发中,使用wp_list_pages()和wp_list_categories()这2个函数来创建基于page页面的导航菜单和基于分类目录的导航菜单。但是,这2种方式创建出来的菜单不够灵活,基于页面的导航菜单就添加不了分类目录,基于分类目录的导航菜单也添加不了page页面作为菜单。那么,wordpress有没有提供灵活一点的创建导航菜单的方法,能包含page页面、分类目录,甚至其它的选项。答案是肯定的。通过wordpress提供的方法,我们可以为wordpress网站模板创建自定义导航菜单。下面,就随我一起来看看吧。
第一步:给主题注册菜单功能。
wordpress网站后台默认情况下,没有提供菜单选项,需要我们在wordpress主题模板中来添加这个功能。这个,我们可以进入到wordpress后台的外观去看看,如下图:
所以,我们要先在wordpress主题的functions.php文件中注册菜单,代码如下:
//菜单register_nav_menus( array('menu_top' => '头部导航','menu_bottom' => '底部导航',) );
添加完上面的代码,我们再到wordpress网站后台的外观中看一下,这时,我们会发现多了一个“菜单”,这就是我们需要的自定义菜单。如下图:
第二步:后台创建菜单。
给wordpress网站后台添加了菜单功能后,我们就可以在wordpress后台的菜单中创建前台网页的自定义导航菜单了。点击“外观”中的“菜单”,右侧内容栏进入到菜单界面,如下图:
点击上图中的“创建新菜单”,进入到创建界面,如下图:
填写菜单名,点击“创建菜单”,进入到菜单结构界面,如下图:
在这个菜单结构界面,我们可以选择左侧的“添加菜单项”中的页面、分类目录、文章、自定义链接这几个选项中的子项,然后点击“添加到菜单”,就添加到右侧的菜单结构中,想在wordpress网站前台导航菜单中显示什么,就选择什么。如下图:
?然后,勾选“显示位置”,再点击保存菜单按钮,就可以了。
第三步:在头部调用这个菜单。
wordpress后台创建好了菜单后,我们要想在wordpress网站前台显示,还需要我们在wordpress网站模板中调用它。在给functions.php文件添加菜单功能时,我们设置了2个菜单位置:头部菜单和底部菜单。这里,我们以头部菜单为例,在wordpress网站模板的头部模板header.php中添加如下代码:
$menu = array( 'container' => false, //最外层标签名 'theme_location' => 'menu_top', //菜单类名 'depth' => 0, //菜单深度);wp_nav_menu( $menu );
这样,我们就可以在wordpress网站的前台头部看到我们添加的导航菜单,如下图:
?有点难看,是吧,我们可以给这个菜单添加CSS样式,来让它好看一点,这里就不演示了。上面的代码中,我们用到了wordpress的一个函数——wp_nav_menu(),这个函数的功能,就是把后台创建好的菜单在前台打印出来。这个函数的参数跟wp_list_pages()和wp_list_categories()这2个函数的参数类似,可以是字符串类型,也可以是数组类型。
wp_nav_menu()函数的参数如下:
wp_nav_menu( array('theme_location' => '',//导航别名'menu' => '', //期望显示的菜单'container' => 'div', //容器外层标签'container_class' => '',//ul父节点class类名'container_id' => '', //ul父节点id名'menu_class' => 'menu', //ul节点class类名'menu_id' => '', //ul节点id名'echo' => true,//是否输出菜单,默认为真,true或1时,打印输出;false或0时,不输出。'fallback_cb' => 'wp_page_menu', //菜单不存在时,返回默认菜单,设为false则不返回'before' => '', //链接前文本'after' => '', //链接后文本'link_before' => '', //链接文本前'link_after' => '',//链接文本后'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>', //如何包装列表'depth' => 0, //菜单深度,默认0'walker' => '' //自定义walker) );
可见,wp_nav_menu()函数的参数还是挺多的,但实际使用中,不需要全部设置,往往我们只需要使用其它的几个常规参数就可以了,如上例中,我们就只用了3个参数,就打印出了wordpress网站的头部导航菜单。
通过以上这几步,我们就为wordpress网站模板添加好了自定义导航菜单的功能,看起来有点复杂,是吧。的确,跟wp_list_pages()和wp_list_categories()这2导航菜单相比,是要复杂一点。但是,多做几次后,你会发现,这种自定义导航菜单使用起来更加灵活多变。不管怎样,这3种添加导航菜单的方式我们都要掌握,可以在不同的需求中使用不同的方式。
相关推荐
- 249个Linux Shell脚本经典案例,拿来即用(附PDF)
-
作为一名Linux运维工程师,会写好的脚本不仅能提高工作效率,还能有更多的时间做自己的事。最近在网上冲浪的时候,发现大家对Shell脚本都有“心结”,要么觉得自己写出来不好看,要么根本无从下手。下...
- 分享一个实用脚本—centos7系统巡检
-
概述这周闲得慌,就根据需求写了差不多20个脚本(部分是之前分享过的做了一些改进),今天主要分享一个给平时运维人员用的centos7系统巡检的脚本,或者排查问题检查系统情况也可以用..实用脚本#!/bi...
- Go 语言 Web 框架 Echo 系列:基础篇—搭建 Echo 开发环境
-
工欲善其事必先利其器。我们先搞定Echo环境。Go开发环境这个系列基于Go1.14.4,Linux系统。安装Go的方式有很多,可以在这里https://studygolang.com/...
- 连Shell的基本输出都不会,还写什么脚本?echo和printf命令总结
-
在Linux系统中使用echo命令和printf命令都可以实现信息的输出功能,下面我们分别看这两个命令的应用案例。echo1.使用echo命令创建一个脚本文件菜单功能描述:echo命...
- 在Linux中改变echo输出颜色的方法
-
技术背景在Linux系统的命令行环境下,为了使输出信息更加清晰、突出,便于用户快速识别和区分不同类型的信息,常常需要改变echo命令的输出颜色。例如,在脚本中使用不同颜色区分错误信息、警告信息和正常信...
- Spring框架中applicationContext.xml和spring - servlet.xml的区别
-
技术背景在Spring框架里,applicationContext.xml和spring-servlet.xml是两个重要的配置文件。Spring允许在父子层次结构中定义多个上下文,这两个文件在不...
- Tomcat服务器配置与优化:让Java应用飞得更高更远
-
Tomcat服务器配置与优化:让Java应用飞得更高更远Tomcat作为一款轻量级且功能强大的开源JavaServlet容器,无疑是许多中小型项目的首选服务器。然而,Tomcat的性能和稳定性并非天...
- 分享 5 个正则表达式的实际应用场景案例
-
转载说明:原创不易,未经授权,谢绝任何形式的转载在计算机编程的广泛领域中,某些技术具有改变我们如何处理和提取文本内容中信息的能力。在这些强大工具中,正则表达式成为每个开发者工具库中基本且不可或缺的组成...
- 最简洁详细的SSM框架整合(ssm框架详细介绍)
-
创建项目和SSM框架整合思路一、创建项目因为后面会配置springMVC,所以用IDEA的web骨架创建一个maven项目。创建项目目录如下,同时,项目需要的包和文件已手动创建好了:项目目录上图中,a...
- 使用JSP 2避免JSP文件中的Java代码
-
技术背景在早期的JSP开发中,使用脚本片段(<%%>、<%!%>、<%=%>)嵌入Java代码是常见做法,但这种方式存在诸多弊端。随着JSP2的出现,标签库...
- 微信安卓测试版8.0.28开发者更新内容公布
-
IT之家9月7日消息,微信安卓平台迎来了8.0.28测试版更新,相比上一次更新安装包体积有所减小,文件详细信息如下:微信安卓内测版8.0.28(ARM64)安装包文件大小254MB...
- 疯传阿里内网的SpringMVC笔记,被一个离职员工泄露,手慢无
-
一、简介1.介绍SpringMVC是实现MVC的轻量级Web框架,底层封装了servlet2.特点1.轻量级,简单易学2.约定优于配置3.与Spring兼容性好,无缝结合5.支持直接一个方法对一...
- 学习笔记之Struts2—工作原理图(struts1工作原理)
-
本文以Struts2的官方工作原理图作为主线讲解(参考部分书籍与视频)1.初始概念struts2是web.xml进行配置的一个过滤器,当web项目启动的时候,这个过滤器就会生效。2.web.xml&l...
- Spring MVC工作流程及请求处理机制全解
-
SpringMVC工作流程及请求处理机制全解作为一个Java开发者,你一定对Spring框架有所耳闻。今天我们就来详细聊聊SpringMVC,这是Spring家族中最常用的Web层框架之一。Spr...
- 在Javaweb中实现发送简单邮件(java实现邮件收发)
-
前言当我们在一个网站中进行注册账户成功后,通常会收到一封来自该网站的邮件。邮件中显示我们刚刚申请的账户和密码以及一些其他的广告信息。在上一篇中用Java实现了发送qq邮件的功能,今天我们来实现一个这样...
- 一周热门
- 最近发表
-
- 249个Linux Shell脚本经典案例,拿来即用(附PDF)
- 分享一个实用脚本—centos7系统巡检
- Go 语言 Web 框架 Echo 系列:基础篇—搭建 Echo 开发环境
- 连Shell的基本输出都不会,还写什么脚本?echo和printf命令总结
- 在Linux中改变echo输出颜色的方法
- Spring框架中applicationContext.xml和spring - servlet.xml的区别
- Tomcat服务器配置与优化:让Java应用飞得更高更远
- 分享 5 个正则表达式的实际应用场景案例
- 最简洁详细的SSM框架整合(ssm框架详细介绍)
- 使用JSP 2避免JSP文件中的Java代码
- 标签列表
-
- grid 设置 (58)
- 移位运算 (48)
- not specified (45)
- 导航栏 (58)
- context xml (46)
- scroll (43)
- dedecms模版 (53)
- c 视频教程下载 (33)
- listview排序 (33)
- characterencodingfilter (33)
- getmonth (34)
- label换行 (33)
- android studio 3 0 (34)
- html转js (35)
- 索引的作用 (33)
- checkedlistbox (34)
- xmlhttp (35)
- mysql更改密码 (34)
- 权限777 (33)
- htmlposition (33)
- 学校网站模板 (34)
- textarea换行 (34)
- 轮播 (34)
- asp net三层架构 (38)
- bash (34)