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は、便利な関数ですね。
ナビゲーションをサムネイル付きで設置したい場合は、ぜひお試しください。