[コピペOK]WordPressで「前の記事」「次の記事」を無限ループで表示する方法

お仕事お疲れ様です。ベニヤマです。
先日WordPressで「前の記事」「次の記事」を表示させてみたんですが、 最新記事と最古記事のページに空白ができてしまってもったいないと思ったんですね。
そこで昔の記事も読めるように最新記事のページの「次の記事」に最古記事のリンクを、 最古記事のページの「前の記事」に最新記事を表示させて無限ループになるようにします。
文字に起こすと「?」ですが、完成図はこうなります。

「前の記事」「次の記事」のリンクを表示する

隣接する記事はget_adjacent_post関数で取得します。取得する記事サンプルは下の通り。
日時が新しい順で「中市接骨院様」→「アンムート美容室」→「Bennie-A」→「天王寺動物園トップページ」と取得していきます。

get_adjacent_post関数の使い方

「前の記事」「次の記事」を取得します。"previous_post_link","next_post"と違って不要なカテゴリの記事を除去できて便利(^ ^b
get_adjacent_post( $in_same_term, $excluded_terms, $previous, $taxonomy)

引数

  • $in_same_term:指定したカテゴリと同じカテゴリの項目を取得するかどうか(初期値:false)
  • $excluded_terms:除去するカテゴリ番号(初期値は''(空文字))
  • $previous:前の記事を取得するか(trueなら前の記事、falseなら次の記事を取得する)
  • $taxonomy:$in_same_termがtrueの場合、取得するカテゴリの名前。省略可。
これを使って「前の記事」「次の記事」を記事タイトルで表示できるようにsingle.phpにコードを追加します。
single.php
<ul class="prev-next">
  <?php
$prevpost = get_adjacent_post(false, '', true); // 前の記事情報を取得する
$previd = $prevpost->ID;
  ?>
  <li>
  <?php echo '<a href="'.get_permalink($previd).'">'.get_the_title($previd).'</a>';?>
  </li>
  <?php
$nextpost = get_adjacent_post(false, '', false); // 次の記事情報を取得する
$nextid = $nextpost->ID;
  ?>
  <li>
  <?php echo '<a href="'.get_permalink($nextid).'">'.get_the_title($nextid).'</a>';?>
  </li>
</ul>
これで「アンムート美容室」の投稿ページを開くと前の記事に「Bennie-A」、次の記事に「中市接骨院様」が表示されます。

無限ループで表示させる

ここから本題。当然ですが最新記事のページを表示すると次の記事が表示されません。
なので次の記事が無い場合は最古記事を表示させるようにします。
WordPressは残念ながら最古記事を取得する関数がないのでget_posts関数を利用して取得します。
get_posts関数は記事一覧を取得できるんですが、引数にカンマ区切りで日付やIDなどの並び替え条件や取得する件数を指定する ことができます。わぁこれも便利。 今回は日時の古い順で並び替えて1件だけ取得したいので、
get_posts('posts_per_page' => 1, 'orderby' => 'date', 'order' => 'DESC')[0];
と条件を書いていきます。最後に"[0]"を付けているのはget_posts関数は配列で取得されるから要素数を指定して います。1番目なのになんで"0"を指定するの?と思う方はそういうものと思っておいてください(雑な説明ですいません ^ ^; )

で、get_posts関数を使って修正したコードがこちら。
single.php
<ul>
  <?php
  $nextpost = get_adjacent_post(false, '', false);
  $nextid;
  if ($nextpost) {
  $nextid = $nextpost->ID;
  } else {
  $args = array('posts_per_page' => 1, 'orderby' => 'date', 'order' => 'ASC');
  $firstpost = get_posts( $args )[0];
  $nextid = $firstpost->ID;
  }
  ?>
  <li>
  <?php echo get_post_link($nextid); ?>
  </li>
</ul>
これで最新記事ページを表示すると次の記事欄に一番古い記事である「天王寺動物園トップページ」が表示されます。
同じように最古記事のページを表示した時も「前の記事」欄に最新記事のリンクが表示できるように修正します。※CSSは省略しています。 single.php
<ul>
// 前の記事
  <?php
  $prevpost = get_adjacent_post(false, '', true);
  $previd;
  if ($prevpost) {
  $previd = $prevpost->ID;
  } else {
  $args = array('posts_per_page' => 1, 'orderby' => 'date', 'order' => 'DESC');// 日付が新しい順に並べて最新1件を取得する
  $latestpost = get_posts( $args )[0];
  $previd = $latestpost->ID;
  wp_reset_postdata();
  }
  ?>
  <li>
    <?php echo '<a href="'.get_permalink($previd).'">'.get_the_title($previd).'</a>';?>
  </li>
// 次の記事
  <?php
  $nextpost = get_adjacent_post(false, '', false);
  $nextid;
  if ($nextpost) {
  $nextid = $nextpost->ID;
  } else {
  $args = array('posts_per_page' => 1, 'orderby' => 'date', 'order' => 'ASC');
  $firstpost = get_posts($args)[0];
  $nextid = $firstpost->ID;
  }
  ?>
  <li>
    <?php echo '<a href="'.get_permalink($nextid).'">'.get_the_title($nextid).'</a>';?>
   </li>
  </ul>

サムネイルを表示させる

ここからはおまけ。get_adjacent_post関数で前後記事のIDが取れるならサムネイルだって取れるはず。 という訳でコードを更に修正しました。 single.php
<ul>
  <?php
  $prevpost = get_adjacent_post(false, '', true);
  $previd;
  if ($prevpost) {
  $previd = $prevpost->ID;
  } else {
  $latestpost = get_posts( 'posts_per_page' => 1, 'orderby' => 'date', 'order' => 'DESC' )[0];
  $previd = $latestpost->ID;
  wp_reset_postdata();
  }
  ?>
  <li>
  <?php echo get_post_link($previd); ?>
  </li>
  <?php
  $nextpost = get_adjacent_post(false, '', false);
  $nextid;
  if ($nextpost) {
  $nextid = $nextpost->ID;
  } else {
  $firstpost = get_posts( array('posts_per_page' => 1, 'orderby' => 'date', 'order' => 'ASC') )[0];
  $nextid = $firstpost->ID;
  }
  ?>
  <li>
  <?php echo get_post_link($nextid); ?>
  </li>
  </ul>

functions.php
// 投稿IDからページリンクを作成。
function get_post_link($post_id) {
  $title = get_the_title($post_id);
  $img = '<img src="'.get_post_thumb_url($post_id).'" alt="'.$title.'"/>';
  return '<a href="'.get_permalink($post_id).'">'.$img.$title.'</a>';
}
リンクを作成する箇所は同じ内容を書きたくないのでfunctions.phpにまとめました。
ポイントはfunctions.phpの3行目。ここでimgタグを作成して、get_post_thumb_url関数に記事のIDを引数で 渡すと画像のURLを返すようにしています。

サムネイル画像を取ってきた結果がこちら。 CSSはこちらも省略します。

最後に

ポートフォリオとかあまり時系列にこだわらない記事を扱っている場合にちょうどいいかなと思って作ってみました。

Sponsored link

コメント