18
12 月

WordPress 归档页面制作

WordPress 归档页面制作

网站制作归档页,用于向访客展示内容,还可以向搜索引擎示好。WordPress 归档页的实现方法非常之多,可以插件实现,也可以用php显示的查询数据然后格式化输出。本博改版后就重新修改一下该文,老方法自己都没看懂,现在通过get_posts()函数获取所有文章,然后格式化输出。

模板代码:

下面是我的模板代码,根据模板不同不能硬套。

本站演示

<?php
/*
Template Name: Archives
*/
?>
<?php get_header(); ?>

<article class="post archives clearfix">
		<?php 
		$totalposts = get_posts('numberposts=200&offset=0');//获取200篇文章
		$yearNum = 0;//初始化
		/* 遍历文章,格式化输出 */
		foreach($totalposts as $post) : 
			$dateYear = get_the_time('Y');//获取文章年份 
			if($dateYear != $yearNum)://文章年份与上一篇不同
			echo $yearNumCount==0?'<h2 class="yearNum yeartop">'.$dateYear.'</h2><ul style="display:block">':'</ul><h2 class="yearNum">'.$dateYear.'</h2><ul>';//不同就输出新年份
			endif;
			$yearNum = $dateYear;
			$yearNumCount++;
			?> 
			<li> <?php the_time('m-d') ?> : <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>//格式化输出
		<?php endforeach; ?> 
		</ul>
<?php while(have_posts()) : the_post(); ?> 
</article>
<?php comments_template(); ?> 
<?php endwhile; ?> 

<?php get_footer(); ?>

jQuery脚本

<script>
jQuery(document).ready(function($){
	/* 归档页 */
	$(".yearNum").on("click", function(){
		$(this).next().slideToggle();
		$(this).toggleClass("closemenu");
	});
});
</script>

CSS样式化

这个看个人喜好来,配合jQuery脚本实现合理的交互逻辑就可以,我自己先隐藏除了当前年份的其他所有文章,然后点击展开

WordPress 归档页面制作

新建页面,模板选择 Archives 即可,内容直接空白

没有评论