WordPress 3.0 添加了一个自定义导航菜单的功能,让你可以很自由地设置网站的导航菜单。现在大多数的主题也都支持这个功能了,那么,究竟该如何设置WordPress导航菜单?今天倡萌就介绍一下。

如何确定主题是否支持自定义菜单功能?

启用主题后,访问后台 - 外观 - 菜单,如果你看到下图所示内容,说明主题不支持自定义菜单,反之,则支持:

自定义导航菜单

在自定义菜单之前,你需要创建好所需的文章分类和页面,请参考《创建和管理文章分类》,下面进入正题。

创建菜单

打开后台 - 外观 - 菜单,然后点击页面上的“+”按钮,填写一个菜单的名字(可以是任意文字,只是用来识别罢了),然后点击“创建菜单”。比如下图我创建一个名为“菜单”的菜单:

注:有些新手朋友误以为这里添加的“菜单”就是一个单独的链接,其实不是这样的,这个“菜单”是一组链接,你可以给他添加N个链接,组成导航条。

添加链接和设置菜单

①从左边选择需要添加的链接(自定义链接、页面链接和分类链接),加入到菜单中去。(自定义链接:允许你添加任何链接,比如你可以添加一个首页,链接指向首页网址即可)

②可以编辑每个菜单项目的信息,并用拖放的方式为其排序。将某个菜单项稍稍向右拖动,这个项目即变为子菜单(低一格就是二级菜单,低两格就是三级菜单,以此类推。前提是你的WordPress主题支持显示子菜单哦),这样您的菜单便有了层级关系。

③排好菜单以后,点击“保存菜单”。

④然后为你设置的菜单选择显示的位置(有些WordPress主题支持不同位置调用不同菜单,所以你可以设置不同的菜单,然后选择显示位置)。

菜单高级设置

WordPress菜单隐藏了一些功能,如果你想控制菜单更多的属性,不妨点击屏幕右上角的“显示选项”,让隐藏的功能都显示出来:

你可以选择更多的菜单项目种类(例如标签和文章),还可以显示菜单的高级属性(链接目标、CSS类、链接关系网、描述)

  • 导航标签 - 就是链接的文字
  • 标题属性 - 就是a标签的title属性值,比如上图填写”WP大学”
  • CSS类 - 给某个菜单项添加class,通过css是这个菜单项与众不同,如上图我添加了“home-page”
  • 链接关系网 - 通过链接关系网(XFN)给菜单添加rel属性,例如不想搜索引擎跟随这个菜单,可以为其添加rel="nofllow"属性
  • 链接目标 - 控制菜单打开方式,在新窗口打开(target="_blank")或在当前窗口打开(默认)。

以下代码就是根据上图的设置显示的效果:

1
2
3
<li class="home-page">
<a title="WP大学" target="_blank" rel="nofollow" href="https://www.wpdaxue.com">WordPress大学</a>
</li>

好了,关于WordPress自定义导航菜单就介绍到这里。

