2016/10/05 Web Design

WordPressで前後の投稿のサムネイル取得方法とコードサンプル

WordPressで前後の投稿のサムネイル取得方法とコードサンプル

どうも、比較的最近記事を書く時間ができているので調子良く書いています。今回はWordpressでの「次の投稿、前の投稿」みたいなリンクが記事の終わりにあるじゃないですか？それをもう少し見栄え良くできたらなーと思っててこの前カスタマイズしたのでその方法をシェアしたいと思います。

初心者の方に向けてゆっくり説明していくので、コードだけ見せろというかたは記事の下までスクロールで飛ばしてください。

前後の投稿情報を取得する際に使用する関数

  • get_previous_post
  • get_next_post

この二つの関数を使用して前後の記事の情報を取得していきます。
パラメーターを３つ渡すことができるのですが、今回はシンプルに「前後の投稿を取得」します。
ちなみに渡せるパラメーターの種類は

  • $in_same_term 同じカテゴリの投稿かどうか
  • $excluded_terms 除外するカテゴリーID
  • $taxonomy タクソノミー（$in?same_termがtrueの場合に有効）

何も指定しない場合（今回はこの方法です）： get_next_post();
指定する場合 : get_next_post(TRUE, ‘4’, ”);

上記のような感じになります。例としてget_next_postを使用しましたがget_previous_postでも同じパラメーターを取りますので両方とも同じように使用できます。同じカテゴリかどうかのパラメーターを使用するのが多いのではないでしょうか？ その場合get_next_post(TRUE)だけでもOKです。

以上が基本的なget_previous_post、get_next_postの使い方になります。
次に実際に前後の投稿情報を取得していきたいと思います。

前後の投稿情報を取得

<?php
$previous_post = get_previous_post();
if (!empty( $previous_post )): 
	$prev_thum = get_the_post_thumbnail($previous_post->ID, array(100,100) );
?>
  		<div class="prev-post">
	  		<div class="prev-thum">
	  			<?php if($prev_thum){ echo $prev_thum; } ?>
			</div>
			<div class="prev-info">
				<a href="<?php echo get_permalink( $previous_post->ID ); ?>"><?php echo $previous_post->post_title; ?></a>
			</div>
		</div>
<?php endif; ?>

一行目から順に説明していきます。※前の投稿だけを取得するコードです。

$previous_post = get_previous_post();
こちらは上記で説明した通り、一つ前の投稿を取得し、$previous_postにとってきた情報(WP_Postオブジェクト)を代入しています。

if (!empty( $previous_post )):
ここでget_previous_post()で取ってきた情報が空かどうかを判別しています。（前の投稿がない場合,
get_previous_post()は空の文字列を返します）

$prev_thum = get_the_post_thumbnail($previous_post->ID, array(100,100) );
$previous_post->IDをもとにサムネイル画像を取得しています。array(100,100) は取得する画像のサイズですのでお好みで変えていただいてかまいません。

<div class="prev-post">
	  		<div class="post-thum">
	  			<?php if($prev_thum){ echo $prev_thum; } ?>
			</div>
			<div class="post-info">
				<a href="<?php echo get_permalink( $previous_post->ID ); ?>"><?php echo $previous_post->post_title; ?></a>
			</div>
</div>

こちらは実際に取ってきた情報をもとに HTMLを組んでいます。
if($prev_thum){}でサムネイルがあるかないかを判別しています。もしあった場合はecho $prev_thumでサムネイル画像の表示をします。

get_permalinkに前の投稿のID($previous_post->ID)をパラメーターに渡すことで、前の投稿のリンクを取得、タイトルはecho $previous_post->post_titleで表示という形になります。

以上が前の投稿情報を取得し、サムネイル、タイトルを表示するサンプルになります。次の投稿を取得し、表示する場合は、get_previous_post()をget_next_post()に書き換えるだけで取得できます。

サンプルコード

<?php
$previous_post = get_previous_post();
if (!empty( $previous_post )): 
	$prev_thum = get_the_post_thumbnail($previous_post->ID, array(100,100) );
?>
  		<div class="prev-post">
	  		<div class="post-thum">
	  			<?php if($prev_thum){ echo $prev_thum; } ?>
			</div>
			<div class="post-info">
				<a href="<?php echo get_permalink( $previous_post->ID ); ?>"><?php echo $previous_post->post_title; ?></a>
			</div>
		</div>
<?php endif; ?>
<?php
$next_post = get_next_post();
if (!empty( $next_post )): 
	$next_thum = get_the_post_thumbnail($next_post->ID, array(100,100) );
?>
  		<div class="next-post">
	  		<div class="post-thum">
	  			<?php if($next_thum){ echo $next_thum; } ?>
			</div>
			<div class="post-info">
				<a href="<?php echo get_permalink( $next_post->ID ); ?>"><?php echo $next_post->post_title; ?></a>
			</div>
		</div>
<?php endif; ?>

これをsingle.phpの次の投稿・前の投稿を表示したい箇所に貼り付けてくれれば大丈夫です。CSSはお好みでカスタマイズしてください。以上です。

では。

関連する記事