首先,在主题目录下的functions.php的 之间,添加以下菜单注册代码,这样你就可以在主题文件中使用wp_nav_menu函数了:
复制代码 代码如下:
// This theme uses wp_nav_menu() in one location.
register_nav_menus();
接着我们在主题的导航栏处调用wp_nav_menu(),即可输出导航菜单HTML代码:
复制代码 代码如下:
// 列出顶部导航菜单,菜单名称为mymenu,只列出一级菜单
wp_nav_menu( array( 'menu' => 'mymenu', 'depth' => 1) );
?>
以上代码输出的HTML代码形式如下:
这里列出的 li 项为你在后台 – 外观 – 菜单添加的栏目,如果你还没有在后台添加菜单,导航栏将列出所有页面。另外,wp_nav_menu会为每个 li 添加class,不同的class标记这个菜单项的属性,如当前打开的是某个文章页面,分类A 就是这篇文章所属的分类,那么 分类A 所在的 li 将会如下代码所示:
复制代码 代码如下:
如果是在首页,那么首页的菜单项的 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 的形式来构建菜单列表:如:
复制代码 代码如下:
- ...
- ...
如果主题的前端代码不是你写的,而且导航栏的代码写得很龟毛,这根本不是上面的WordPress标准的 ul 导航栏形式,如下面的代码:
复制代码 代码如下:
- 标题
- 菜单A
- 菜单B
魔客吧温馨提示:wordpress是一款优秀的国外系统,魔客吧给大家提供了许多 wordpress汉化主题 供大家下载,相信你会喜欢!
分享到 更多 <script type="text/javascript" id="bdshell_js"></script><script type="text/javascript">document.getElementById("bdshell_js").src = "http://share.baidu.com/static/js/shell_v2.js?cdnversion=" + new Date().getHours();</script> 本文地址:http://www.moke8.com/article-19999-1.html文章标题:wordpress制作自定义菜单的方法 收藏邀请 最新分享资源
响应式建筑建材水泥网站dede模板
dedecms模板 by moke响应式货运物流网站dedecms模板
dedecms模板 by moke生态农业酷站HTML模版
div+css模板 by hexipeng智能家居网站+手机端织梦模板
dedecms模板 by moke最新评论
相关分类
- discuz教程
- discuzx教程
- phpwind教程
- dedecms教程
- phpcms教程
- wordpress教程
- ecshop教程
- php168教程
- shopex教程
- 帝国cms教程
精品推荐
精华 中英双语响应式电子企业织梦模板
dedecms模板 by moke极品资源
极品 高端建筑装饰带手机版十配色织梦模板
dedecms模板 by moke原创模板
魔币 多配色创意metro风格企业
下载排行
- 01响应式网站网络设计公司织梦
- 02响应式货运物流网站dedecms模
- 03智能家居网站+手机端织梦模板
- 04响应式建筑建材水泥网站dede
- 05生态农业酷站HTML模版
资源分类
企业网站模板 企业网站源码 个人网站模板 个人网页模板 手机wap网站 门户网站模板 商业源码 淘宝客程序 html5网站 网站后台模板 html网页模板 学校网站模板 <script type="text/javascript">var cookieLogin = Ajax("TEXT");cookieLogin.get("connect.php?mod=check&op=cookie", function() {});</script><script type="text/javascript">_attachEvent(window, 'load', getForbiddenFormula, document);function getForbiddenFormula() {var toGetForbiddenFormulaFIds = function () {ajaxget('plugin.php?id=cloudsearch&formhash=e96e4250');};var a = document.body.getElementsByTagName('a');for(var i = 0;i < a.length;i++){if(a[i].getAttribute('sc')) {a[i].setAttribute('mid', hash(a[i].href));a[i].onmousedown = function() {toGetForbiddenFormulaFIds();};}}var btn = document.body.getElementsByTagName('button');for(var i = 0;i < btn.length;i++){if(btn[i].getAttribute('sc')) {btn[i].setAttribute('mid', hash(btn[i].id));btn[i].onmousedown = function() {toGetForbiddenFormulaFIds();};}}}</script>联系我们 | 关于我们 | 招商加盟 | 版权声明 | 帮助中心 | 广告服务 | 网站地图
欢迎浏览魔客吧提供的 wordpress制作自定义菜单的方法 信息,若本站中的信息侵犯了您的权益,请与本站管理员联系Copyright @ 2010-2015 魔客吧 版权所有 蜀ICP备09014119号 川公网安备51050202000165号 <script type="text/javascript" src="http://tcss.qq.com/ping.js?v=1VERHASH" charset="utf-8"></script><script type="text/javascript" reload="1">pgvMain({"discuzParams":{"r2":"5238379","ui":0,"rt":"portal","pn":1,"qq":"000"},"extraParams":""});</script>
积分 0, 距离下一级还需 积分 <script type="text/javascript">_attachEvent(window, 'scroll', function(){showTopLink();});</script><script>(function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https'){ bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else{ bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s);})();</script> <script type="text/javascript"> var tipsinfo = '5238379|X2.5|0.6||0||0|7|1505358038|b4337d464582844fc66583662bcbb69b|2'; </script> <script src="http://discuz.gtimg.cn/cloud/scripts/discuz_tips.js?v=1" type="text/javascript" charset="UTF-8"></script>