改造する

Release |

WordPressでの前後の記事へのページネーション実装方法

WordPressでの前後の記事へのページネーション実装方法

この記事ではシングルページで前後の記事へのページネーション （ページャー）を実装する方法について解説します。

今回は下記に分けて解説するので、お好きな方法で実装してみてください！

  1. WordPress関数を利用する方法
    • previous_post_link() / next_post_link()
    • the_post_navigation()
    • get_adjacent_post()
  2. 投稿IDから判断して自作する方法

WordPress関数を利用する

ここでは前後の記事を取得できるWordPress関数を3つ解説します。

previous_post_link / next_post_link

<?php previous_post_link(); ?>
<?php next_post_link(); ?>

出力されるコード

« <a href="前の記事のリンク" rel="prev">前の記事タイトル</a>
<a href="次の記事のリンク" rel="next">次の記事タイトル</a> »

記事のタイトルと矢印が自動で表示されます。

または以下でも同じコードが出力されます。

<?php previous_post_link('« %link', '%title'); ?>
<?php next_post_link('%link »', '%title'); ?>

%link が前（次）の記事のリンク、%title が前（次）の記事のタイトルを表示するパラメータとなっています。

表示されるテキストを変更する

第2引数に任意のテキストを設定することで、表示されるテキストを変更することができます。

<?php previous_post_link('%link', '前の記事へ'); ?>
<?php next_post_link('%link', '次の記事へ'); ?>

出力されるコード

<a href="前の記事のリンク" rel="prev">前の記事へ</a>
<a href="次の記事のリンク" rel="next">次の記事へ</a>

同じカテゴリの前後の記事を表示する

第3引数に「true」を設定することで、同じカテゴリー内での前後の記事を表示することができます。

<?php previous_post_link('%link', '前の記事へ', true); ?>
<?php next_post_link('%link', '次の記事へ', true); ?>

出力されるコード

<a href="同カテゴリの前の記事のリンク" rel="prev">前の記事へ</a>
<a href="同カテゴリの次の記事のリンク" rel="next">次の記事へ</a>

特定のカテゴリを除外する

第4引数にカテゴリ（ターム）IDを記述することで、そのカテゴリを含む記事を除外することができます。

<?php previous_post_link('%link', '前の記事へ', true, '10'); ?>
<?php next_post_link('%link', '次の記事へ', true, '10'); ?>

出力されるコード

<a href="前の記事のリンク" rel="prev">前の記事へ</a>
<a href="次の記事のリンク" rel="next">次の記事へ</a>

除外したいカテゴリが複数ある場合は、配列にするかカンマで区切ります。

<?php previous_post_link('%link', '前の記事へ', true, '10, 11, 15'); ?>
<?php next_post_link('%link', '次の記事へ', true, array(10, 11, 15)); ?>

記事がない場合は非表示にする

条件分岐を使って、前後の記事がない場合は非表示にすることができます。

<?php 
if (get_previous_post()) {
	previous_post_link('%link', '前の記事へ');
}
?>

<?php 
if (get_next_post()) {
	next_post_link('%link', '次の記事へ');
}
?>

詳しくは関数リファレンスをご確認ください。

previous_post_link() | Function | WordPress Developer Resources

Displays the previous post link that is adjacent to the current post.

https://developer.wordpress.org/reference/functions/previous_post_link/

next_post_link() | Function | WordPress Developer Resources

Displays the next post link that is adjacent to the current post.

https://developer.wordpress.org/reference/functions/next_post_link/

the_post_navigation

<?php the_post_navigation(); ?>

出力されるコード

<nav class="navigation post-navigation" aria-label="投稿">
  <h2 class="screen-reader-text">投稿ナビゲーション</h2>
  <div class="nav-links">
    <div class="nav-previous">
      <a href="前の記事のリンク" rel="prev">前の記事タイトル</a>
    </div>
    <div class="nav-next">
      <a href="次の記事のリンク" rel="next">次の記事タイトル</a>
    </div>
  </div>
</nav>

出力をカスタマイズする

用意されているパラメータを使って、表示するテキストや除外する記事など、カスタマイズすることができます。

<?php 
the_post_navigation(
  array(
    'next_text' => '<p class="meta-nav"><span>次の記事</span></p><p class="post-title">%title</p>',
    'prev_text' => '<p class="meta-nav"><span>前の記事</span></p><p class="post-title">%title</p>',
    'in_same_term' => true,
    'excluded_terms' => '13, 14'
    'taxonomy' => 'custom_cat',
    'screen_reader_text' => ' '
  )
);
?>

用意されているパラメーターは以下です。

