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. ECharts堆叠柱状图label显示总和

    Echarts本身没提供现成的解决方案. option = { title: { text: '分类销量' }, legend: { y: "bottom", data: ['百货 ...

  2. Android编译系统中的Android.bp

    https://www.cnblogs.com/bluestorm/p/10895005.html Android.bp,是用来替换Android.mk的配置文件. 它使用Blueprint框架来解析 ...

  3. Kafka Streams开发入门(1)

    背景 最近发现Confluent公司在官网上发布了Kafka Streams教程,共有10节课,每节课给出了Kafka Streams的一个功能介绍.这个系列教程对于我们了解Kafka Streams ...

  4. VS code key shortcuts for windows

    mac上的快捷键,尽量是选择像我用vs studio上靠近. ctrl+K+S: 显示快捷键列 ctrl+shift+p: 系统配置命令行 ctrl+p:项目中文件列表,选择文件 Alt+M:当前文件 ...

  5. mysql float和decimal

    结论: 1. float 默认只保存6位(除去小数点),如果超过6位,则四舍五入,所以float存储的数据是不精确的,只是近似值: 2. decimal,如果输入的数据超过了定义的最大值,那么则溢出, ...

  6. idea操作maven时控制台中文显示乱码/maven项目启动方式

    在idea中通过maven启动项目时,在前台显示数据库信息,没有中文乱码问题,在控制台中mybatis显示数据库的信息,中文显示乱码. 在程序中用 System.out.println 输出中文的时候 ...

  7. Sql 语句中 IN 和 EXISTS 的区别

    IN 语句:只执行一次 确定给定的值是否与子查询或列表中的值相匹配.in在查询的时候,首先查询子查询的表,然后将内表和外表做一个笛卡尔积,然后按照条件进行筛选.所以相对内表比较小的时候,in的速度较快 ...

  8. Executors、ThreadPoolExecutor线程池讲解

    官方+白话讲解Executors.ThreadPoolExecutor线程池使用 Executors:JDK给提供的线程工具类,静态方法构建线程池服务ExecutorService,也就是Thread ...

  9. ubuntu16安装php开发环境

    一,安装 ubuntu 工具 sudo apt install -y git curl zsh vim 二,安装php 和 php-fpm , redis ,memcached 等 sudo apt ...

  10. 《linux就该这么学》课堂笔记09 存储结构、磁盘划分

    Linux一切都是文件 "/"为根目录(万物起始)  **挂载后要想永久生效,需要修改开机启动项 vim /etc/fstab