WordPress基础之菜单导航栏设置
菜单是WordPress的一项重要功能,方便用户快速打开网站页面,我们通常说的网站导航栏就是菜单。菜单通常显示在网站的顶部或者底部,以Apple官网的为例:
这篇文章我们就学习下:如何添加、删除菜单;如何调整菜单顺序和层级;如何添加自定义链接菜单。
1. 如何增加、删除菜单
前置要求:已有文章、分类目录、页面等内容
增加菜单:
步骤1:进入wordpress后台->菜单->输入菜单名称->创建菜单
步骤2:在左侧添加菜单项中,点击查看所有,可看到已创建的页面,文章,分类目录等等;勾选需要添加的内容,点击“添加至菜单”。
删除菜单
步骤:菜单结构中,增加的每个项目右侧的三角符号可显示详细信息,可自由移除项目,若完全不想要了,可点击“删除菜单”。
2. 更改菜单层级
步骤:菜单支持拖动更改项目层级,拖动过程中会显示虚框表示该层级的隶属关系,向左为增加层级,向右为降低层级。一般建议菜单不要超过三级,避免降低页面打开率。
注:更改导航栏显示内容时,如果你的菜单不是自定义链接,而是直接选用的页面或产品分类等,那么,如果在此处修改了它的导航标签(即菜单的名称),会导致菜单名称固化为你在此处修改的内容,而不会自动跟随页面或产品分类名称的修改。
3. 添加自定义链接菜单
使用自定义链接菜单可以添加任何想要添加的页面,也包括第三方的,如:油管、B站视频链接,微信,微博社交平台链接等等。
步骤:菜单->自定义链接->输入网址和链接文字->添加至菜单->保存菜单
4. 补充说明
菜单的增加、删除、修改在非常的简单,你可以自定义很多菜单并显示在不同的位置已达到想要的显示效果。
菜单可以结合页面编辑器或者其他插件实现更高级的功能,比如,使用Betheme主题可以自由设计导航栏的二级菜单样式,称之为超级菜单(mega menu),显示效果如下:
这些属于比较进阶的功能和设计了,这里先不讲,在Betheme主题教程中会结合Woocommerce电商插件详细介绍。
WordPress基础之菜单导航栏设置的更多相关文章
- jquery自定义插件-参数化配置多级菜单导航栏插件
1 自定义菜单导航栏插件的必要性 看图说话,下面是利用自定义的菜单导航栏插件simpleMenu创建的网站导航示例: 插件默认提供的是如上图的导航栏样式,即一二级菜单为横向分布:三四级菜单为纵向分布. ...
- ABP(现代ASP.NET样板开发框架)系列之22、ABP展现层——导航栏设置
点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之22.ABP展现层——导航栏设置 ABP是“ASP.NET Boilerplate Project (ASP.NE ...
- 前端css小米导航栏设置及盒子定位居中问题
1.小米最上部导航栏设置 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- 转:ios导航栏设置
原帖:http://www.cocoachina.com/industry/20131104/7287.html 本文提供的代码需要用Xcode 5来执行.如果你还在使用老版本的Xcode,那么在运行 ...
- Bootstrap3基础教程 03 导航栏
Bootstrap导航栏 创建一个默认的导航栏的步骤如下: 1.向 <nav> 标签添加 class .navbar..navbar-default. 2.向上面的元素添加 role=&q ...
- Swift 导航栏设置图片点击事件,图片蓝色的解决方案
如果导航栏想做一个点击事件,正好是一个图片 我们可以直接这样: self.navigationItem.rightBarButtonItem = UIBarButtonItem(image: UIIm ...
- Swift 导航栏设置
let width = UIScreen.mainScreen().bounds.size.width let height = UIScreen.mainScreen().bounds.size.h ...
- 【原创】js实现一个可随意拖拽排序的菜单导航栏
1.想做这个效果的原因主要是用在UC上看新闻发现他们的导航菜单很有趣.无聊的时候在哪划着玩了很久.所以就干脆自己写一个.原效果如下 2.整体效果如下,在已推荐和未添加里面每个小方块可以触摸移动位置互换 ...
- WordPress基础:固定链接的设置
安装wordpressp后的工作之一最好修改固定链接,原因就是wp默认的/?p=123形式不利于搜索引擎优化而且也不美观. URL结构参数说明:%year%:日志发表的年份,如2009%monthnu ...
- 仿淘宝左侧菜单导航栏纯Html + css 写的
这俩天闲来没事淘宝逛了一圈看到淘宝的左侧导航菜单做的是真心的棒啊,一时兴起,查了点资料抓了几个图片仿淘宝写了个css,时间紧写的不太好,大神勿喷,给小白做个参考 废话不多说先来个效果图 接下来直接上代 ...
随机推荐
- ChatGPT还是有点东西的-public static <T> List<T> Arrays.asList(T... a) {...}
背景 业务开发需要判断业务状态是否在30.40.50.60的集合内,所以写了以下代码 int[] inLiq = {30,40,50,60}; return Arrays.asList(inLiq). ...
- 深入探讨Function Calling:在Semantic Kernel中的应用实践
引言 上一章我们熟悉了 OpenAI 的 function calling 的执行原理,这一章节我们讲解一下 function calling 在 Semantic Kernel 的应用. 在Open ...
- C++笔记(5)浅拷贝和深拷贝
1. 定义 浅拷贝(shallow copy):多个对象共用同一块资源,同一块资源释放多次,崩溃或者内存泄漏 深拷贝(deep copy):每个对象共同拥有自己的资源,必须显式提供拷贝构造函数和赋值运 ...
- uniapp 判断当前是保存还是修改操作
步骤分析: 首先得确定你进入表单后传入了id或者整个对象[这里使用id来进行讲解]其次就是两个请求:POST(保存的) 和 PUT(修改的)最后就是通过传入的id是否存在进行判断即可 POST 请求 ...
- Java中可以用的大数据推荐算法
在Java中实现大数据推荐算法时,通常会使用一些开源的机器学习库,如Apache Mahout.Weka.DL4J(DeepLearning4j,用于深度学习)或者Spark MLlib(用于在Spa ...
- INFINI Labs 产品更新 | Console 1.24.0 操作日志审计功能发布
INFINI Labs 产品又更新啦~,包括 Console,Gateway 1.24.0.本次各产品更新了很多亮点功能,如 Console 增加操作日志审计功能,优化数据探索字段统计,修复 Gate ...
- 使用nginx 中转 https tls1.3 请求
对方服务器使用的是TLS1.3,并关闭了一些算法套件,使得.NET FRAMEWORK 4.8 ..NET 5 都无法连接. 只能用中转方案解决. nginx配置: #user nobody; wor ...
- 日志切面接口和方法demo,切面内重新抛出异常
1. 定义切面 @Target(ElementType.METHOD) @Retention(RetentionPolicy.RUNTIME) public @interface Log { Stri ...
- WPF/C#:如何将数据分组显示
WPF Samples中的示例 在WPF Samples中有一个关于Grouping的Demo. 该Demo结构如下: MainWindow.xaml如下: <Window x:Class=&q ...
- FinalReference 如何使 GC 过程变得拖拖拉拉
本文基于 OpenJDK17 进行讨论,垃圾回收器为 ZGC. 提示: 为了方便大家索引,特将在上篇文章 <以 ZGC 为例,谈一谈 JVM 是如何实现 Reference 语义的> 中讨 ...