WordPress 归档页面是一个网站的历史内容存档,它允许用户浏览网站的过去内容。它的存在有以下几个意义:
- 为用户提供内容索引和历史参考:用户可以通过归档页面快速浏览网站的历史文章。
- 提供搜索引擎优化:可以帮助搜索引擎更好地理解网站的内容,从而提高网站在搜索引擎中的排名。
- 方便用户查找特定时间段的内容:用户可以通过归档页面快速找到特定日期或者月份的文章。
- 对网站管理员来说,可以帮助管理网站的内容,通过定期归档旧内容,可以保持网站的速度和效率。
归档带分页
在归档页面模板中间内容<?php the_content(); ?>
下加入下述代码:
<?php
//设置分页变量
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
//设置查询参数
$args = array(
'post_type' => array('post'),
'posts_per_page' => '80',
'paged' => $paged,
);
query_posts($args);
if (have_posts()) : while (have_posts()) : the_post();
?>
<div class="archive d-flex justify-content-between">
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<?php the_time('Y') ?>年<?php the_time('m') ?>月<?php the_time('d') ?>日
</div>
<? endwhile;endif;?>
<?php
wp_pages(); //分页函数,一般可复制主题目录index.php文件中的,每个主题可能不同,
?>
按年份分组,然后分页
如前文所述,一直想要一个按年份分组,然后再分页,之前折腾时要么如上文一样分页成功了但不显示年份,要么按年份分组成功,分页又混乱了。今天无意在一位博主那里看到了一个方法:
<?php
/**
* Template Name: Archives
**/
// 获取当前页面的标题和内容
global $post;
$post_title = $post->post_title;
$post_content = apply_filters('the_content', $post->post_content);
// 获取文章列表的分页和数据信息
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$posts_per_page = 15;
$post_data = sola_get_posts_by_year( $paged, $posts_per_page );
$post_list = $post_data[0] ?? false;
$max_page = $post_data[1] ?? 0;
// 开始显示模板
get_header(); ?>
<div id="content" class="site-content">
<div id="primary" class="s-container">
<div class="entry-content">
<!-- 输出当前页面的标题和写在编辑器里的内容 -->
<h1><?php echo esc_html($post_title); ?></h1>
<?php echo $post_content;?>
<!-- 输出文章列表 -->
<?php
if( is_array($post_list) && sizeof($post_list) ){
foreach( $post_list as $year => $post_items ){
echo '<h3 class="article-list__year">',esc_html($year),'</h3>';
echo '<div class="article-list">';
foreach( $post_items as $post_item ) {
sola_render_post_item( $post_item, 'article-list__item' );
}
echo '</div>';
}
}
?>
<?php sola_pagination($paged, $max_page); ?>
</div>
</div>
</div>
<!-- 自定义样式 -->
<style>
.article-list__year {
border-bottom: 2px solid #000;
}
.article-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
--spacing: 1em;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.article-list__item {
width: calc(50% - var(--spacing));
display: -webkit-box;
display: -ms-flexbox;
display: flex ;
margin-bottom: calc(var(--spacing ) * 1.5 );
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.article-list__item .post-title {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
line-height: 1.7;
}
.article-list__item .post-date {
color: #666;
font-size: 0.68em;
}
.page-numbers {
padding-left: 0;
}
.page-numbers li {
display: inline-block;
margin: 0 24px 12px 0;
}
@media (max-width: 481.9px){
.article-list__item{
width: 100%;
}
}
</style>
<?php
function sola_pagination( $paged = '', $max_page = '' ){
$big = 999999999; // need an unlikely integer
if( ! $paged )
$paged = get_query_var('paged');
if( ! $max_page )
$max_page = $wp_query->max_num_pages;
echo paginate_links( array(
'base' => str_replace($big, '%#%', esc_url(get_pagenum_link( $big ))),
'format' => '?paged=%#%',
'current' => max( 1, $paged ),
'total' => $max_page,
'mid_size' => 10,
'prev_text' => __('«'),
'next_text' => __('»'),
'type' => 'list'
) );
}
function sola_get_posts( $paged = 1, $posts_per_page = 20 ){
/** 获取该页面的标题和内容 */
global $post;
$post_title = $post->post_title;
$post_content = apply_filters('the_content', $post->post_content);
/** 用WP_Query获取posts */
$args = array(
'posts_per_page' => absint($posts_per_page),
'paged' => $paged,
'post_type' => array( 'post' ),
'post_status' => array( 'publish'),
'ignore_sticky_posts ' => false,
'orderby' => 'date',
'order' => 'DESC',
);
return new WP_Query( $args );
}
function sola_get_posts_by_year( $paged = 1, $posts_per_page = 20 ){
$post_items = array();
$post_list = sola_get_posts( $paged, $posts_per_page );
$max_page = $post_list->max_num_pages;
if ( $post_list->have_posts() ){
while ( $post_list->have_posts() ) : $post_list->the_post();
$year = date('Y', get_post_time());
$post_item = array(
'title' => get_the_title(),
'permalink' => get_permalink(),
'year' => $year,
'datetime' => get_the_date(),
);
$post_items[$year][] = $post_item;
endwhile;
}
wp_reset_postdata();
return [$post_items, $max_page];
}
function sola_render_post_item( $post_item , $item_class ){
if( $item_class ){
$item_class = 'class="'.esc_attr($item_class).'"';
}
?>
<div <?php echo $item_class; ?>>
<!-- 带连接的文章标题 -->
<span class="post-title">
<a href="<?php echo esc_url($post_item['permalink']) ?>"
title="<?php printf( '%s发布于%s', esc_attr($post_item['title']), esc_html( $post_item['datetime']) ); ?>"
target="_blank">
<?php echo esc_html($post_item['title']); ?>
</a>
</span>
<!-- 显示发布日期 -->
<span class="post-date"><?php echo esc_html( $post_item['datetime']); ?></span>
</div>
<?php
} ?>
<?php get_footer(); ?>
将需要调用的php函数放到结尾,方便查阅模板主体逻辑。分组原理是按照时间由晚到早的顺序查询posts,每页查询数量由变量$posts_per_page
决定,遍历查询结果时,提取文章的年份,并创建一个key为年份,value为属于该年的文章组成的数组,最后循环输出这个数组的内容即可。
方法来源: https://www.solagirl.net/wordpress-paged-article-list.html
为了保持和自己的主题一致,分页函数可以根据前面分页方法一样改为自己主题的,大家可以根据自己的需求扩展或精简。
至此,终于又解决了一个自己网站一直实现的一个功能,在此要特别感谢那位博主。Yeah……
一个页面便于搜索,分页便于展示。
回复 威言威语: 嗯,我更着重于展示,毕竟站内还有一个搜索功能嘛 😊
comments测试
归档页主要是为自己查询方便的,如果文章数多的话,可考虑按年、月折叠,不然页面太长了。
回复 maqingxi: 嗯嗯,所以整个分组和分页还是很有需要的。。。
越来越强悍了
回复 XI: 你说的问题还有几个没弄呢。。。
回复 老王: 再来一个:首页,小尺寸下,FRIENDS列表会错乱(没限定列数造成的).
回复 XI: 太多了,减少几个会不会好点。。。
回复 老王: 小尺寸.linkcat li flex 0 0 33%,中尺寸25%,大尺寸20%就比较完美。
回复 XI: 算了,直接简单点:手机模式下纵向一列。。。😀
回复 老王: 6,简单粗暴,效率高
回复 XI: 😂 你那里更新都折腾的那么好,唯一不好的就是不让别人说话。。。😜
我最近也在优化我的归档页面
回复 阿和: 我咋从没看到你有归档页面?😂
不过看到你的关于页面好像挂了。。。
回复 老王: 手机打开能看到的之前的朋友圈页面,我现在给整合成差不多归档页了。不过这会儿也挂了,上午把后台弄的传不上文件了,等晚上继续。
回复 阿和: 看到了,原来是时间轴啊。。。
回复 老王: 不是这个,这个我打算去掉了。手机点进去会有链接,我把朋友圈和日志全部整到一起了。
回复 阿和: 用手机去看了下,好像有点复杂。。。
回复 老王: 哈哈,是有点的,我把所有日志文章(除了分类为休闲和电脑知识的,因为不想要)和朋友圈全部归档到一起,可以按年份或标签查看。
配合标签归档,食用效果更佳~
回复 Kevin's Space: 现在这个我都还没弄明白,先就这样吧,后续腻了再折腾。。。