【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へ戻るようにリンクを設置

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

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

使える、これは使える

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

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

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

著者:bouya Imamura

このページについてコメントする

  • みなみ

    はじめまして。記事を参考にして、post.phpの中に配置でき、表示されました。ありがとうございます。
    つきましては
    デザインの変更について教えていただきたいのですが、
    全体のバランスは今のまま左右配置で、
    「前の記事」「次の記事」をサムネイルの上に中央配置、タイトルをサムネイルの下に中央配置するコードを教えていただけるとありがたいです。
    (私に場合、写真ブログなのでタイトルが極端に短いのです・・・)
    よろしくお願いいたします。

    2013/11/10 05:47:56

  • sanaefujii

    Twentyten使っていますが、なぜかうちでは順番通りに表示されませんでした・・・トップページから順を追って行くと問題ないのですが、他のリンクからページに飛んだりすると全然違うページが次に表示されたり、次に記事があるのにTOPに戻るが表示されたり、気に入ってたんですが知識がなさすぎてどう修正したらいいのか全く分からず、泣く泣く元に戻しました(T_T)

    2014/06/07 22:24:56

    • bouya Imamura

      なるほどです、そうですか~。もし可能でしたら、試しに他のテーマに変更してから本記事に書いてあるコードを入れてみることはできますか。あと、テーマはTwentytenとのことですが、テーマに記述してあるコードを改変されたり、プラグインなど使われていたり、そう言ったカスタマイズの仕方によってコードが動かない場合もあるかもしれないです。

      もし、その辺の心当たりがある場合は見直しをされてもいいかもです。ただ、ご返信の言葉をそのままお借りしますと「気に入ってたんですが知識がなさすぎてどう修正したらいいのか全く分からず」とおっしゃられているので、まずは、

      テーマを変更→プラグインを外す

      などを行ってみて、少しずつ原因を調査されてもいいかもしれません。あくまでご参考程度の案内となりますが、ご検討ください~。

      2014/06/08 01:28:21

      • sanaefujii

        ありがとうございます、出来る範囲で試してみます。もし原因が分かったらまた報告させて頂きます。

        2014/06/08 06:45:21

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

お名前,メールアドレスが仮のものですとコメントが反映されない場合があります