wordpress
[highlight color="red"]此文章停止发布 以下内容并不能给您任何帮助[/highlight]
[button_icon icon="none" url=""]此文章停止发布 以下内容并不能给您任何帮助！[/button_icon]
WordPress导航菜单函数register_nav_menus() 和 wp_nav_menu()
register_nav_menus()这个函数是导航菜单的注册函数
register_nav_menus() 是3.0以后用来注册自定义菜单的函数，通过它可以很方便地给你的主题注册一个或多个菜单，在主题的 functions.php 中添加：
1 2 3 4 | register_nav_menus( array( 'header_menu' => 'My Custom Header Menu', 'footer_menu' => 'My Custom Footer Menu' ) ); |
上面的代码注册了两个代码，其中 'header_menu' 和 'footer_menu' 分别是这两个菜单的“键key”，而后面的 'My Custom Header Menu' 和 'My Custom Footer Menu' 是对这个菜单的描述，会在 外观 - 菜单 中显示出来。下文将会图例说明。
按照上面的结构，就可以注册多个菜单。
下面是实例
导航菜单注册和调用示例
要想定义出灵活强大的菜单，需要我们熟悉上面介绍的 导航菜单注册函数 register_nav_menus() 和 导航菜单调用函数wp_nav_menu() 。
1.首先我们先要激活 WordPress 3.0 以后的自定义菜单功能，也就是要注册菜单。在主题的 functions.php文件中添加下面的代码：
1 2 3 4 5 | //添加导航
register_nav_menus(array(
'left-menu' => '左边栏菜单',
'top-menu' => '顶部菜单',
)); |
这样我们就注册了 左边栏菜单 和顶部菜单，你可以在 外观-菜单 中查看到：
我们可以使用下面的函数调用 左边栏菜单：
1 2 3 4 5 | <?php
if(function_exists('wp_nav_menu')) {
wp_nav_menu(array( 'theme_location' => 'left-menu','container_id'=>'menu_left') );
}
?> |
其中，'theme_location' 后面的值 是 'left-menu'，就是调用前面注册的那个 左边栏菜单，而 'container_id' 自定义为 'menu_left'，最终输出的html结构如下：
1 2 3 4 5 6 7 8 | <div id="menu_left" class="menu-xxx-container">
<ul class="menu">
<li><a href="http://www.iiexe.com">首页</a></li>
<li><a href="http://www.iiexe.com/news">WP资讯</a></li> ………… <li><a href="http://www.iiexe.com/announce">本站相关</a></li> </ul> </div> |
也就是说，菜单使用 <div id="menu_left">……</div> 来包含了，接下来，你就可以根据这个 id 来写css美化菜单的显示效果了。
小结：只要灵活运用 导航菜单注册函数 register_nav_menus() 和 导航菜单调用函数wp_nav_menu() ，加上一流的前端技术，就能设计出强大和漂亮的菜单啦！
导航菜单调用函数 wp_nav_menu() 介绍
wp_nav_menu() 是WordPress 3.0 以后添加的一个自定义导航菜单调用函数，可用来调用 register_nav_menus() 注册的菜单。wp_nav_menu()的使用方法位于wp-includes/nav-menu-templates.php文件中。
可以通过 <?php wp_nav_menu( $args ); ?> 来调用菜单，其中参数 $args 的默认值如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <?php $defaults = array( 'theme_location' => '', 'menu' => '', 'container' => 'div', 'container_class' => '', 'container_id' => '', 'menu_class' => 'menu', 'menu_id' => '', 'echo' => true, 'fallback_cb' => 'wp_page_menu', 'before' => '', 'after' => '', 'link_before' => '', 'link_after' => '', 'items_wrap' => '<ul id="%1$s">%3$s</ul>', 'depth' => 0, 'walker' => '' ); wp_nav_menu( $defaults ); ?> |
每个参数的详细介绍如下：
- $theme_locaton：(字符串)(可选)
默认值: None
用于在调用导航菜单时指定注册过的某一个导航菜单名，如果没有指定，则显示第一个。
1 | wp_nav_menu(array( 'theme_location' =>'primary')); //调用第一个菜单 |
- $menu：(字符串)(可选)
默认值: None
使用导航菜单的名称调用菜单，可以是 id, slug, name (按顺序匹配的) 。
- $container：(字符串)(可选)
默认值: div
ul 父节点（这里指导航菜单的容器）的标签类型，只支持div klonopin m c13 和 nav 标签, 如果是其它值, ul 父节点的标签将不会被显示。也可以用false（container => false）去掉ul父节点标签。
- $container_class：(字符串)(可选)
默认值: menu-{menu slug}-container
ul 父节点的 class 属性值。
- $container_id：(字符串)(可选)
默认值: None
ul 父节点的 id 属性值。
- $menu_class：(字符串)(可选)
默认值: menu
ul 节点的 class 属性值。
- $menu_id：(字符串)(可选)
默认值: menu slug, 自增长的
ul 节点的 id 属性值。
- $echo：(布尔型)(可选)
默认值: true (直接显示)
确定直接显示导航菜单还是返回 HTML 片段，如果想将导航的代码作为赋值使用，可设置为false。
- $fallback_cb：(字符串)(可选)
默认值: wp_page_menu (显示页面列表作为菜单)
用于没有在后台设置导航时调的回调函数。
- $before：(字符串)(可选)
默认值: None
显示在每个菜单链接前的文本。
- $after：(字符串)(可选)
默认值: None
显示在每个菜单链接后的文本。
- $link_before：(字符串)(可选)
默认值: None
显示在每个菜单链接文本前的文本。
- $link_after：(字符串)(可选)
默认值: None
显示在每个菜单链接文本后的文本。
- $items_wrap：(字符串)(可选)
默认值: None
使用字符串替换修改ul的class。
- $depth：(整型)(可选)
默认值: 0
显示菜单的深度, 当数值为 0 时显示所有深度的菜单。
- $walker：(对象型)(可选)
默认值: new Walker_Nav_Menu
熟悉了 这个两个函数你就可以给自己的主题添加导航菜单了！道理很简单 怎么添加已经可以了！但是你会发现前台并没有一个导航菜单的样子 大概会变成一个列表样式
即：
<li><a href="http://www.iiexe.com/" title="博客">博客</a></li>
<li><a href="http://www.iiexe.com/" title="博客">博客</a></li>
<li><a href="http://www.iiexe.com/" title="博客">博客</a></li>
类似上面的样式 那么我们现在做的就是讲下面看的功能添加到上面
下面我们介绍 下拉菜单的做法
即：
——————————————————————
菜单都是运用“显示和隐藏”，但是当中有一些细节必须要注意。那要注意什么呢？css的定位，这就对了，相对和绝对定位。相对定位是处于标准流的，也就是说占有空间啦，绝对定位是不处于标准流的，你应该明白这吧！所以呢要隐藏的那部分一定要设置绝对定位。听的很模糊吧！没关系下面有例子说的很明白的哦，给些信心。
导航html一般是这样构建的：<ul id=”nav”>
<ul>
<li> <a href=”#”>a1</a></li>
<li> <a href=”#”>a2</a></li>
</ul>
</li>
<li> <a href=”#”>下拉菜单2</a>
<ul>
<li> <a href=”#”>b1</a></li>
<li> <a href=”#”>b2</a></li>
</ul>
</li>
<li> <a href=”#”>下拉菜单3</a>
<ul>
<li> <a href=”#”>c1</a></li>
<li> <a href=”#”>c2</a></li>
</ul>
</li>
<li> <a href=”#”>下拉菜单4</a>
<ul>
<li> <a href=”#”>d1</a></li>
<li> <a href=”#”>d2</a></li>
</ul>
</li>
</ul>
这时到CSS书写了，这里先不讲怎样美化导航先，把简单的框架搭建成先。CSS大体是这样：
结合wordpress 定义DIV类选择器
在style中的写法就是
.选择器 ul li
也就是在下面的样式前加入类选择器
ul{list-style-type:none; padding:0; margin:0;}
ul li{ float:left;}
ul li ul li{float:none;}
ul li a{width:100px; display:block; text-align:center; text-decoration:none;padding:3px 1px; background-color:#ccc;}
ul li ul a{background-color:#eee;}
ul li a:hover{ background-color:#666; color:#fff;}
这时半成品出来了
仔细的你发现CSS有问题那就是定位问题啦？别急，后面会慢慢说，耐心点哦！那我们先把下拉的菜单隐藏先，这时要改CSS了，加上ul li ul{display:none};这行代码就隐藏啦！变成了
呵呵……离成功不远了。现在问题就出来了。鼠标移上去怎样让下拉菜单显示呢？这时就用到了JS了，因为IE6是不支持li伪类的哦。但是我们还是先用li伪类先哦，为了尽快解决上面提出的定位问题。这时加上一行CSS代码#nav li:hover ul{display:block;}这时就实现了显示下拉导航了，除IE6外。
把鼠标移到菜导航下把网页的内容向下推动了：
这不是我们想要的，这就是上面CSS没定位问题了，也是一定要注意的问题，那怎样改呢，把ul li改成相对定位ul li{ float:left; display:block; position:relative;}，在ul li里面的那个ul（即ul li ul )改成绝对定位ul li ul{display:none; position:absolute;}，就没问题了。
这时还是不算成功，IE6是不支持li:hover,虽然也有JS解决IE6也支持li:hover,但这里并不讨论这个，所以呢还要用到JS,JQ也行。这里就不解释JS了，只把代码贴出来就OK啦！其实学习基础原理很关键，技术大牛都是基础很过关的。<script>
/*用jquery实现 $(function(){
$(“ul>li”).hover(function(){
$(this).find(“ul”).show();
},function(){
$(this).find(“ul”).hide();
})
})*/
//下面是js实现
var nav = document.getElementById(“nav”).childNodes;
for (var i=0;i<nav.length;i++){
nav[i].onmouseover = function(){fnNav(this,”block”)};
nav[i].onmouseout = function(){fnNav(this,”none”)};
}
function fnNav(obj,flag)
{
obj.getElementsByTagName(“ul”)[0].style.display = flag;
}
</script>放在body后面，因为加载DOM是从上到下的。
