代码原文来自: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]
可以选择的配置,还是很详细的:
效果与代码类似: