【WordPress】1ページ目と2ページ目以降の表示件数が異なる場合のページャーを実装

電脳備忘録

本記事のソースコードの利用によって生じた損害について、当方は一切の責任を負いません。ご自身の判断と責任のもとで参照・ご利用ください。

この記事は最終更新から2年以上経過しています。

最初のページは最新記事を1件と最新記事を除く以降の記事6件の計7件を表示、2ページ目以降は以降の記事を6件ずづ表示するようにページャーを実装したときのメモ。

<div class="main-contents">
  <div class="articles">
  <?php
// 管理画面で設定した「1ページに表示する最大投稿数」の取得
$per_page = 6; // 2ページ目以降の表示件数を設定
// 現在表示しているページ数の取得
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

// 最新1件の情報を取得
$latest_args = array(
    //'numberposts' => 1
    'posts_per_page' => 1,
    'paged' => 1,
    'orderby' => 'date',
    'order' => 'DESC'
);
$latest_post_query = new WP_Query($latest_args);

// 最新記事のIDを取得
$latest_post_id = null;
if ($latest_post_query->have_posts()) {
  while($latest_post_query->have_posts()) {
    $latest_post_query->the_post();
    $latest_post_id = get_the_ID();
    wp_reset_postdata();
  }
}

// 1ページ目は最新記事 + その他記事6件
if ($paged == 1) {
    $posts_per_page = 6;
    $offset = 0;
} else {
    // 2ページ目以降は6件表示
    $posts_per_page = 6;
    $offset = 6 * ($paged - 1) + 1; // 1ページ目の最新記事を考慮
}

// その他記事を取得
$other_args = array(
    'post_type' => 'post',
    'posts_per_page' => $posts_per_page,
    'paged' => $paged,
    'offset' => $offset,
    'post__not_in' => array($latest_post_id), // 最新記事を除外
    'ignore_sticky_posts' => 1,
    'meta_query' => array(
        'relation' => 'OR',
        array(
          'key'   => 'guest_flg',
          'value' => 'guest',
          'compare' => 'LIKE',
        ),
        array(
          'key'   => 'guest_flg',
          'value' => 'client',
          'compare' => 'LIKE',
        )
      ),
      'orderby' => array(
        'meta_value' => 'ASC',
        'date' => 'DESC'
    )
);

$other_query = new WP_Query($other_args);

// クエリのループ
if ($paged == 1) {
    // 最新記事の表示
    if ($latest_post_id) {
        $latest_post_query->the_post();
        echo '<span class="section-title">新着</span>';
        echo '<div class="latest-wrapper">';
        $permalink = get_permalink();
        echo '<a href="' . $permalink . '">';
        echo '<div class="description">';
        echo '<div class="header">';
        $category = get_the_category();
        $cat_name = $category[0]->cat_name;
        echo '<span class="category">' . $cat_name . '</span>';
        echo '</div><!--/.header-->';
        if (mb_strlen(get_the_content(), 'UTF-8') > 140) {
            $content = str_replace('\n', '', mb_substr(strip_tags(get_the_content()), 0, 140, 'UTF-8'));
            $summary = $content . '...';
        } else {
            $summary = str_replace('\n', '', strip_tags(get_the_content()));
        }
        echo '<p>' . $summary . '</p>';
        echo '</div><!--/.description-->';
        echo '<div class="thumbnail">';
        $entry_image = get_field('entry_image');
        echo '<img src="' . $entry_image . '" alt="' . get_the_title() . '">';
        echo '</div>';
        echo '</a>';
        echo '</div>';
        wp_reset_postdata();
    }
}

if ($other_query->have_posts()) {
    echo '<ul>';
    while ($other_query->have_posts()) {
        $other_query->the_post();
        $permalink = get_permalink();
        echo '<li>';
        echo '<a href="' . $permalink . '">';
        echo '<div class="description">';
        echo '<div class="header">';
        $guest_flg = get_post_meta(get_the_ID(), 'guest_flg', true);
        if (is_array($guest_flg)) {
            $guest_flg = reset($guest_flg);
        }
        $category = get_the_category();
        $cat_name = $category[0]->cat_name;
        echo '<span class="category">' . $cat_name . '</span>';
        echo '</div><!--/.header-->';
        if (mb_strlen(get_the_content(), 'UTF-8') > 140) {
            $content = str_replace('\n', '', mb_substr(strip_tags(get_the_content()), 0, 140, 'UTF-8'));
            $summary = $content . '...';
        } else {
            $summary = str_replace('\n', '', strip_tags(get_the_content()));
        }
        echo '<p>' . $summary . '</p>';
        echo '</div><!--/.description-->';
        echo '<div class="thumbnail">';
        $entry_image = get_field('entry_image');
        echo '<img src="' . $entry_image . '" alt="' . get_the_title() . '">';
        echo '</div>';
        echo '</a>';
        echo '</li>';
    }
    echo '</ul>';
}

// ページネーション
echo '<div class="pager-nav-wrapper">';
echo '<div class="pager-nav">';
$paginate_base = get_pagenum_link(1);
$paginate_format = '';

if (strpos($paginate_base, '?') || !get_option('permalink_structure')) {
    $paginate_format = '';
    $paginate_base = add_query_arg('paged', '%#%');
} else {
    $paginate_format = (substr($paginate_base, -1, 1) == '/' ? '' : '/') . user_trailingslashit('page/%#%/', 'paged');
    $paginate_base .= '%_%';
}

echo paginate_links(array(
    'base'      => $paginate_base,
    'format'    => $paginate_format,
    'prev_text' => __('<'),
    'next_text' => __('>'),
    'total'     => $other_query->max_num_pages,
    'mid_size'  => 5,
    'current'   => ($paged ? $paged : 1),
));

wp_reset_postdata();
echo '</div>';
echo '</div><!--/.pager-nav-wrapper-->';
?>
</div><!--/.articles--> 
</div><!--/.main-contents-->

意図したとおりに動いたのでこれでよしとします。

0%