キー初期値解説
prev_text%titleリンクの文字列
next_text%titleリンクの文字列
in_same_termfalsetrueにすると同じターム内が対象となる。
excluded_termsNULL除外したいタームIDを指定する。
複数指定する場合は、配列かカンマ区切りで行う。
taxonomycategoryタクソノミーの名前を指定。’in_the_same_term’がtrueの場合のみ有効。
screen_reader_textPost navigationスクリーンリーダー用テキスト

詳しくは関数リファレンスをご確認ください。

the_post_navigation() | Function | WordPress Developer Resources

Displays the navigation to next/previous post, when applicable.

https://developer.wordpress.org/reference/functions/the_post_navigation/

get_adjacent_post

<?php get_adjacent_post(); ?>

この関数は隣接する投稿の情報を取得できます。

ただ、引数を指定しなければ1つ前の記事 ( 古い記事 ) の情報が取得されているので、引数を使い前後の振り分けを行い記事を取得します。

<?php
$prev_post = get_adjacent_post(false, '', true); // 前の記事
$next_post = get_adjacent_post(false, '', false); // 次の記事
if ($prev_post or $next_post):
?>
<ul>
  <?php if ($prev_post): ?>
    <li><a href="<?php echo get_permalink($prev_post->ID); ?>"><?php echo get_the_title($prev_post->ID); ?></a></li>
  <?php else: ?>
    <li>前の記事はありません</li>
  <?php endif; ?>
  <?php if ($next_post): ?>
    <li><a href="<?php echo get_permalink($next_post->ID); ?>"><?php echo get_the_title($next_post->ID); ?></a></li>
  <?php else: ?>
    <li>次の記事はありません</li>
  <?php endif; ?>
</ul>
<?php endif; ?>

出力されるコード

<ul>
  <li><a href="前の記事のリンク">前の記事タイトル</a></li>
  <li><a href="次の記事のリンク">次の記事タイトル</a></li>
</ul>

第3引数に「true」を設定することで前の記事、「false」を設定することで次の記事を取得することができます。デフォルトは「true」です。

同じカテゴリの前後の記事を表示する

第1引数に「true」を設定することで同じタクソノミーに含まれているか、第4引数にタクソノミーを指定すれば、同じタクソノミーに含まれているかを指定することができます。

第1引数のデフォルトは「false」、第4引数のデフォルトは「'category'」です。

<?php
$prev_post = get_adjacent_post(true, '', true, 'category');
$next_post = get_adjacent_post(true, '', false, 'category');
if( $prev_post or $next_post ):
?>
<ul>
  <?php if ($prev_post): ?>
    <li><a href="<?php echo get_permalink($prev_post->ID); ?>"><?php echo get_the_title($prev_post->ID); ?></a></li>
  <?php else: ?>
    <li>前の記事はありません</li>
  <?php endif; ?>
  <?php if ($next_post): ?>
    <li><a href="<?php echo get_permalink($next_post->ID); ?>"><?php echo get_the_title($next_post->ID); ?></a></li>
  <?php else: ?>
    <li>次の記事はありません</li>
  <?php endif; ?>
</ul>
<?php endif; ?>

出力されるコード

<ul>
  <li><a href="同カテゴリの前の記事のリンク">同カテゴリの前の記事タイトル</a></li>
  <li><a href="同カテゴリの次の記事のリンク">同カテゴリの次の記事タイトル</a></li>
</ul>

特定のカテゴリを除外する

第2引数にカテゴリ（ターム）IDを記述することで、そのカテゴリを含む記事を除外することができます。

<?php
$prev_post = get_adjacent_post(false, '6', true);
$next_post = get_adjacent_post(false, '6', false);
if( $prev_post or $next_post ):
?>
<ul>
  <?php if ($prev_post): ?>
    <li><a href="<?php echo get_permalink($prev_post->ID); ?>"><?php echo get_the_title($prev_post->ID); ?></a></li>
  <?php else: ?>
    <li>前の記事はありません</li>
  <?php endif; ?>
  <?php if ($next_post): ?>
    <li><a href="<?php echo get_permalink($next_post->ID); ?>"><?php echo get_the_title($next_post->ID); ?></a></li>
  <?php else: ?>
    <li>次の記事はありません</li>
  <?php endif; ?>
</ul>
<?php endif; ?>

出力されるコード

<ul>
  <li><a href="前の記事のリンク">前の記事タイトル</a></li>
  <li><a href="次の記事のリンク">次の記事タイトル</a></li>
</ul>

サムネイルも表示させる

前後の記事IDが取得できるので、それを利用してサムネイルを表示させることもできます。

