【WordPressで「前の記事」「次の記事」にサムネイルを付けたり、記事が存在しない時の空欄を有効活用しよう】

カスタマイズ情報など

以前まで、下のような感じでWordPressの個別記事には同じカテゴリのにある「前に書いた記事」と、「次に書いた記事」を表示していました。

前の記事、次の記事を表示

こちらは、次の記事がない状態

上の2つの画像のように、関数「previous_post_link」や「next_post_link」を使って表示していたのですが、この表示ってもっとかっこよくできないかなぁと思いました。例えば、

  • 記事にサムネイルつけられたらいいなぁ
  • 「前の記事」「次の記事」が存在しないときの空欄を有効活用したい

などです。そう思ってネットを調べますと、よい方法がありました。もし、「もうちょっとこの辺、かっこよくカスタマイズできないのかな～」みたいに思われている方がいらっしゃいましたら、参考程度にご覧ください。

WordPressの関数「get_adjacent_post」を使ってかっこよくできる

WordPressでは「get_adjacent_post」という関数を使います。Codexの「Function Reference/get adjacent post」を参考にしますと、

Retrieve adjacent post.

Can either be next or previous post.

と書いてあります。Google翻訳に助けを借りて・・・

隣接ポストを取得します

次の記事、前の記事、どっちも取得できます

って解釈しました。

・・・要は、私が今回やりたかった「前の記事」「次の記事」を取得できるってことだと理解してます。早速、Codexに掲載されているサンプルコードを見ましょう～。

コードの書き方（Codexより）

<?php get_adjacent_post( $in_same_cat, $excluded_categories, $previous );  ?>

パラメーター

  • $in_same_cat　オプション。同じカテゴリの記事を表示させるにはtrue（デフォルト：false）
  • $excluded_categories　オプション。除外するカテゴリをカテゴリIDで指定（デフォルト：””）
  • $previous　オプション。true：前の記事 false：次の記事（デフォルト：true）

※この関数を使うときの注意点

  • 出力するのは「記事（投稿）」
  • この関数を使うときはグローバル変数「$post」を設定していないとNULLになる
  • 記事がある場合は出力する

以上を前提としまして、サンプルコードを書きます～。

具体的なコード（サンプル）

例えば今回の場合は「同じカテゴリ内の『前の記事』『次の記事』を表示したい」とします。以下のコードはWordPressフォーラムの「次の記事」「前の記事」のリンクをサムネイル付きで表示させたい」を参考にして、自分用にカスタマイズました。

<!--▼ページ送り▼-->
<?php
$prevpost = get_adjacent_post(true, '', true); //前の記事
$nextpost = get_adjacent_post(true, '', false); //次の記事
if( $prevpost or $nextpost ){ //前の記事、次の記事いずれか存在しているとき
?>
<div class="cat_paging">
<?php
 if ( $prevpost ) { //前の記事が存在しているとき
  echo '<dl class="alignleft"><dt>前の記事(Previous)</dt><dd><a href="' . get_permalink($prevpost->ID) . '"><span class="thumb">' . get_the_post_thumbnail($prevpost->ID, 'thumbnail') . '</span><span class="title">' . get_the_title($prevpost->ID) . '</span></a></dd></dl>';
 } else { //前の記事が存在しないとき
  echo '<div class="alignleft nopost"><a href="' . network_site_url('/') . '">TOPへ戻る</a></div>';
 }
 if ( $nextpost ) { //次の記事が存在しているとき
  echo '<dl class="alignright"><dt>次の記事(Next)</dt><dd><a href="' . get_permalink($nextpost->ID) . '"><span class="thumb">' . get_the_post_thumbnail($nextpost->ID, 'thumbnail') . '</span><span class="title">' . get_the_title($nextpost->ID) . '</span></a></dd></dl>';
 } else { //次の記事が存在しないとき
  echo '<div class="alignright nopost"><a href="' . network_site_url('/') . '">TOPへ戻る</a></div>';
 }
?>
</div>
<?php } ?>
<!--▲ページ送り▲-->

やっていること

重要な条件分岐の場所は、コード内にコメントとして書いてあります。「前の記事」「次の記事」が存在している時はそれぞれ該当する記事を「サムネイル付きで」出力して、記事が存在していない場合は「TOPページに戻る処理」を追加しています。「前の記事」「次の記事」のどちらも存在しない場合は、そもそもコード自体を出力しないようにしています。

設置するとこうなります

上のコードを使って、スタイルシート（CSS）でちょっと表示を整えると、下のようになります。

サムネイルも表示されましたねぇ～

次の記事がない場合は、TOPへ戻るようにリンクを設置

いかがですか。なかなかいい感じじゃないですかねぇ。

デザインはもうちょっとかっこよくしたいかな・・・ｗ

使える、これは使える

この関数を知った時は「これは！」と思いました。特に「前の記事」「次の記事」って今までとてもシンプルな表示だったので、ちょっとサムネイルなどもつけたいなぁと思った場合は、この方法を使うといい感じになりますね。

あと、記事がない時の処理も、細かいことですがとても重要な箇所だと思います。私の場合は記事がない場合には「TOPへ戻る」リンクを設置していますが、アイデア次第で面白いこと出来るなぁと思いました。

私個人的には、今回のカスタマイズはとても満足しています～！

著者:bouya Imamura