Npcink Blog
切换菜单

WordPress 归档页面模板-WordPress 主题开发

制作归档页面

最后更新于
本页目录6 节

第一版

水煮鱼：

https://blog.wpjam.com/2007/10/25/how-to-create-an-archives-page/

如何创建归档页面

翻译自 Small Potato 的 How to Create An Archives Page ，有删节。这篇教程讲解如何创建一个列出所有分类和月份的归档页面，在进行前，先去看看 Small Potato 的归档页面的效果。

首先要确认是否需要自己来制作，绝大多数 WordPress 主题已经包含了额外的归档页面模板，一般主题作者都会把这个模板命名为 archives.php，这样可以和主题的默认归档文件 archive.php 区分开(区别在文件名末尾的 s)。

其次还得注意这个教程不是在任何情况下都适用，因为每个主题的结构都多多少少有些差异。

步骤:

1. 建立一个新文件并命名为 archives.php

2. 在文件里输入:

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

没有这几行代码的话就无法把这个文件作为新的归档模板来使用，确保不要漏过这步。

3. 添加循环(loop)、标题、分类列表和月份列表:

<?php while(have_posts()) : the_post(); ?>
<h2><?php the_title(); ?></h2>
<ul><?php wp_list_cats('sort_column=name&optioncount=1') ?></ul>
<ul><?php wp_get_archives('type=monthly&show_post_count=1') ?></ul>
<?php endwhile; ?>

4. 根据你当前主题的情况调整上面的代码。

5. 上传到你主题里文件夹里。

6. 创建一个新页面并选择刚上传的文件作为页面模板。

第二版

来源于：

https://zww.me/WordPress-archive-page-template-wp-primary-function-2014-edition.z-turn

效果展示：

http://wuguowei.com/WordPress/%E5%BD%92%E6%A1%A3

PS: 因为查询度有点大，所以有加数据库缓存，只在文章发表/修改时才会更新缓存数据，所以测试时，可以特意去后台点“快速编辑”文章然后点更新就可以更新缓存数据。

2016.12.07 新增“年份后面显示此年份文章数”版本：

/* Archives list v2014 by zwwooooo | https://zww.me */
function zww_archives_list() {
  if( !$output = get_option('zww_db_cache_archives_list') ){
    $output = '
全部展开/收缩 (注: 点击月份可以展开)


';
    $args = array(
      'post_type' => array('archives', 'post', 'zsay'),
      'posts_per_page' => -1, //全部 posts
      'ignore_sticky_posts' => 1 //忽略 sticky posts


    );
    $the_query = new WP_Query( $args );
    $posts_rebuild = array();
    $year = $mon = 0;
    while ( $the_query->have_posts() ) : $the_query->the_post();
      $post_year = get_the_time('Y');
      $post_mon = get_the_time('m');
      $post_day = get_the_time('d');
      if ($year != $post_year) $year = $post_year;
      if ($mon != $post_mon) $mon = $post_mon;
      $posts_rebuild[$year][$mon][] = '
'. get_the_time('d日: ') .''">'. get_the_title() .' ('. get_comments_number('0', '1', '%') .')
';
    endwhile;
    wp_reset_postdata();


    foreach ($posts_rebuild as $key_y => $y) {
      $y_i = 0; $y_output = '';
      foreach ($y as $key_m => $m) {
        $posts = ''; $i = 0;
        foreach ($m as $p) {
          ++$i; ++$y_i;
          $posts .= $p;
        }
        $y_output .= '
'. $key_m .' 月 ( '. $i .' 篇文章 )
'; //输出月份
        $y_output .= $posts; //输出 posts
        $y_output .= '
';
      }
      $output .= '
'. $key_y .' 年 ( '. $y_i .' 篇文章 )
'; //输出年份
      $output .= $y_output;
      $output .= '
';
    }


    $output .= '
';
    update_option('zww_db_cache_archives_list', $output);
  }
  echo $output;
}
function clear_db_cache_archives_list() {
  update_option('zww_db_cache_archives_list', ''); // 清空 zww_archives_list
}
add_action('save_post', 'clear_db_cache_archives_list'); // 新发表文章/修改文章时

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

/*
Template Name: Archives
*/
?>

在 archives.php 找到类似  content(); ?>，在其下面加入如下代码

 zww_archives_list(); ?>

然后新建页面（如叫：归档），选择模版为 Archives

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

wp_enqueue_script('jquery');

4. jQuery 代码：

这次玩了逐个下拉/收缩效果，想着很好，但我博客感觉效果一般，因为文章太多了...如果文章不多，可以把代码里面 2 个 (s-10<1)?0:s-10 改为 s，效果会好看点。

(function ($, window) {
  $(function() {
    var $a = $('#archives'),
      $m = $('.al_mon', $a),
      $l = $('.al_post_list', $a),
      $l_f = $('.al_post_list:first', $a);
    $l.hide();
    $l_f.show();
    $m.css('cursor', 's-resize').on('click', function(){
      $(this).next().slideToggle(400);
    });
    var animate = function(index, status, s) {
      if (index > $l.length) {
        return;
      }
      if (status == 'up') {
        $l.eq(index).slideUp(s, function() {
          animate(index+1, status, (s-10<1)?0:s-10);
        });
      } else {
        $l.eq(index).slideDown(s, function() {
          animate(index+1, status, (s-10<1)?0:s-10);
        });
      }
    };
    $('#al_expand_collapse').on('click', function(e){
      e.preventDefault();
      if ( $(this).data('s') ) {
        $(this).data('s', '');
        animate(0, 'up', 100);
      } else {
        $(this).data('s', 1);
        animate(0, 'down', 100);
      }
    });
  });
})(jQuery, window);