<?php
$prev_post = get_adjacent_post(false, '', true);
$next_post = get_adjacent_post(false, '', false);
if( $prev_post or $next_post ):
?>
<ul>
  <?php if ($prev_post): ?>
    <li>
      <a href="<?php echo get_permalink($prev_post->ID); ?>">
        <?php echo get_the_post_thumbnail($prev_post->ID, 'thumbnail') ?>
        <?php echo get_the_title($prev_post->ID); ?>
      </a>
    </li>
  <?php else: ?>
    <li>前の記事はありません</li>
  <?php endif; ?>
  <?php if ($next_post): ?>
    <li>
      <a href="<?php echo get_permalink($next_post->ID); ?>">
        <?php echo get_the_post_thumbnail($next_post->ID, 'thumbnail') ?>
        <?php echo get_the_title($next_post->ID); ?>
      </a>
    </li>
  <?php else: ?>
    <li>次の記事はありません</li>
  <?php endif; ?>
</ul>
<?php endif; ?>

出力されるコード

<ul>
  <li>
    <a href="前の記事のリンク">
      <img width="" height="" src="前の記事のサムネイル" alt="">
      前の記事タイトル
    </a>
  </li>
  <li>
    <a href="次の記事のリンク">
      <img width="" height="" src="次の記事のサムネイル" alt="">
      次の記事タイトル
    </a>
  </li>
</ul>

詳しくは関数リファレンスをご確認ください。

get_adjacent_post() | Function | WordPress Developer Resources

Retrieves the adjacent post.

https://developer.wordpress.org/reference/functions/get_adjacent_post/

自作する

投稿IDから判断する

WordPress関数を利用せずに、投稿の記事IDから判断する方法もあります。

<?php 
$posts = get_posts( array (
  'post_type' => 'post',
  'posts_per_page' => -1,
  'orderby' => 'date',
  'order' => 'ASC',
));
$post_ids = array();
foreach ( $posts as $p ) {
  // 投稿IDの配列を作成
  $post_ids[] = $p->ID; 
}
// 現在の記事IDが何番目か取得
$current = array_search($post->ID, $post_ids);
$currentID = $post_ids[$current]; // 現在の記事ID
$prevID = $post_ids[$current - 1]; // 前の記事ID
$nextID = $post_ids[$current + 1]; // 次の記事ID
?>
<div class="postLink">
<nav class="navigation post-navigation" role="navigation">
  <div class="nav-links">
    <?php if ( !empty( $prevID ) ): ?>
      <div class="nav-previous">
        <a href="<?php echo get_permalink($prevID); ?>" rel="prev">
          <p class="meta-nav"><span>前の記事</span></p>
          <p class="post-title"><?php echo get_post($prevID)->post_title; ?></p>
        </a>
      </div>
    <?php endif; ?>
    <?php if ( !empty( $nextID ) ): ?>
      <div class="nav-next">
        <a href="<?php echo get_permalink($nextID); ?>" rel="next">
          <p class="meta-nav"><span>次の記事</span></p>
          <p class="post-title"><?php echo get_post($nextID)->post_title; ?></p>
        </a>
      </div>
    <?php endif; ?>
  </div>
</nav>
</div>
<?php wp_reset_postdata(); ?>

出力されるコード

<div class="postLink">
  <nav class="navigation post-navigation" role="navigation">
    <div class="nav-links">
      <div class="nav-previous">
        <a href="前の記事のリンク" rel="prev">
          <p class="meta-nav"><span>前の記事</span></p>
          <p class="post-title">前の記事タイトル</p>
        </a>
      </div>
      <div class="nav-next">
        <a href="次の記事のリンク" rel="next">
          <p class="meta-nav"><span>次の記事</span></p>
          <p class="post-title">次の記事タイトル</p>
        </a>
      </div>
    </div>
  </nav>
</div>

サブループを利用しているので、絞り込む記事を細かくカスタマイズすることも可能です。

なお、サブループについては下記記事で紹介しているので、是非合わせて見てみてください！

WP_Queryでサブループ。
関連記事

投稿を投稿ページ以外で繰り返し表示させる方法。WP_Queryでサブループ。

「サブループ（WP_Query）」を利用して、WordPressの投稿やカスタム投稿で投稿した内容をトップページやサイドバナーなどの他のページで表示する方法を解説。

まとめ

以上、前後の記事へのページネーションについて解説しました。

アーカイブページでのページネーションについても下記記事で紹介しているので、こちらも参考にしてみてください！

WordPressでのページネーション実装方法
関連記事

WordPressでのページネーション実装方法。プラグインあり／プラグインなし

この記事では、WordPressでのページネーションの実装方法について、プラグインを利用する方法、WordPress関数を利用する方法、自作コードで実装する方法の3つを解説します！

こちらの記事もいかかですか？

記事の一覧はこちら！

すべての記事一覧へ

  1. HOME
  2. WordPressでの前後の記事へのページネーション実装方法