性价比最高的香港ASP、PHP主机提供商
做网站,就上凡科建站

WordPress添加文章归档页面

Loading
0
Comodo SLL证书促销 - 免费ssl证书申请_ssl证书购买_ev ssl证书_https证书购买 - GDCA_数安时代

本文要讲的文章归档,其实就是将所有文章按照年月日归档,说白了就是一个简单的网站文章地图。方法来自 zwwooooo 大师的《代码实现WordPress归档页面模板[WP原生函数篇] 》。WordPress大学目前已经用上,效果如下:

wpdaxue.com-201211114

想看实际演示的,请访问 文章存档

折腾功能:代码实现WordPress归档页面模板[WP原生函数篇]

原创作者:zwwooooo

特点:

1. 按照年份、月份显示文章列表

2. 显示每月的文章数量(需要配合及jQuery)

3. 显示每篇文章的评论数

4. 使用 WordPress 原生函数实现数据调用

5. 这个存档函数会在数据库生成一个表 zww_archives_list 来做缓存,只在发表/修改文章时才更新,减少数据库查询。

6. 即使不使用第5点的数据库缓存功能也比以前的直接 SQL 语句省资源。

制作步骤:

1. 把下面的函数扔到所用主题的 functions.php 文件最后一个 ?> 的前面:(注意:因为有中文,所以要把 functions.php 文件转换为 UTF8 无 BOM 格式,不然中文会乱码)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
/* 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'); // 新发表文章/修改文章时

2. 复制一份主题的 page.php 更名为 archives.php,然后在最顶端加入:

1
2
3
4
5
<?php
/*
Template Name: archives
*/
?>

然后找到类似 <?php content(); ?>,在其下面加入如下代码

1
<?php zww_archives_list(); ?>

进wp后台添加一新页面,在右侧栏【页面属性】模板选择 archives

3. 给主题加载 jQuery 库,没有加载的,把下面这句扔到 functions.php 里面就行了。

1
wp_enqueue_script('jquery');

或者在header.php中添加下面的代码:

1
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.4.2/jquery.min.js"></script>

4. jQuery 效果代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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结构:

1
2
3
4
5
6
7
8
9
10
11
<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>

到这里就OK了。感谢 zwwooooo大师!

支付宝扫码打赏 微信打赏

如果文章对你有帮助,欢迎点击上方按钮打赏作者

MetInfo | 最适合企业网站建设的cms系统

关于 倡萌

一个疯狂的 WordPress 爱好者,喜欢折腾 WordPress 主题,分享 WordPress 资源。如果你也喜欢 WordPress,欢迎和我一起交流!

精彩推荐

WordPress调用某段时间评论最多的文章

用 Download Info Page 为 WordPress 添加下载中转页

用 Download Info Page 为 WordPress 添加下载中转页

26 条评论

  1. 试试。不知道这个对SEO好不好

  2. 除了Chrome其他浏览器都无法伸缩啊。。。

  3. 那个function代码好像病毒一样,不管怎么修改都是现实一样 :mad: ,好恐怖,只要最后输出时$output,就立马现实成那样的列表,一点也修改不了,郁闷死了

  4. 大神能不能制作一个完整的时间轴归档页面教程

  5. 如果,我想按照网站的目录来分类怎么办?如果是博客网站,按照时间归档木问题,但是如果是用wordpress做了CMS网站,按照目录来分类就是最好的选择了,现在我的困难是,如何按照目录的层级结构去做分类页面,这里不好贴图,具体描述请知乎搜索“wordpress如何按照目录层次依次输出文章列表?”求高人回答!感谢!

  6. 这个如果要让他支持自定义文章类型,应该怎么改造functions.php部分呢

发表评论