WordPress文章归档页面分组和分页

WordPress 归档页面是一个网站的历史内容存档,它允许用户浏览网站的过去内容。它的存在有以下几个意义:

  • 为用户提供内容索引和历史参考:用户可以通过归档页面快速浏览网站的历史文章。
  • 提供搜索引擎优化:可以帮助搜索引擎更好地理解网站的内容,从而提高网站在搜索引擎中的排名。
  • 方便用户查找特定时间段的内容:用户可以通过归档页面快速找到特定日期或者月份的文章。
  • 对网站管理员来说,可以帮助管理网站的内容,通过定期归档旧内容,可以保持网站的速度和效率。

归档带分页

在归档页面模板中间内容<?php the_content(); ?>下加入下述代码:

php
<br />
<?php<br />
  //设置分页变量<br />
  $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;</p>
<p>  //设置查询参数<br />
  $args = array(<br />
      'post_type' => array('post'),<br />
      'posts_per_page' => '80',<br />
      'paged' => $paged,<br />
      );<br />
  query_posts($args);</p>
<p>  if (have_posts()) : while (have_posts()) : the_post();<br />
?><br />
  <div class="archive d-flex justify-content-between"><br />
    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><br />
    <?php the_time('Y') ?>年<?php the_time('m') ?>月<?php the_time('d') ?>日<br />
  </div><br />
<? endwhile;endif;?></p>
<p><?php<br />
  wp_pages(); //分页函数,一般可复制主题目录index.php文件中的,每个主题可能不同,<br />
?><br />

按年份分组,然后分页

如前文所述,一直想要一个按年份分组,然后再分页,之前折腾时要么如上文一样分页成功了但不显示年份,要么按年份分组成功,分页又混乱了。今天无意在一位博主那里看到了一个方法:

php
<br />
<?php<br />
/**<br />
 * Template Name: Archives<br />
**/</p>
<p>// 获取当前页面的标题和内容<br />
global $post;<br />
$post_title   = $post->post_title;<br />
$post_content = apply_filters('the_content', $post->post_content);</p>
<p>// 获取文章列表的分页和数据信息<br />
$paged          = (get_query_var('paged')) ? get_query_var('paged') : 1;<br />
$posts_per_page = 15;<br />
$post_data      = sola_get_posts_by_year( $paged, $posts_per_page );<br />
$post_list      = $post_data[0] ?? false;<br />
$max_page       = $post_data[1] ?? 0;</p>
<p>// 开始显示模板<br />
get_header(); ?><br />
  <div id="content" class="site-content"><br />
    <div id="primary" class="s-container"></p>
<p>      <div class="entry-content"></p>
<p>        <!-- 输出当前页面的标题和写在编辑器里的内容 --><br />
        <h1><?php echo esc_html($post_title); ?></h1></p>
<p>        <?php echo $post_content;?></p>
<p>        <!-- 输出文章列表 --><br />
        <?php<br />
        if( is_array($post_list) && sizeof($post_list) ){</p>
<p>          foreach( $post_list as $year => $post_items ){</p>
<p>            echo '<h3 class="article-list__year">',esc_html($year),'</h3>';<br />
            echo '<div class="article-list">';</p>
<p>            foreach( $post_items as $post_item ) {<br />
              sola_render_post_item( $post_item, 'article-list__item' );<br />
            }<br />
            echo '</div>';</p>
<p>          }</p>
<p>        }<br />
        ?></p>
<p>        <?php sola_pagination($paged, $max_page); ?></p>
<p>      </div><br />
    </div><br />
  </div></p>
<p>  <!-- 自定义样式 --><br />
  <style><br />
    .article-list__year {<br />
        border-bottom: 2px solid #000;<br />
    }</p>
<p>    .article-list {<br />
        display: -webkit-box;<br />
        display: -ms-flexbox;<br />
        display: flex;<br />
        -ms-flex-wrap: wrap;<br />
            flex-wrap: wrap;<br />
        --spacing: 1em;<br />
        -webkit-box-pack: justify;<br />
            -ms-flex-pack: justify;<br />
                justify-content: space-between;<br />
    }</p>
