让你的WordPress主题支持wp_nav_menu()菜单

2010.09.08 / 22:09

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。

你懂的 不多说
  1. 2010.09.15 / 11:32

    好多代码,晕了

  2. 2010.09.16 / 12:36

    我没加function那些,一直都是用CSS实现下拉菜单的,只是在IE下实在太差,好在我已经block IE了。