WordPressで前の記事と次の記事のナビゲーションをサムネイル付きで出力する方法

WordPressで前の記事と次の記事のナビゲーションをサムネイル付きで出力する方法

WordPressで前の記事と次の記事のナビゲーションをサムネイル付きで出力する方法

WordPressの記事ページで、前の記事や次の記事へのナビゲーションを設置したい場合、previous_post_linkとnext_post_linkという関数を使えば簡単にナビゲーションを出力することができます。しかし、これらの関数では、サムネイル画像付きで出力することはできません。

そこで、get_adjacent_postを使います。get_adjacent_postは、前の記事や次の記事の情報を取得するための関数です。

このget_adjacent_postを使って、サムネイル付きのナビゲーションを出力する方法を紹介したいと思います。

get_adjacent_postの使用例

get_adjacent_postは、テーマファイル内で以下のように記述します。

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

各パラメータの意味は、以下の通りです。

$in_same_cat:trueを指定すると同じカテゴリーの記事を表示します。デフォルトはfalse
$excluded_categories:除外するカテゴリーをカテゴリーIDで指定します。デフォルトは空
$previous:trueなら前の記事、falseなら次の記事の情報を取得します。デフォルトはtrue

前の記事と次の記事のナビゲーションをサムネイル付きで出力する方法

get_adjacent_postを使って、サムネイル付きのナビゲーションを出力させるには、設置したい場所に以下のようなコードを追加します。


<div class="post-navigation">
 <?php
 $prevpost = get_adjacent_post(false, '', true);
 $nextpost = get_adjacent_post(false, '', false);

if ( $prevpost ) {
 echo '<div class="prevpost"><a href="' . get_permalink($prevpost->ID) . '">' .get_the_post_thumbnail( $prevpost->ID, array(70,45) ). '<span class="nav-title">' .mb_substr(get_the_title($prevpost->ID),0,25). '</span></a></div>';
 }
 else {
 echo '<div class="prevpost nopost"><a href="' .home_url('/'). '">トップページへ</a></div>';
 }

if ( $nextpost ) {
 echo '<div class="nextpost"><a href="' . get_permalink($nextpost->ID) . '"><span class="nav-title">' .mb_substr(get_the_title($nextpost->ID),0,25). '</span>' . get_the_post_thumbnail( $nextpost->ID, array(70,45) ) . '</a></div>';
 }
 else {
 echo '<div class="nextpost nopost"><a href="' .home_url('/'). '">トップページへ</a></div>';
 }
 ?>
</div>

「前の記事のサムネイル⇒前の記事のタイトル⇒次の記事のタイトル⇒次の記事のサムネイル」の順に出力されるので、あとはCSSで見た目を整えます。

設置コードの解説

まずは、get_adjacent_postを使って、前の記事と次の記事の情報を取得し、その情報を基にタイトルやサムネイル画像を表示しています。

「get_the_post_thumbnail( $prevpost->ID, array(70,45) )」と「get_the_post_thumbnail( $nextpost->ID, array(70,45) )」の「array(70,45)」がサムネイルのサイズです。ピクセル値ではなく、thumbnailやlargeなど、メディア設定のサイズで指定することもできます。

get_the_post_thumbnailの使い方は、the_post_thumbnailと同じですね。

「mb_substr(get_the_title($prevpost->ID),0,25)」と「mb_substr(get_the_title($nextpost->ID),0,25)」の部分で、出力するタイトルの文字数を制限しています。ここでは25文字にしていますが、数値は適宜変更してください。

タイトルの文字数を制限する必要がない場合は、mb_substrを外して「get_the_title($prevpost->ID)」と「get_the_title($nextpost->ID)」だけ記述してください。

前の記事や次の記事が存在しない場合は、トップページへのリンクを表示するようにしています。

あとがき

get_adjacent_postは、便利な関数ですね。

ナビゲーションをサムネイル付きで設置したい場合は、ぜひお試しください。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

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