WordPress入门 之 设置导航菜单的更多相关文章

  1. Angular+Bootstrap3导航菜单

    Angular+Bootstrap3导航菜单 AngularJS体验式编程系列文章,将介绍如何用angularjs构建一个强大的web前端系统.angularjs是由Google团队开发的一款非常优秀 ...

  2. ABP入门系列(6)——定义导航菜单

    ABP入门系列目录--学习Abp框架之实操演练 完成了增删改查以及页面展示,这一节我们来为任务清单添加[导航菜单]. 在以往的项目中,大家可能会手动在layout页面中添加一个a标签来新增导航菜单,这 ...

  3. WordPress主题开发:开启导航菜单功能

    步骤一:开启导航菜单功能 <?php /* register_nav_menu( $location, $description ) 函数功能:开启导航菜单功能 @参数 string $loca ...

  4. WordPress导航菜单函数

    导航菜单是每一个WordPress主题必须的元素,如果你要制作一个WordPress主题,那就必须熟悉WordPress导航菜单注册函数 register_nav_menus() 和 导航菜单调用函数 ...

  5. 改进你的WordPress导航菜单 —— 输出标题描述

    在WordPress 3.0中增加了自定义菜单功能,如果你在WordPress后台(外观>菜单)创建一个菜单,你可以在主题中使用wp_nav_menu()函数来显示这些菜单.但是像图中这种带描述 ...

  6. wordpress设置导航栏

    设置导航栏,首先你要设置你的导航分类.登陆后台---文章---分类目录,首先在这里输入你要写入导航的标题. 设置好后点击---外观---菜单这个地方就可以具体的设置导航的排序和下拉等二级

  7. Netsharp快速入门(之6) 基础档案(创建导航菜单)

    作者:秋时 杨昶   时间:2014-02-15  转载须说明出处 1.1     创建导航菜单 1.在Demo节点下,录入路径名称,并在下方录入两个导航页签名 2.建立分类,只要填路径名 3.双击基 ...

  8. React+Ant Design设置左侧菜单导航路由的显示与隐藏(与权限无关)

    最近在学习react时,用到了很流行的UI框架Ant Design,也了解了一下Ant Design Pro,发现它们都有导航组件,Ant Design框架的导航菜单在这里,Ant Design Pr ...

  9. WEB入门.九 导航菜单

    学习内容 水平导航菜单 垂直导航菜单 下拉式导航菜单 能力目标 制作tab标签导航菜单 制作带箭头的导航菜单 制作带信息提示的导航菜单 制作垂直下拉导航菜单 制作水平下拉导航菜单 本章简介 上一章节中 ...

随机推荐

  1. Object中defineProperty数据描述

    Object.defineProperty是对对象中的属性进行数据描述的 使用语法: Object.defineProperty(obj,prop,descriptor) 使用示例: var data ...

  2. 28、IE报vuex requires a Promise polyfill in this browser问题解决

    解决方法第一步: 安装 babel-polyfill . babel-polyfill可以模拟ES6使用的环境,可以使用ES6的所有新方法 npm install --save babel-polyf ...

  3. mysql编译安装下载地址(官网)

    https://dev.mysql.com/get/Downloads/MySQL-version number/mysql-version number.tar.gz 把这个地址上面的版本号改成自己 ...

  4. Java垃圾回收_过程观察

    这是今天看JVM垃圾回收的时候做的实验观察. 使用工具:Java VisualVM.VisualVM GC插件 观察应用:Tomcat容器中的Web服务 1. Java VisualVM 在tomca ...

  5. BootStrap简单table

    效果图: 代码如下: <%-- Created by IntelliJ IDEA. User: 冷噫雪 Date: 2019/9/1 Time: 13:06 To change this tem ...

  6. mybatis + oracle,出现ORA-01461:仅能绑定要插入LONG列的LONG值

    1.这个异常是指,用户向数据库执行插入数据操作时,某条数据的某个字段值过长,如果是varchar2类型的,当长度超过2000,--4000(最大值)之间的时候,oracle会自动将该字段值转为long ...

  7. JavaScript基础内容中的函数详解

    函数 函数:即方法 函数就是一段预先设置的功能代码块,可以反复调用,根据输入参数的不同,返回不同的值. 为什么使用函数: 1.方便调用 2.代码重用,利于维护 3.便于修改,便于重构 4.简化逻辑,利 ...

  8. 【Netty】初识Netty

    一.为什么会出现Netty 之前我们使用通用的应用程序或库来相互通信.例如,我们经常使用HTTP客户机库从web服务器检索信息,并通过web服务调用远程过程调用.然而,通用协议或其实现有时伸缩性不是很 ...

  9. ARM架构体系

    架构 处理器家族 ARMv1 ARM1 ARMv2 ARM2.ARM3 ARMv3 ARM6, ARM7 ARMv4 StrongARM.ARM7TDMI.ARM9TDMI ARMv5 ARM7EJ. ...

  10. Spring Cloud 手记

    文档:https://www.springcloud.cc/spring-cloud-dalston.html#_features 一年了,我们都用 Spring Cloud 干了啥?:https:/ ...