WordPress入门 之 设置导航菜单

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自定义导航菜单就介绍到这里。

原文地址:https://www.cnblogs.com/kenshinobiy/p/11904212.html

时间: 2024-11-09 02:10:57

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

Angular+Bootstrap3导航菜单

Angular+Bootstrap3导航菜单 AngularJS体验式编程系列文章,将介绍如何用angularjs构建一个强大的web前端系统.angularjs是由Google团队开发的一款非常优秀web前端框架.在当前如此多的web框架下,angularjs能脱颖而出,从架构设计上就高人一等,双向数据绑定,依赖注入,指令,MVC,模板.Angular.js创新地把后台技术融入前端开发,扫去jQuery一度的光芒.用angularjs就像写后台代码,更规范,更结构化,更可控. 关于作者 张丹(

导航条——收缩式导航菜单

1.概述 在网站中不仅可以设置导航条,而且还可以设置导航菜单.由于菜单内容比较多,同一页面显示比较杂乱,所以很多的设计者都采用了收缩式的菜单形式. 2.技术要点 本实例主要是应用JavaScript控制显示和隐藏表格的功能,实现收缩式导航菜单的功能.单击导航超链接,显示当前菜单的内容,隐藏上一个显示的菜单,在隐藏菜单时,让其有规律地隐藏,从而实现展开或收缩的动画效果. 3.具体实现 (1)创建index.jsp页,在页面中添加一级导航菜单项以及二级导航菜单,关键代码如下: <tr style=&qu

Android 滑动导航菜单的快速构建(二) Material Design

原创文章,转载请注明 ( 来自:http://blog.csdn.net/leejizhou/article/details/52046748 李济洲的博客 ) 上一篇 http://blog.csdn.net/leejizhou/article/details/52013343 介绍了几个滑动导航菜单效果的快速构建,这篇文章来总结"当下"如何按照Android的设计标准去设计滑动导航菜单,我为什么说的"当下"呢?因为这个设计标准是会变的. 在material de

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

步骤一:在主题的functions.php中,添加一段代码,开启菜单功能,代码如下: <?php register_nav_menus( $locations ); ?> 参数说明:$locations---指导航的位置,给此定参数,可设置多个位置的导航,如: <?php register_nav_menus( array( 'header_menu' => '我的顶部导航', 'footer_menu' => '我的底部导航' ) ); ?> 步骤二:后台设置菜单 步

wordpress导航菜单的链接支持弹出新页面

wordpress导航菜单的链接是默认在当前页打开的 只要在wp-includes\nav-menu-template.php的start_el函数加上三行代码就OK了 1 /** 2 * @see Walker::start_el() 3 * @since 3.0.0 4 * 5 * @param string $output Passed by reference. Used to append additional content. 6 * @param object $item Menu

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

最近在学习react时,用到了很流行的UI框架Ant Design,也了解了一下Ant Design Pro,发现它们都有导航组件,Ant Design框架的导航菜单在这里,Ant Design Pro是权限菜单,权限菜单简单来说就是根据登录的权限来展示不同的菜单给用户,比如管理员有给用户分配不同角色的权限,那管理员就可以看到系统管理等导航菜单,而用户A只有发布某些业务的权限,那用户A就不能看到系统管理的导航菜单等等.不过这不在我们本文的考虑范围内,有兴趣的同学可以自行去看它的API:Autho

WordPress进阶:[1]怎样用tag标签做导航菜单

文件查找:在主题文件里查找到tag.php文件(如果没有那就大胆的新建一个,代码复制index.php文件里面的),接下来在tag.php文件里面修改代码.   修改源代码:在需要显示导航菜单的地方粘贴以下代码即可,本例是粘贴在标签描述的地方. 形式:<?php wp_tag_cloud('smallest=18&largest=18&unit=px&number=0&orderby=count&order=DESC');?>   强化,做分类信息:复制

带下拉子菜单的导航菜单

一.带下拉子菜单的导航菜单 下拉菜单在一些企业网站应用尤为广泛,它存在使用方便,占用空间小等特点.之前纵向导航教程中已使用过二级导航,今天制作下横向导航菜单的二级菜单,方法和纵向一样,只不过由纵向改变为横向而已,下面我们以上一章第二节用图片美化的横向导航中的实例进行修改. 先在html代码增加二级菜单的代码: <div id=”menu”><ul><li><a id=”current” href=”#”>首页</a></li><

用ul、li标签 创建css横向导航菜单?(转)

创建CSS样式文本导航条的最简单解决方法也许就是把所有的链接都放在一行文本里,这种方法看起来很合理也很直观.但问题在于把所有的链接都放在一行文本里就很难控制链接之间以及前后的空白.所以,为了避免所有的链接都挤在一起,你最后通常都不得不插入一些东西或者非换行的空白字符作为分隔,让这些文字分离开来,不至于混在一起. 现在我们正常的做法是应用ul.li标签把链接作为无序列表(unordered list)来标识.再应用CSS样式对其进行控制,按我们预想的形式在容器中显示出来.对导航条使用无序列表似乎是