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

制作归档页面

第一版

水煮鱼:

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. 创建一个新页面并选择刚上传的文件作为页面模板。

第二版

来源于:

WordPress 归档页面模板[WP原生函数实现2014版]

效果展示:

归档

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中如何制作页面?

WordPress主题开发: 制作文章页面single.php

058
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论