【WP】次へ/前へ(prev,next)の記事リンクにアイキャッチとかタイトルとかを入れる(WordPress)

WPの投稿シングルページなんかで「次の記事」「前の記事」がデフォルトのテーマとかだとそこまでリッチじゃないので下記のようにつくりました。
アイキャッチとかタイトルとか取得して並べたかったので…

実際のコード

class名とかは使ったコードそのままコピペしてるだけです。

今回は前or次が存在しない場合も表示上崩さないためにli要素を存在させたかったのでelse以下a要素をvisibilityで処理しています。

<!--▼ 次/前記事へ ▼-->
<ul class="post_pr_nx">
	<?php if (get_previous_post()):?>
		<?php  
		$prev_post = get_previous_post(); 
		$prev_url = get_permalink( $prev_post->ID );
		$prev_img = get_the_post_thumbnail($prev_post->ID, small);
		$title = get_the_title($prev_post->ID);
		?> 
	    <li class="prev">
			<a href="<?php echo $prev_url;?>">
				<p class="prev_mark">前へ</p>
				<div class="clearfix">
					<p class="img">
						<?php echo($prev_img);?>
					</p>
					<p class="title">
						<?php echo $title?>
					</p>
				</div>
			</a>
		</li>
	<?php else:?>
		<li class="prev no_post">
			<a href="" style="visibility:hidden;"></a>
		</li>
	<?php endif; ?>

	<?php if (get_next_post()):?>
		<?php  
		$next_post = get_next_post(); 
		$next_url = get_permalink( $next_post->ID );
		$next_img = get_the_post_thumbnail($next_post->ID, small);
		$title = get_the_title($next_post->ID);
		?> 
	    <li class="next">
			<a href="<?php echo $next_url;?>">
				<p class="next_mark">次へ</p>
				<div class="clearfix">
					<p class="img">
						<?php echo($next_img);?>
					</p>
					<p class="title">
						<?php echo $title?>
					</p>
				</div>
			</a>
		</li>
	<?php else:?>
		<li class="next no_post">
			<a href="" style="visibility:hidden;"></a>
		</li>
	<?php endif; ?>
</ul>
  • このエントリーをはてなブックマークに追加
スポンサーリンク
スポンサーリンク