WordPress:前後記事へのナビゲーションにアイキャッチ画像を表示

Date :
Category :
WordPress » 画像
Share this :

表示している記事のページで、前後の記事にページ送りをするナビゲーションリンク( « 次の記事・前の記事 » )にアイキャッチ画像を表示させる方法になります。
プラグインは使用せずに、カスタマイズしやすい記述をします。

前後記事へのナビゲーションを設置する一般的な方法は、WordPressのテンプレートタグである「next_post_link」と「previous_post_link」を使用しますが、

<?php next_post_link('%link', '« 次の記事へ') ?>
<?php previous_post_link('%link', '前の記事へ »') ?>

この記述だと、

  • 次の記事へ | 前の記事へ という文字列
  • 記事のタイトル
  • アイキャッチ画像

を同時に表示させることができません。

そのため以下にて、前後記事へのナビゲーションに「アイキャッチ画像」や「記事のタイトル」も同時に表示させる記述を行います。

前後記事へのナビゲーションにアイキャッチ画像を表示する記述

記述自体はもっと簡潔にすることが出来るのですが、HTMLタグの追加や入れ換えなどを想定して、カスタマイズしやすい記述にしてあります。

single.phpのループ内で表示したい箇所に以下を追加してください。

single.php

<?php $nextpost = get_adjacent_post(false, '', false); if ($nextpost) : ?>
<p>
	« 次の記事
	<a href="<?php echo get_permalink($nextpost->ID); ?>">
		<?php echo get_the_post_thumbnail($nextpost->ID); ?>
		<?php echo esc_attr($nextpost->post_title); ?>
	</a>
</p>
<?php endif; ?>

<?php $prevpost = get_adjacent_post(false, '', true); if ($prevpost) : ?>
<p>
	前の記事 »
	<a href="<?php echo get_permalink($prevpost->ID); ?>">
		<?php echo get_the_post_thumbnail($prevpost->ID); ?>
		<?php echo esc_attr($prevpost->post_title); ?>
	</a>
</p>
<?php endif; ?>

「次の記事」「前の記事」の言い回しは、使う人によって捉え方が異なると思いますので、好みの言葉に変更してください。

デフォルトではサムネイルで設定されているサイズの画像が表示されるようになります。

アイキャッチ画像の表示サイズ変更するには、
5行目と15行目のget_the_post_thumbnailの( )内を以下のようにします。

/* サムネイルのサイズ */
get_the_post_thumbnail($nextpost->ID, 'thumbnail') //5行目
get_the_post_thumbnail($prevpost->ID, 'thumbnail') //15行目

/* 中サイズ */
get_the_post_thumbnail($nextpost->ID 'medium') //5行目
get_the_post_thumbnail($prevpost->ID, 'medium') //15行目

/* 大サイズ */
get_the_post_thumbnail($nextpost->ID 'large') //5行目
get_the_post_thumbnail($prevpost->ID, 'large') //15行目

/* フルサイズ */
get_the_post_thumbnail($nextpost->ID 'full') //5行目
get_the_post_thumbnail($prevpost->ID, 'full') //15行目

/* 名前を付けてサイズ設定した場合 */
get_the_post_thumbnail($nextpost->ID 'サイズ設定名') //5行目
get_the_post_thumbnail($prevpost->ID, 'サイズ設定名') //15行目

HTMLの出力はこのようになります。

<p>
	« 次の記事
	<a href="○○○">
		<img width="○○○" height="○○○" src="○○○.jpg" alt="○○○" />
		記事のタイトル
	</a>
</p>

<p>
	前の記事 »
	<a href="○○○">
		<img width="○○○" height="○○○" src="○○○.jpg" alt="○○○" />
		記事のタイトル
	</a>
</p>

上記では<p>タグで括って出力するようになっていますが、用途に合わせてHTMLタグの追加や変更をしてください。

以上、「WordPress:前後記事へのナビゲーションにアイキャッチ画像を表示」でした。