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

GD Star Rating
loading...

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文件,只要认真研究下想实现漂亮的导航都是很简单的。

已有15条评论 发表评论

  1. 毒药 /

    百度来的,很喜欢这里。收藏了。我也要建个属于我心目中完美的博客,有一些地方希望得到你的帮助。QQ:285261331

    GD Star Rating
    loading...
  2. 绍兴小杜 /

    百度到了又来了你这里,哈哈,给你点点再

    GD Star Rating
    loading...
  3. 引用通知: 修改iNove主题默认导航菜单 同时显示分类目录和页面 | 极数博客 /

  4. 微知博客 /

    但是改了以后没有以前清爽了界面

    GD Star Rating
    loading...
    1. zenoven / 本文作者

      我感觉还行哦。。呵呵,现在还在修改

      GD Star Rating
      loading...
  5. MuMu'S /

    恩,比原版的个性多了。

    GD Star Rating
    loading...
    1. zenoven / 本文作者

      呵呵,还得继续改 直到自己满意为止

      GD Star Rating
      loading...
  6. 汤博客杂志站 /

    今天下午没事。到你博上来看看。,望回访。:》

    GD Star Rating
    loading...
  7. 我心疯狂 /

    是呀inove主题太多人用了,随便就撞墙~~朋友一修改,就变成独一无二了,顶你!

    GD Star Rating
    loading...
    1. zenoven / 本文作者

      呵呵。。。是啊,看到WP论坛上好多朋友改的很棒,我的还是感觉火候不到啊。。。

      GD Star Rating
      loading...
  8. mosky /

    兄弟,你可不可以弄一个虾米的header,我对php不是太熟悉,弄了好长时间没成功!

    GD Star Rating
    loading...
    1. zenoven / 本文作者

      其实这些都差不多的,就是调用的函数不一样而已,< ?php wp_list_categories(’title_li=0&orderby=name&show_count=0′); ?>
      是调用分类

      < ?php wp_list_pages(’title_li=0&sort_column=menu_order’); ?>
      是调用页面

      GD Star Rating
      loading...
      1. mosky /

        看到你的修改方法,我受到启发,经过一番的折腾,终于把inove盖头换面了。过两天在修改些细节估计就可以这是使用啦,哈哈,O(∩_∩)O谢谢你

        GD Star Rating
        loading...
  9. Louis Han /

    能自己修改代码 真羡慕
    有空我也得学学PHP和CSS了

    GD Star Rating
    loading...
  10. vaman /

    一会我试试

    GD Star Rating
    loading...

发表评论

This site uses Akismet to reduce spam. Learn how your comment data is processed.