为Wordpress建立一个基于jQuery效果的存档页

发表于 更新于

从这里看来的文章：Create a Powerful jQuery-Powered Archives Page in Wordpress，觉得很好，实现效果可以看我的文章存档。

像Easy Archives、Clean Archives Reloaded等插件都可以实现类似的功能。然而用这个方法，只用几行代码就完全可以实现拉风的效果。而且这么简单的功能，就没用插件的必要了吧。

实现方法：

首先复制一个你所使用主题的single.php或是page.php，命名为archives.php，并也放到主题根目录下。然后开始创建存档页的模板：

1、声明这是个模板文件，名字是Custom Archives。

在archives.php的顶部添加：

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

2、替换content内容：

找到类似这样的函数：

1
<?php the_content(); ?>

替换为：

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
<pre><div class="archive">
<?php
// 声明变量
$previous_year = $year = 0;
$previous_month = $month = 0;
$ul_open = false;
// 获取文章
$myposts = get_posts('numberposts=-1&amp;orderby=post_date&amp;order=DESC');
?>
<?php foreach($myposts as $post) : ?>
	<?php
 	global $post;
	// Setup the post variables
	setup_postdata($post);
	$year = mysql2date('Y', $post->post_date);
	$month = mysql2date('n', $post->post_date);
	$day = mysql2date('j', $post->post_date);
	?>
	<?php if($year != $previous_year '' $month != $previous_month) : ?>
		<?php if($ul_open == true) : ?>
		</ul>
		<?php endif; ?>
		<h3><?php the_time('F Y'); ?></h3>
		<ul>
		<?php $ul_open = true; ?>
	<?php endif; ?>
	<?php $previous_year = $year; $previous_month = $month; ?>
	<li><span class="the_article"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></span></li>
<?php endforeach; ?>
	</ul>
</div></pre>

3、如果你的header已经加载过jQuery库，只需在footer里添加：

1
2
3
4
5
6
7
8
<pre><script type="text/javascript">
$(document).ready(function() {
  $('div.archive:eq(0)> ul').hide();
  $('div.archive:eq(0)> h3').click(function() {
    $(this).next().slideToggle('fast');
  });
});
</script></pre>

如果你还没加载过，还要在header.php里添加：

1
<script type="text/javascript" src="jquery.min.js"></script>

4、OK！然后就可以在wordpress后台新建一个页面，模板选用刚才建立的Custom Archives。看看刚才建立的页面，效果是不是出来了。

当然了，可能还需要一点CSS美化，否则太难看了。

1
2
3
4
.archive {margin:1em 1em;display: block;}
.archive h3{font-size:14px;margin:10px 0;color:#2970A6;}
.archive h3:hover{cursor:s-resize;color:#df0031;text-decoration:none;}
.archive li a{padding:0.5em 2em;}