<p>    .article-list__item {<br />
        width: calc(50% - var(--spacing));<br />
        display: -webkit-box;<br />
        display: -ms-flexbox;<br />
        display: flex ;<br />
        margin-bottom: calc(var(--spacing ) * 1.5 );<br />
        -webkit-box-orient: vertical;<br />
        -webkit-box-direction: normal;<br />
            -ms-flex-direction: column;<br />
                flex-direction: column;<br />
    }</p>
<p>    .article-list__item .post-title {<br />
        -webkit-box-ordinal-group: 3;<br />
            -ms-flex-order: 2;<br />
                order: 2;<br />
        line-height: 1.7;<br />
    }</p>
<p>    .article-list__item .post-date {<br />
        color: #666;<br />
        font-size: 0.68em;<br />
    }</p>
<p>    .page-numbers {<br />
        padding-left: 0;<br />
    }</p>
<p>    .page-numbers li {<br />
        display: inline-block;<br />
        margin: 0 24px 12px 0;<br />
    }<br />
    @media (max-width: 481.9px){<br />
      .article-list__item{<br />
        width: 100%;<br />
      }<br />
    }<br />
  </style></p>
<p><?php<br />
function sola_pagination( $paged = '', $max_page = '' ){<br />
    $big = 999999999; // need an unlikely integer<br />
    if( ! $paged )<br />
        $paged = get_query_var('paged');<br />
    if( ! $max_page )<br />
        $max_page = $wp_query->max_num_pages;</p>
<p>    echo paginate_links( array(<br />
        'base'       => str_replace($big, '%#%', esc_url(get_pagenum_link( $big ))),<br />
        'format'     => '?paged=%#%',<br />
        'current'    => max( 1, $paged ),<br />
        'total'      => $max_page,<br />
        'mid_size'   => 10,<br />
        'prev_text'  => __('«'),<br />
        'next_text'  => __('»'),<br />
        'type'       => 'list'<br />
    ) );<br />
}</p>
<p>function sola_get_posts( $paged = 1, $posts_per_page = 20 ){<br />
  /** 获取该页面的标题和内容 */<br />
  global $post;<br />
  $post_title = $post->post_title;<br />
  $post_content = apply_filters('the_content', $post->post_content);</p>
<p>  /** 用WP_Query获取posts */<br />
  $args = array(<br />
    'posts_per_page'       => absint($posts_per_page),<br />
    'paged'                => $paged,<br />
    'post_type'            => array( 'post' ),<br />
    'post_status'          => array( 'publish'),<br />
    'ignore_sticky_posts ' => false,<br />
    'orderby'              => 'date',<br />
    'order'                => 'DESC',<br />
  );</p>
<p>  return new WP_Query( $args );<br />
}</p>
<p>function sola_get_posts_by_year( $paged = 1, $posts_per_page = 20 ){</p>
<p>  $post_items = array();<br />
  $post_list = sola_get_posts( $paged, $posts_per_page );<br />
  $max_page = $post_list->max_num_pages;</p>
<p>  if ( $post_list->have_posts() ){<br />
    while ( $post_list->have_posts() ) : $post_list->the_post();</p>
<p>      $year = date('Y', get_post_time());<br />
      $post_item = array(<br />
        'title'     => get_the_title(),<br />
        'permalink' => get_permalink(),<br />
        'year'      => $year,<br />
        'datetime'  => get_the_date(),<br />
      );</p>
<p>      $post_items[$year][] = $post_item;</p>
<p>    endwhile;<br />
  }</p>
<p>  wp_reset_postdata();</p>
<p>  return [$post_items, $max_page];<br />
}</p>
<p>function sola_render_post_item( $post_item , $item_class ){<br />
  if( $item_class ){<br />
    $item_class = 'class="'.esc_attr($item_class).'"';<br />
  }<br />
  ?><br />
  <div <?php echo $item_class; ?>><br />
    <!-- 带连接的文章标题 --><br />
    <span class="post-title"><br />
      <a href="<?php echo esc_url($post_item['permalink']) ?>"<br />
         title="<?php printf( '%s发布于%s', esc_attr($post_item['title']), esc_html( $post_item['datetime']) ); ?>"<br />
         target="_blank"><br />
         <?php echo esc_html($post_item['title']); ?><br />
      </a><br />
    </span><br />
    <!-- 显示发布日期 --><br />
    <span class="post-date"><?php echo esc_html( $post_item['datetime']); ?></span><br />
  </div></p>
<p>  <?php<br />
} ?><br />
<?php get_footer(); ?><br />

