空の領域

又一个坑爹的神站 大人說:要清爽 要低調

0%

Wordpress制作归档页面

代码原文来自:zwwooooo

以前是拿插件实现的,因为有的代码实在是不兼容,没办法,现在终于看到希望了,加上之后可以用(当然还有一部分是因为熟悉了这个主题的大致框架了= =、、真不容易)所以插件也会做介绍,如果你用的也是小众蛋疼主题……那么可以方便的使用一下。

代码版

效果:

[![2012-08-13_184933](images/2012-08-13_184933_thumb.png "2012-08-13_184933")](https://img.codesky.me/upload/2012/08/2012-08-13_184933.png)(稍作修改取消斜体最佳)

首先在functions.php里加入:

/* Archives list by zwwooooo | http://zww.me */

function zww_archives_list() {

if( !$output = get\_option('zww\_archives\_list') ){

    $output = '<div id="archives"><p>\[<a id="al\_expand\_collapse" href="#">全部展开/收缩</a>\] <em>(注: 点击月份可以展开)</em></p>';

    $the\_query = new WP\_Query( 'posts\_per\_page=-1&ignore\_sticky\_posts=1' ); //update: 加上忽略置顶文章

    $year=0; $mon=0; $i=0; $j=0;

    while ( $the\_query->have\_posts() ) : $the\_query->the\_post();

        $year\_tmp = get\_the\_time('Y');

        $mon\_tmp = get\_the\_time('m');

        $y=$year; $m=$mon;

        if ($mon != $mon\_tmp && $mon > 0) $output .= '</ul></li>';

        if ($year != $year\_tmp && $year > 0) $output .= '</ul>';

        if ($year != $year\_tmp) {

            $year = $year\_tmp;

            $output .= '<h3 class="al\_year">'. $year .' 年</h3><ul class="al\_mon\_list">'; //输出年份

        }

        if ($mon != $mon\_tmp) {

            $mon = $mon\_tmp;

            $output .= '<li><span class="al\_mon">'. $mon .' 月</span><ul class="al\_post\_list">'; //输出月份

        }

        $output .= '<li>'. get\_the\_time('d日: ') .'<a href="'. get\_permalink() .'">'. get\_the\_title() .'</a> <em>('. get\_comments\_number('0', '1', '%') .')</em></li>'; //输出文章日期和标题

    endwhile;

    wp\_reset\_postdata();

    $output .= '</ul></li></ul></div>';

    update\_option('zww\_archives\_list', $output);

}

echo $output;

}

function clear_zal_cache() {

update\_option('zww\_archives\_list', ''); // 清空 zww\_archives\_list

}

add_action(‘save_post’, ‘clear_zal_cache’); // 新发表文章/修改文章时

使用外国主题的记得转码(嗯,我们的Accordium汉化版同样需要把文件转码,汉化的时候为了方便不是每个文件都转的,记得关注一下

然后,复制一份page.php改名为archives.php,在顶端加入注释:

在page的(或者类似)后加入

给主题加载jQuery库,没有加载把这句扔到functions.php(这里我没搞明白= = )

wp_enqueue_script(‘jquery’);

一般主题都自带加载了,所以下一步。

jQuery(document).ready(function($){

//===================================存档页面 jQ伸缩

 (function(){

     $('#al\_expand\_collapse,#archives span.al\_mon').css({cursor:"s-resize"});

     $('#archives span.al\_mon').each(function(){

         var num=$(this).next().children('li').size();

         var text=$(this).text();

         $(this).html(text+'<em> ( '+num+' 篇文章 )</em>');

     });

     var $al\_post\_list=$('#archives ul.al\_post\_list'),

         $al\_post\_list\_f=$('#archives ul.al\_post\_list:first');

     $al\_post\_list.hide(1,function(){

         $al\_post\_list\_f.show();

     });

     $('#archives span.al\_mon').click(function(){

         $(this).next().slideToggle(400);

         return false;

     });

     $('#al\_expand\_collapse').toggle(function(){

         $al\_post\_list.show();

     },function(){

         $al\_post\_list.hide();

     });

 })();

});

保存为JS,然后调用,或者直接在head()后加入

CSS可有可无,Html结构(我还是没搞清楚这个拿来干嘛……)

 <p>\[<a id="al\_expand\_collapse" href="#"\>全部展开/收缩</a>\] <em>(注: 点击月份可以展开)</em></p>

 <h3 class\="al\_year"\>'年份</h3>

 <ul class\="al\_mon\_list"\>

     <li><span class\="al\_mon"\>月份<em> (本月文章数量)</em></span>

         <ul class\="al\_post\_list"\>

             <li>号数: <a href="文章链接"\>文章标题</a> <em>(评论数量)</em></li>

         </ul>

     </li>

 </ul>

搞定以上直接新建页面选择archives即可。

代码版的一些斜体效果是因为加了强调标签,可以将标签去掉来取消这种效果


对于accordium这个蛋疼主题,

page.php复制完之后,在

后加入

就行了,至于那些建立页面教你一堆的坑爹教程= =还是算了。


插件,我以前用的是Clean Archives Reloaded,很方便。

插件下载:http://wordpress.org/extend/plugins/clean-archives-reloaded/

使用方法:新建一个页面,在页面内源代码输入状态(Html)插入:

[cleanarchivesreloaded]

可以选择的配置,还是很详细的:

2012-08-13_184655

效果与代码类似:

2012-08-13_184804

欢迎关注我的其它发布渠道