2014 新版《WordPress 归档页面模板[WP原生函数实现2014版]》
前年(时间好快过)我写了一篇《代码实现WordPress归档页面模板[速度很快]》,之后我的博客归档页面就一直使用文章所说的方法至今。其实这个方法里面的数据是直接使用 SQL 语句实现调用的,WordPress 官方不提倡直接使用 SQL 语句实现。今天在制作一个主题时,突然就想尝试下用 WordPress 原生函数来实现归档页面的内容调用。
经过测试,我使用了 WordPress 推荐的 WP_Query() 函数来调用所有文章,除了每月的文章数量无法直接调用到外,其它数据都可以实现,虽然可以借助另外的 WP 原生函数实现每月文章数量,但是比较繁琐。所以我另外想了个办法:我博客的存档页是用了 jQuery 来实现每月文章列表的伸缩效果,于是“每月文章数量显示”我就用 jQuery 来实现了。
下面是过程和方法,有兴趣的朋友可以试试。
折腾功能:代码实现WordPress归档页面模板[WP原生函数篇]
原创作者:zwwooooo
特点:
1. 按照年份、月份显示文章列表
2. 显示每月的文章数量(需要配合及Query)
3. 显示每篇文章的评论数
4. 使用 WordPress 原生函数实现数据调用
5. 这个存档函数会在数据库生成一个表 zww_archives_list 来做缓存,只在发表/修改文章时才更新,减少数据库查询。
6. 即使不使用第5点的数据库缓存功能也比以前的直接 SQL 语句省资源。
在线演示效果:见我博客的存档页
效果图:
步骤:
1. 把下面的函数扔到所用主题的 functions.php 文件里面:(注意:因为有中文,所以要把 functions.php 文件转换为 UTF8 无 BOM 格式,不然中文会乱码)【2012.3.22 Update:Jianbo盆友提醒,加上忽略置顶文章】
/* Archives list by zwwooooo | https://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'); // 新发表文章/修改文章时
2. 复制一份主题的 page.php 更名为 archives.php,然后在最顶端加入:
<?php /* Template Name: archives */ ?>
然后找到类似 <?php content(); ?>,在其下面加入如下代码
<?php zww_archives_list(); ?>
进wp后台添加一新页面,在右侧栏模板选择 archives
3. 给主题加载 jQuery 库,没有加载的,把下面这句扔到 functions.php 里面就行了。
wp_enqueue_script('jquery');
4. 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(); }); })(); });
PS:不知道怎么写js文件调用的就直接打开 header.php 并找到 <?php wp_head(); ?>,在其下面加上
<script type="text/javascript">上面那段jQuery代码</script>
4. css根据需要写,不写也可以的。HTML结构:
<div id="archives"> <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> </div>
折腾完,收工!
- 本文标题:代码实现WordPress归档页面模板[WP原生函数篇]
- 本文链接:https://zww.me/archives/25589
- 发布时间:2012年03月06日 20:15
- 版权声明:除非注明,文章均为 zwwooooo 原创,转载请以链接形式标明本文地址!
这里还有个啊。。CSS不会写。。
@鬼娃娃
这……默认也可以
[...] zwwooooo 大师的《代码实现WordPress归档页面模板[WP原生函数篇] [...]
您好,烦请帮忙看一下:我的为什么年月日都不缩进呢?也没有前面的圆点和方点呢?http://www.weiphp.com/archives/
样式不错啊,学习下。
做个标记,本博客已启用……TKS
老大,想咨询一下,全部调试完毕,唯有收缩的按钮处的字体显示的是问号乱码。但可以正常伸缩。functions.php也改为UTF-8无BOM格式了,为何还是乱码,望赐教。
@瘦马
收缩按钮文字不在functions.php吧,你看你写在哪个文件吧。
好用,不过JS文件怎么调用呢?能简单说下吗?
@miro
搜一下吧,很简单的问题就不敲了。
话说请问默认全部展开要怎么干啊?
@Dectinc
试试删除这句:
@zwwooooo
我用了一个比较傻的办法= =
$al_post_list.hide(1,function(){
$al_post_list_f.show();
$al_post_list.show();
});
改成这样之后把toogle里面的hide和show对换了,不过好像重复了,嘿嘿。
谢谢!
@Dectinc
搞定就好,慢慢折腾。
你好 博主 按你的步骤我做了个归档页面 很奇怪 默认13年04月09日的被打开了 ,还有11年有个08日没归属到任何月份·····求指点 谢谢
@shaun
你这有点错乱,不知道哪个参数没写好,只是凭这我无法解决,你再认真检查下代码吧。
@zwwooooo
是直接用的你给的代码啊~ 也不知道是哪里的问题了 会不会是因为那些是文章是厚爱导入过一次造成的 ··我再看看吧~
@shaun
自己尝试解决下吧
能不能把贵站归档的css分享一下?谢谢!
@摆渡人
自己直接用firebug看
我使用了你的代码,非常感谢你。我的归档页面是这个:静思学吧归档页面。
@静思学吧
去看了一下,工作正常
谢谢博主大牛到我博客确认归档页面没有问题,而且令我很惊喜的是评论竟然可以邮件通知,真的非常不错哦。想知道这个评论的邮件通知是怎么做的?
@静思学吧
我写过这类文章,网上也有很多,当然插件就更不用说了。
一直就想做一个archive页面,苦于没有没找方法,你的方法看起来挺好的,等下我试一试,有问题还需要博主您能帮忙解答。
@草根成春
慢慢折腾
[…] 此代码来自ZWW代码实现WordPress归档页面模板[WP原生函数篇] […]
我照着这个方法 也做了一遍 有效果 内容都正常
但也是 “展开/收缩” 这几个字不显示
您上面说 检查JQ代码处理 请问应该注意哪里。。。?
为啥它不显示呢。。。求指教 俺是小白。。
@魍魉
检查有没有多次加载jQery库
博主你好,按住你的方法成功了,跟你的一模一样,但是我想把浏览次数像评论一样加在后边,但不知道怎么搞了,尝试了好多次都没搞定~~谢谢····
@何敏杰
你是指插入 wp-postviews 插件的 the_views() 函数么?如果是的话,要给 the_views() 加参数,因为默认 the_views() 是直接输出浏览数,你要改为 the_views(0),或者 the_views('false')
@zwwooooo
你好,我是用http://blog.sina.com.cn/s/blog_9caa75a601017a2r.html这个方法实现浏览次数的,请问我该在后面如果加代码,麻烦写全一点,我不太懂代码,谢谢了哈~~
@何敏杰
这个直接就用 getPostViews() 吧,不行的话就是那个函数写的不是特别好,你可以尝试给那个 getPostViews 函数里面开头加个 global $post; 试试吧。
@zwwooooo
虽然没搞定,还是谢谢你,应该是那函数问题,另外我想把评论数取消,删除('. get_comments_number('0', '1', '%') .')这一段 好像还会显示评论,有些奇怪~~~
@何敏杰
你好像忘了,这个是加了“数据库缓存”方式的,也就是你直接改了代码直接刷新存档页面你是看不到效果的,你得发新文章或者删除文章才能看到新修改的效果,我想你那“浏览数”没效果是不是也是这个问题导致的?给个简单的测试方法给你:
修改了代码后,去后台随便把一篇文章用“快速编辑”设定为“草稿”,再设定为“发表”(这个有点类似删除文章动作和发表文章动作),然后刷新存档页面看看结果正不正确
@zwwooooo
真实缓存搞的鬼,现在没问题了,浏览数显示加的这个函数getPostViews(get_the_ID()) ,非常感谢哈~~
@zwwooooo
不过能实时更新缓存就好了,比如浏览此文章或者新增一个评论。~~·
@何敏杰
你知道为啥要缓存吗?因为访问时才去获取所有文章会让mysql很耗资源,除非你文章很少,如果是几年的文章一般会卡一下,而且还是单个人访问,如果几十人并发你的主机就挂了
如何忽略私密文章呢?
@金冈
这代码的函数虽然没有写 post_status 参数,但 private 类型的文章不会显示的啊,因为 post_status 默认是 publish。
http://beet.xy-c.net/archives/
自己随便弄了下,zww大看看,没写css(不会)
@甜菜
我又换了个主题,这方法行不通了
@甜菜
好吧,我又换回原来的主题了
@甜菜
因为用到了jquery,所以要注意兼容性
就这个,我待会也弄一个
问一下,为什么chrome下伸缩效果有点卡顿但是firefox和ie下不会。。
@Pete
为何那么多人这样说?是不是我改了js文件后因为缓存导致?我的ff、chrome都不会啊
@zwwooooo 我自己试试ie10和ff都不会,chrome就会。
@Pete
好像是js冲突
@Pete
为什么我的chrome没事