• 修改iNove主题默认导航菜单 同时显示分类目录和页面

    iNove主题默认的导航菜单好看是好看,但是感觉用的人实在太多,而且我想要同时显示分类目录和页面,这在原来的设置下是没法实现的,只能改代码了。

    原来的inove/templates/header里是设置默认只显示页面或是显示分类,我要的是都显示,开始想把判断语句去掉,只剩两个函数wp_list_pages 和wp_list_categories 。这样试过后发现显示会有错位,另外IE下和FireFox下效果也不一样,只能再重新修改了。

    下面是inove/templates/header里面我现在的导航栏的代码(搜索框还没修改好,暂时未加上)

    <!– navigation START –>
    <div id=”navigation”>
     <div id=”homepage”>
      <a title=”首页” href=”http://www.zenoven.com”><img src=”<?php bloginfo(‘stylesheet_directory’); ?>/img/home.jpg” alt=”首页” height=”50″ width=”50″></img></a>
     </div>
     <div id=”navs”>
      <div id=”navigation_wp_list_categories”>
       <!– menus START –>
       <ul id=”menus”>
        <?php
          wp_list_categories(‘title_li=0&orderby=name&show_count=0’);
        ?>
       </ul>
        <!– menus END –>
       </div>
       <div id=”navigation_wp_list_pages”>
        <ul id=”menus” >
         <?php
          wp_list_pages(‘title_li=0&sort_column=menu_order’);
         ?>
        </ul>
       </div>
      </div>

      <div></div>
    </div>
    <!– navigation END –>

    我原本是想在navigation实现3栏的,主页图标一栏,然后navs一栏(用来显示分类和页面),搜索一栏,现在只有两栏,homepage和navs(navs下面有navigation_wp_list_categories和navigation_wp_list_pages)。

    下面是CSS代码(我是CSS小菜一个 有错误的请大家指出 :lol: )

    /* navigation START */
    #navigation {
     background:#FFF;
     height:50px;
     overflow:hidden;
    }
    #homepage {
     width:50px;
     height:50px;
     float:left;
    }
    #homepage a {
     display:block;
    }
    }
    #navs {
     float:left;
     width:600px;
     height:50px;
    }
    #navs #navigation_wp_list_pages {
     background:#FFF;
     float:left;
    }
    #navs #navigation_wp_list_categories {
     background:#FFF;
     float:left;
    }
    #menus li {
     display:inline;
     list-style:none;
    }
    #menus li a {
     background-color:#FFF;
     font-size:13px;
     display:block;
     color:#382E1F;
     height:25px;
     line-height:20px;
     padding:0 10px;
     text-decoration:none;
     float:left;
     z-index:1;
    }
    #menus li a:hover,
    #menus li a.current {
     color:#006699;
     background-color:#CDE7FA;
    }

    #menus li.current_page_item a,
    #menus li.current-cat a {
     color:#006699;
     background-color:#CDE7FA;
    }
    /*  searchbox 我这里其实没有用到*/

    #searchbox {
     background: url(img/searchbox.gif) no-repeat;
     width:209px;
     height:21px;
     display:block;
     float:right;
     margin-right:10px !important;
     margin-right:5px;
     padding:3px 2px;
    }
    #searchbox .textfield {
     background:none;
     border:0px;
     width:185px;
     float:left;
     margin-right:2px;
     padding-left:2px;
    }
    #searchbox .button {
     background:none;
     border:0px;
     width:18px;
     height:18px;
     cursor:pointer;
     float:left;
     margin-top:1px;
    }
    #searchbox .searchtip {
     color:#999;
    }
    /* navigation END */

     

    这个虽然是写的针对iNove主题的,但其实其他主题的实现方法都是一样的,主要都是修改header.php和sytle.css文件,只要认真研究下想实现漂亮的导航都是很简单的。