将需要调用的php函数放到结尾,方便查阅模板主体逻辑。分组原理是按照时间由晚到早的顺序查询posts,每页查询数量由变量$posts_per_page决定,遍历查询结果时,提取文章的年份,并创建一个key为年份,value为属于该年的文章组成的数组,最后循环输出这个数组的内容即可。

方法来源: https://www.solagirl.net/wordpress-paged-article-list.html

为了保持和自己的主题一致,分页函数可以根据前面分页方法一样改为自己主题的,大家可以根据自己的需求扩展或精简。

至此,终于又解决了一个自己网站一直实现的一个功能,在此要特别感谢那位博主。Yeah……

那年 • 今日
老王于2024-06-15 20:41发布在网页设计
楚客追梦情难休,万里追寻志未酬。

赞助 点赞 0

威言威语, XI, 阿和, maqingxi, Kevin's等人对本文发表了22条热情洋溢的评论。
  • 一个页面便于搜索,分页便于展示。

    1. 老王作者

      嗯,我更着重于展示,毕竟站内还有一个搜索功能嘛 😊

  • comments测试

  • 归档页主要是为自己查询方便的,如果文章数多的话,可考虑按年、月折叠,不然页面太长了。

    1. 老王作者

      嗯嗯,所以整个分组和分页还是很有需要的。。。

  • 越来越强悍了

    1. 老王作者

      你说的问题还有几个没弄呢。。。 ::wb:wl::

      1. 再来一个:首页,小尺寸下,FRIENDS列表会错乱(没限定列数造成的).

        1. 老王作者

          太多了,减少几个会不会好点。。。 ::wb:wl::

          1. 小尺寸.linkcat li flex 0 0 33%,中尺寸25%,大尺寸20%就比较完美。

            1. 老王作者

              算了,直接简单点:手机模式下纵向一列。。。😀

              1. 6,简单粗暴,效率高

                1. 老王作者

                  😂 你那里更新都折腾的那么好,唯一不好的就是不让别人说话。。。😜

  • 阿和博士生
    次席

    我最近也在优化我的归档页面

    1. 老王作者

      我咋从没看到你有归档页面?😂
      不过看到你的关于页面好像挂了。。。 ::wb:wl::

      1. 手机打开能看到的之前的朋友圈页面,我现在给整合成差不多归档页了。不过这会儿也挂了,上午把后台弄的传不上文件了,等晚上继续。

        1. 老王作者

          看到了,原来是时间轴啊。。。

          1. 不是这个,这个我打算去掉了。手机点进去会有链接,我把朋友圈和日志全部整到一起了。

            1. 老王作者

              用手机去看了下,好像有点复杂。。。

              1. 哈哈,是有点的,我把所有日志文章(除了分类为休闲和电脑知识的,因为不想要)和朋友圈全部归档到一起,可以按年份或标签查看。

  • 配合标签归档,食用效果更佳~

    1. 老王作者

      现在这个我都还没弄明白,先就这样吧,后续腻了再折腾。。。 ::wb:wl::

  • 头像预览

    发表评论

    您的邮箱地址不会被公开, 必填项已用 * 标注

    找回密码

    请输入您的邮箱地址,我们将向您发送重置密码的链接。

    您好,朋友!

    请输入相关信息,以便我们提供更优质的服务!

    欢迎回来!