PS：不知道怎么写 js 文件然后调用的朋友就直接打开 header.php 并找到  wp_head(); ?>，在其下面加上

<script type="text/javascript">上面那段 jQuery 代码script>

因为是放在主题的 the_content() 下面，所以会默认使用主题写好的 h3 ul li 格式，如果要更加有特色，那么就要自己去修改 css 了

发现自己好久没玩 PC 游戏了，机器配置是个问题，空闲时间不多也是个问题，新游戏要花很多时间研究也是个问题，突然感觉学生时代多好啊……

第三版

这是一份 07 年的代码，推荐使用

https://www.weisay.com/blog/WordPress-archives.html

WordPress 的文章归档还是很有必要的，特别是文章多了之后，用归档可以很方便的找到想要找的文章，网上有很多的插件可以实现这个功能，不过我们喜欢折腾，那么就不用插件，而是使用代码来实现。

如果在配合 Jquery 的话，可以实现非常棒的效果。

下面我就说下简单的操作方法。

1、把下面的 archives_list_SHe 函数代码添加到主题的 functions.php 里面；

function archives_list_SHe() {
     global $wpdb,$month;
     $lastpost = $wpdb->get_var("SELECT ID FROM $wpdb->posts WHERE post_date <'" . current_time('mysql') . "' AND post_status='publish' AND post_type='post' AND post_password='' ORDER BY post_date DESC LIMIT 1");
     $output = get_option('SHe_archives_'.$lastpost);
     if(empty($output)){
         $output = '';
         $wpdb->query("DELETE FROM $wpdb->options WHERE option_name LIKE 'SHe_archives_%'");
         $q = "SELECT DISTINCT YEAR(post_date) AS year, MONTH(post_date) AS month, count(ID) as posts FROM $wpdb->posts p WHERE post_date <'" . current_time('mysql') . "' AND post_status='publish' AND post_type='post' AND post_password='' GROUP BY YEAR(post_date), MONTH(post_date) ORDER BY post_date DESC";
         $monthresults = $wpdb->get_results($q);
         if ($monthresults) {
             foreach ($monthresults as $monthresult) {
             $thismonth    = zeroise($monthresult->month, 2);
             $thisyear    = $monthresult->year;
             $q = "SELECT ID, post_date, post_title, comment_count FROM $wpdb->posts p WHERE post_date LIKE '$thisyear-$thismonth-%' AND post_date AND post_status='publish' AND post_type='post' AND post_password='' ORDER BY post_date DESC";
             $postresults = $wpdb->get_results($q);
             if ($postresults) {
                 $text = sprintf('%s %d', $month[zeroise($monthresult->month,2)], $monthresult->year);
                 $postcount = count($postresults);
                 $output .= '
' . $text . '  (' . count($postresults) . ' 篇文章)
' . "\n";
             foreach ($postresults as $postresult) {
                 if ($postresult->post_date != '0000-00-00 00:00:00') {
                 $url = get_permalink($postresult->ID);
                 $arc_title    = $postresult->post_title;
                 if ($arc_title)
                     $text = wptexturize(strip_tags($arc_title));
                 else
                     $text = $postresult->ID;
                     $title_text = 'View this post, "' . wp_specialchars($text, 1) . '"';
                     $output .= '
' . mysql2date('d日', $postresult->post_date) . ': ' . "$text";
                     $output .= ' (' . $postresult->comment_count . ')';
                     $output .= '
' . "\n";
                 }
                 }
             }
             $output .= '
' . "\n";
             }
         update_option('SHe_archives_'.$lastpost,$output);
         }else{
             $output = '
Sorry, no posts matched your criteria.
' . "\n";
         }
     }
     echo $output;
 }

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

/*
Template Name: archives
*/
?>

3、再然后找到类似 ，在其下面加入如下代码

<a id="expand_collapse" href="#">全部展开/收缩a>
<div id="archives"> archives_list_SHe(); ?>div>

进 wp 后台添加一新页面，在右侧栏模板选择 archives。

4、如果你的主题本身加载了 jQuery 库，那么继续把下面的 jQ 代码加上去，就会有滑动伸缩效果了。

<script type="text/javascript">
    jQuery(document).ready(function() {
 $('#expand_collapse,.archives-yearmonth').css({cursor:"s-resize"});
 $('#archives ul li ul.archives-monthlisting').hide();
 $('#archives ul li ul.archives-monthlisting:first').show();
 $('#archives ul li span.archives-yearmonth').click(function(){$(this).next().slideToggle('fast');returnfalse;});
 $('#expand_collapse').toggle(
 function(){
 $('#archives ul li ul.archives-monthlisting').slideDown('fast');
 },
 function(){
 $('#archives ul li ul.archives-monthlisting').slideUp('fast');
 });
 });
script>

css 样式可以通过 #archive 来定义，ok，搞定。

本文固定链接: https://www.weisay.com/blog/WordPress-archives.html | 威言威语

WordPress 中如何制作页面？