wordpress制作自定义菜单的方法

所属分类: CMS教程 / WordPress 阅读数: 1269
收藏 0 赞 0 分享
要想实现自定义菜单,需要用到的函数是wp_nav_menu(),给这个函数传递一些参数就可以输出自定义菜单菜单,下面简单讲讲如何使用使用这个函数。
首先,在主题目录下的functions.php的 <?php ….. ?> 之间,添加以下菜单注册代码,这样你就可以在主题文件中使用wp_nav_menu函数了:

复制代码
代码如下:

// This theme uses wp_nav_menu() in one location.
register_nav_menus();

接着我们在主题的导航栏处调用wp_nav_menu(),即可输出导航菜单HTML代码:

复制代码
代码如下:

<?php
// 列出顶部导航菜单,菜单名称为mymenu,只列出一级菜单
wp_nav_menu( array( 'menu' => 'mymenu', 'depth' => 1) );
?>
以上代码输出的HTML代码形式如下:
<div class="menu-menu-container">
<ul class="menu" id="menu-menu">
<li class="..." id="menu-item-1"><a href="...">首页</a></li>
<li class="..." id="menu-item-2"><a href="...">分类A</a></li>
...
</ul>
</div>

这里列出的 li 项为你在后台 – 外观 – 菜单添加的栏目,如果你还没有在后台添加菜单,导航栏将列出所有页面。另外,wp_nav_menu会为每个 li 添加class,不同的class标记这个菜单项的属性,如当前打开的是某个文章页面,分类A 就是这篇文章所属的分类,那么 分类A 所在的 li 将会如下代码所示:

复制代码
代码如下:

<li class="menu-item menu-item-type-taxonomy current-post-ancestor current-menu-parent current-post-parent menu-item-5" id="menu-item-2"><a href="...">分类A</a></li>

     如果是在首页,那么首页的菜单项的 li 可能会如下所示:

复制代码
代码如下:

<li class="menu-item menu-item-type-custom current-menu-item current_page_item menu-item-home menu-item-4" id="menu-item-1"><a href="..">首页</a></li>
从这些class的名称就知道它们的作用,通过给这些class添加css属性,可以达到如高亮当前导航菜单的目的,如将当前菜单链接定义成红色:
.current-post-ancestor a, .current-menu-parent a, .current-menu-item a, .current_page_item a {
color: red;
}

     好了,WordPress 3.0的自定义菜单的调用就是这么简单。wp_nav_menu还有很多参数,如自定义 ul 节点、ul 父节点的id和class的参数等等,详情可以参考文档:官方文档 | 中文文档
使用分类和页面作为导航栏
     在 WordPress 3.0 之前,大部分WordPress主题都是拿页面作为导航栏的,导航中只能添加页面,显得不够自由。我刚用WordPress 2.7的时候,就为此问题烦恼,最后翻了文档,查了一些资料,实现了在导航中添加分类,详情请看我之前写的文章:WordPress 分类做导航栏,并高亮显示
非常规导航栏的制作
     以上提到的两种方式,都是使用WordPress自带的函数来实现,他们输入的HTML代码也都是限定好的,就是使用 ul li 的形式来构建菜单列表:如:

复制代码
代码如下:

<ul>
<li class="..">...</li>
<li class="..">...</li>
</ul>

如果主题的前端代码不是你写的,而且导航栏的代码写得很龟毛,这根本不是上面的WordPress标准的 ul 导航栏形式,如下面的代码:

复制代码
代码如下:

<dl>
<dt><strong>标题</strong></dt>
<dd><a target="_blank" title="#" href="#">菜单A</a></dd>
<dd><a target="_blank" title="#" href="#">菜单B</a></dd>
</dl>
更多精彩内容其他人还在看

WordPress中让Widget 标题支持简单的HTML标签

在默认情况下,WordPress 的 Widget 标题是不支持任何 HTML 标签的,下面的技巧教你使用简单的代码替换实现在 Widget 标题实现支持 HTML 标签
收藏 0 赞 0 分享

不使用wordpress插件添加页面关键词和描述信息

WordPress存在一个问题,就是页面中keywords和description信息的缺失,其实这个工作应该由主题来完成,遗憾的是大部分主题并没有涉及,因此造成这两个信息的缺失,对于SEO很不利。下面说下如何用非插件的方式在模板中实现keywords和description的调
收藏 0 赞 0 分享

wordpress数据库优化和清理冗余数据的方法

本文主要介绍了wordpress数据库优化和清理冗余数据的方法,大家参考使用吧
收藏 0 赞 0 分享

wordpress博客多站点获取当前博客信息示例

在开通WordPress多站点之后,你或许需要在插件中获取当前的博客信息。本文帮你解决这个问题
收藏 0 赞 0 分享

wordpress恶意代码解决方法分享

发现自己的测试站的主题带上了恶意代码,非常明显的就是出现了一个函数_verifyactivate_widgets,通常情况下,一旦出现了这个函数在你的主题中,使用PHP可以任意的获取用户名、博客的主题文件等等,下面是解决方法
收藏 0 赞 0 分享

wordpress中短代码失效解决办法

在WordPress中我们偶尔会使用短代码,但是在一些特殊的主题中,我们偶尔会发现,短代码失效了,没有显示为我们想要的音乐播放器,却只显示为原本的字符串。这个时候,你可能需要对主题进行一些简单的处理来实现这个打印效果
收藏 0 赞 0 分享

wordpress文章标题为空时其它内容代替的方法

本文主要介绍了wordpress文章标题为空时使用其它内容代替的方法,大家参考使用吧
收藏 0 赞 0 分享

为wordpress绑定多个域名的方法分享

本文主要介绍了WordPress绑定多个域名的方法,wordpress默认情况下会自动跳转到后台规定的home_url上去,如何实现绑定多个域名的功能,详细看下文吧
收藏 0 赞 0 分享

wordpress在postname中支持大写字母的方法

本文主要介绍了wordpress在postname中支持大写字母的方法,wordpress默认会将标题中的英文大写字母lower到小写,要在URL中使用中文,那么使用大写也是常有的,这里提供一种取消wordpress自动降级字母大写的方法
收藏 0 赞 0 分享

wordpress实现用户历史阅读记录功能分享

历史记录是一种较为私密的功能,主要为当前用户提供服务,不同的用户使用不同的终端看到的结果是不同的,不同用户之间不能共享,以保持用户对自己浏览记录的独享性。一般而言,我们有以下几种实现思路
收藏 0 赞 0 分享
查看更多