• typecho按分类显示文章标题颜色实战

    今天想把我用typecho搭建的一个站的文章标题颜色按照分类来显示,也就是不同分类,文章标题的颜色就会不同,效果可以查看www.jingang.org

    刚开始想用<?php if ($this->is(‘category’,’news’)): ?> ,但是想了下,这个只是判断当前页面是不是news分类下面的,并不能达到我的要求,事实也证明我用此判断然后输出样式没有成功。

    那怎么搞呢?typecho群里的宅给我提醒了,“ 直接class=”<?php echo 分类缩略字 ?>” ”,试了下 <?php $this->category(‘,’); ?> 不行,因为那个直接就输出分类的链接了。不过答案很快就给我找到了,<?php echo $this->category; ?> 就可以了。

    下面说说具体怎么用吧,如果你想在index页面,让文章标题的颜色根据分类显示,那么就打开你的模板文件夹下的index.php文件

    <h2 class="entry_title"></h2>
    

    替换为

    <h2 class="entry_title">
    	<a href="<?php $this->permalink() ?>" class="<?php echo $this->category; ?>"><?php $this->title() ?></a>
    </h2>
    

    这样就会在index页面的每篇文章里加上class=”分类缩略名”,然后我们就可以用这个来修改css样式了

    打开你的主题文件夹下style.css文件来定义css,比如我的一个分类是news,想把分类下文章标题都变成红色的,那么添加代码

    .news{color:red;}
    

    同理,你也可以将archives.php,以及post.php等页面都照此法处理。

    ———————————注意—————————–

    据我观察,如果一篇文章属于多个分类,那么用<?php echo $this->category; ?>只能输出一个分类缩略名,暂时还没找到更好的办法。

  • WordPress增加日志归档和分类页面的方法

    日志归档和分类这两个页面在不少朋友的WordPress里面还是很常见的,通过这两个页面可以让自己和访客更好的了解你的内容,也可以对自己以前的文章进行查看总结。下面就来说下添加这两个页面的方法。

    1、增加日志归档页面

    效果如下面的截图,实际效果可以查看我的这个页面 文章归档

    我的实现用的是插件,先去下载mg12的WP-EasyArchives(地址1  )

    当然仅仅安装这个还不能让日志归档单独在一个页面上显示,下面继续介绍。

    对于iNove主题的朋友实现很简单,首先增加一个页面,并为他命名(比如日志归档),然后在选择模板的时候选择Archives就可以了。

    非iNove主题用户,请看这里,方法有两个。

    (方法1) 首先下载Exec-PHP插件(地址1),并启用该插件。

    然后新增加一个页面,为他命名为日志归档,切换到HTML编辑模式下,加入下面的代码

    <?php wp_easyarchives(); ?>

    (方法2)此方法源自漠天博客,文章地址 WordPress日志归档插件EasyArchives 使用方法

    (1). 复制正在使用的主题文件page.php,另存为archivespage.php在文件最前面添加

    <?php
    /*
    Template Name: Archives Page
    */
    ?>

    (2). 将如下代码<?php the_content(); ?>替换为<?php wp_easyarchives(); ?>,同时可以删除一些没用的代码,比如:文章发表时间、作者、标签、分类等

    (3). 将archivespage.php上传至主题文件夹目录

    (4). 添加新页面时选择模板“Archives Page”,根据自己需要修改页面标题和缩略名进行发布。

    2、增加日志分类页面

    效果如下面的截图,实际效果可以查看我的这个页面 文章分类 。

    增加分类页面的方法和上面增加归档页面的方法很类似,仍然像上面一样有两种方法。

    (方法1)将上面增加归档页面方法(1)中的

    <?php wp_easyarchives(); ?>

    替换为

    <?php wp_list_categories(‘orderby=name&show_count=1&show_last_update=1&use_desc_for_title=1’); ?>

    其实朋友们已经看出来了,这里只是调用WP的一个函数而已,关于wp_list_categories函数的用法这里不再细说,大家有兴趣的可以看这里 wp_list_categories 标签的用法

    (方法2)与方法1一样,只是做些简单的替换。

    (1). 复制正在使用的主题文件page.php,另存为categories.php在文件最前面添加

    <?php
    /*
    Template Name: Categories
    */
    ?>

    (2). 将如下代码<?php the_content(); ?>替换为

    <?php wp_list_categories(‘orderby=name&show_count=1&show_last_update=1&use_desc_for_title=1’); ?>

    (3). 将categories.php上传至主题文件夹目录

    (4). 添加新页面时选择模板”Categories “,根据自己需要修改页面标题和缩略名进行发布。

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