让你的WordPress主题支持wp_nav_menu()菜单
wp_nav_menu()是WordPress3.0的一个重要的新特性,关于wp_nav_menu()的详细教程请见,如何让你的主题支持wp_nav_menu()才是你最关心的话题吧,下面就如何让主题支持wp_nav_menu()菜单详细讲一下:
打开“functions.php”添加如下代码:
-
添加代码:
/** register nav_menus */
register_nav_menus( array(
'primary' => __( 'Primary Navigation', 'warrior' ),
) );/** 下面函数是为了兼容之前的wp_list_pages() */
function warrior_page_menu_args( $args ) {
$args['show_home'] = true;
return $args;
}
add_filter( 'wp_page_menu_args', 'warrior_page_menu_args' );
在主题文件(一般在header.php中)中添加下面代码即可让你的主题支持wp_nav_menu()菜单了:
< ?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
如果你使用的是iNove主题请添加到主题文件中的“templates”文件夹中的“header.php”文件中。
-
添加css样式:
下面是css样式,以iNove为例:
#menubar {
float:left;
height:36px;
margin-left:15px;
}
#menubar ul {
list-style:none;
}
#menubar li {
float: left;
position: relative;
}
#menubar a {
display: block;
line-height: 36px;
padding: 0 15px;
text-decoration: none;
}
#menubar ul ul {
box-shadow: 0 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
display: none;
position: absolute;
margin:0;
float: left;
width: 100px;
z-index: 99999;
}
#menubar ul ul li {
min-width: 100px;
}
#menubar ul ul ul {
left: 100%;
top: 0;
}
#menubar ul ul a {
height: auto;
line-height:36px;
padding: 0 15px;
background:#c4e3f2 url(images/navbg.gif) 0 -36px repeat-x;
}
#menubar li:hover > a,
#menubar ul ul :hover > a {
color: #fff;
background:#cfc3cf url(images/navbg.gif) 0 0 repeat-x;
}
#menubar ul li:hover > ul {
display: block;
}
.children:hover {
color:#000000;
}
#menubar ul li.current_page_item > a,
#menubar ul li.current-menu-ancestor > a,
#menubar ul li.current-menu-item > a,
#menubar ul li.current-menu-parent > a {
border-right:1px solid #fff;
border-left:1px solid #fff;
color:#fff;
background:#ec6a6a url(images/navbg.gif) 0 -72px repeat-x;
}
css样式来自WordPress最新默认主题twentyten,纯css下拉菜单,可惜不支持ie6。
好多代码,晕了
我没加function那些,一直都是用CSS实现下拉菜单的,只是在IE下实在太差,好在我已经block IE了。