前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >WordPress文章归档页面分组和分页

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

作者头像
楚客追梦
发布2024-08-07 14:07:10
1300
发布2024-08-07 14:07:10
举报
文章被收录于专栏:网页杂谈

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

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

归档带分页

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

php

代码语言:javascript
复制
<?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

代码语言:javascript
复制
<?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……

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2024-06-15,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 归档带分页
  • 按年份分组,然后分页
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档