[WordPress] 前後の記事をサムネイル付きで表示したら良い感じになった件

今村さんありがとうございます!

またひとつ夢が叶いました。

同じカテゴリー内の前後の記事を表示するってやつは、僕もやっていたんですけどね。

[WordPress] 同じカテゴリー内の前後の記事リンクを表示する | Time to live forever

でもやっぱりサムネイル表示したいなぁ…get_the_post_thumbnail()使えばできるかなぁ…とは思っていたところ、今村さんがやってくれました!ヽ(=´▽`=)ノ

さっそく実装!

さっそく今村さんのコードを拝借して、CSSを当ブログ仕様に適用。

前後の記事がサムネイル付きで表示

前後の記事がサムネイル付きで表示

前後の記事がサムネイル付きで表示されました!すげぇーーー!!

次の記事がない場合はホームへのリンクを表示

次の記事がない場合はホームへのリンクを表示

次の記事がない場合は、ホームへのリンクが表示されます!
前の記事がない場合も同様です。前後の記事どちらもない場合は、このブロックは表示されません。

サムネイル画像のサイズを調整

今村さんのコードを見ると、get_the_post_thumbnail() の第2引数に「thumbnail」を指定されていました。

get_the_post_thumbnail($prevpost->ID, 'thumbnail')

get_the_post_thumbnail() の第2引数に「thumbnail」を指定した場合、メディア設定の「サムネイルのサイズ」で設定したサイズで画像が表示されます。

サムネイルのサイズ

サムネイルのサイズ

これは記事中に複数の画像を「ギャラリー」表示する際の画像サイズとなります。当ブログでは記事エリアの幅を広めにしているため、以下の記事のようにサムネイルのサイズを「230×230」とやや大きめに設定しています。

[WordPress] WP jQuery Lightboxでギャラリーの画像にもlightboxを適用させる方法 | Time to live forever

「次の記事」「前の記事」のエリアにこのサイズの画像が出力されてしまうと、記事タイトルの文字がキツキツに詰められてしまうため、画像の表示サイズを小さくすることにしました。

get_the_post_thumbnail() の第2引数で出力される画像のサイズを指定

get_the_post_thumbnail() の第2引数には「thumbnail」や「medium」、「large」といった引数を指定できます。「medium」、「large」を指定した場合は、「thumbnail」と同様にメディア設定の「中サイズ」「大サイズ」で設定された画像サイズが適用されます。

テンプレートタグ/get the post thumbnail – WordPress Codex 日本語版

また、この他に任意のサイズを指定することもできます。

今回は表示される画像を小さめにして、タイトル文字を表示するスペースを確保したいので、表示されるサムネイル画像のサイズを100pxに指定してみました。

変更前
get_the_post_thumbnail($prevpost->ID, 'thumbnail')
変更後
get_the_post_thumbnail($prevpost->ID, array(100,100))

当ブログではこれで良い感じに収まりました。

前後の記事がサムネイル付きで表示

ギャラリー表示の際の画像サイズを変更したくないという場合は、get_the_post_thumbnail() で出力する画像のサイズを指定するのが良さそうです。

最終的に実装したコードは以下のとおりです。

<!--▼前の記事、次の記事▼-->
<div class="navigation clearfix">
	<?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>« 前の記事</dt><dd><a href="' . get_permalink($prevpost->ID) . '"><span class="thumb">' . get_the_post_thumbnail($prevpost->ID, array(100,100)) . '</span><span class="title">' . get_the_title($prevpost->ID) . '</span></a></dd></dl>';
 		} else { //前の記事が存在しないとき
 			echo '<div class="alignleft nopost"><a href="' . home_url() . '">HOME</a></div>';
 		}
 		if ( $nextpost ) { //次の記事が存在しているとき
 			echo '<dl class="alignright"><dt>次の記事 »</dt><dd><a href="' . get_permalink($nextpost->ID) . '"><span class="thumb">' . get_the_post_thumbnail($nextpost->ID, array(100,100)) . '</span><span class="title">' . get_the_title($nextpost->ID) . '</span></a></dd></dl>';
 		} else { //次の記事が存在しないとき
			echo '<div class="alignright nopost"><a href="' . home_url() . '">HOME</a></div>';
		}
		?>
	</div>
	<?php } ?>
</div>
<!--▲前の記事、次の記事▲-->

参考

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

テンプレートタグ/get the post thumbnail – WordPress Codex 日本語版

星影

Tech Hunter代表。マルチポテンシャライト。 ガジェット、アニメ、ゲーム、インターネットが好き。

関連記事

特集記事

コメント

この記事へのコメントはありません。

TOP