【WordPress】記事ページに前後記事へのリンクを設置する方法とは（アイキャッチ画像付きも紹介！）

2020.02.16

ページャー

　今回はWordPressの記事ページに前後記事へのリンクを設置する方法についてお話したいと思います！

1 出力されるHTMLコード
2 記述するPHPコード
- 2.1 前記事が存在している時の条件
- 2.2 次記事が存在している時の条件
3 カテゴリー関係なく前後記事があった場合にリンクを出力したい場合は？
4 アイキャッチ画像付きでリンクを出力したい場合は？
5 まとめ

出力されるHTMLコード

　今回は、まず以下のような形で前後記事へのリンクが出力されるようにしたいと思います。

<ul>
	<li class="prev"><a href="前記事のURL">前記事のタイトル</a></li>
	<li class="next"><a href="次記事のURL">次記事のタイトル</a></li>
</ul>

記述するPHPコード

　上記HTMLを出力するには、前後記事へのリンクを設置したい場所に以下のPHPコードを記述しましょう。

<?php
	$prevpost = get_adjacent_post(true,'',true); // 前記事
	$nextpost = get_adjacent_post(true,'',false); // 次記事
	if($prevpost or $nextpost){ // 前記事もしくは次記事が存在している時
?>

<ul>

	<?php if($prevpost){ // 前記事がある時

		echo '<li class="prev"><a href="' . get_permalink($prevpost->ID) . '">' . get_the_title($prevpost->ID) . '</a></li>';

	} if($nextpost){ // 次記事がある時
	
		echo '<li class="next"><a href="' . get_permalink($nextpost->ID) . '">' . get_the_title($nextpost->ID) . '</a></li>';

	} ?>

</ul>

<?php } ?>

上記のPHPコードを記述することで、前後記事が存在している時にリンクを表示してくれるようになります！

前記事が存在している時の条件

　簡単な解説としましては、上記コードの9〜11行目で前記事が存在している時のHTMLについて記述しています。

そのため、前記事が存在していない時にはHTMLが出力されない形になっています。

次記事が存在している時の条件

　続いて13〜15行目で次記事が存在している時のHTMLについて記述しているので、前記事の時と同じく次記事が存在していない時にはHTMLが出力されないようになっています。

カテゴリー関係なく前後記事があった場合にリンクを出力したい場合は？

　ちなみに上の見本コードは現在見ている記事と同カテゴリーに属している記事が前後にある場合のみリンクが出力されるようになっています。

そのため、前後の記事が他のカテゴリーに属している場合はリンクが出力されないようになっています。。。

そこで、もじカテゴリー関係なく前後に記事があった場合にリンクを出力したい場合は、上の見本コードの1〜5行目を以下のように書き換える必要があります。

<?php
	$prevpost = get_adjacent_post(false,'',true); // 前記事
	$nextpost = get_adjacent_post(false,'',false); // 次記事
	if($prevpost or $nextpost){ // 前記事もしくは次記事が存在している時
?>

上のように、前記事部分で見本コードでは

$prevpost = get_adjacent_post(true,”,true);

となっていたのを

$prevpost = get_adjacent_post(false,”,true);

と
true → false
に、次記事部分も

$nextpost = get_adjacent_post(true,”,false);

となっていたのを

$nextpost = get_adjacent_post(false,”,false);

と
true → false
に書き換えることでカテゴリー関係なく前後に記事がある場合はリンクを出力してくれるようになります！

アイキャッチ画像付きでリンクを出力したい場合は？

　最後に、前後記事のアイキャッチ画像を取得してリンクで表示させたい場合のPHPの記述についてお話したいと思います。

もしアイキャッチ画像付きのリンクを出力したい場合は、以下のようにPHPコードを記述することで実装可能になります！

<?php
	$prevpost = get_adjacent_post(true,'',true); // 前記事
	$nextpost = get_adjacent_post(true,'',false); // 次記事
	if($prevpost or $nextpost){ // 前記事もしくは次記事が存在している時
?>

<ul>

	<?php if($prevpost){ // 前記事がある時

		echo '<li class="prev"><a href="' . get_permalink($prevpost->ID) . '">' . get_the_post_thumbnail($prevpost->ID,'thumbnail') .  . get_the_title($prevpost->ID) . '</a></li>';

	} if($nextpost){ // 次記事がある時
	
		echo '<li class="next"><a href="' . get_permalink($nextpost->ID) . '">' . get_the_post_thumbnail($nextpost->ID,'thumbnail') .  . get_the_title($nextpost->ID) . '</a></li>';

	} ?>

</ul>

<?php } ?>

上のように前記事の場合は

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

を、次記事の場合には

 . get_the_post_thumbnail($nextpost->ID,'thumbnail') .

を記述することでアイキャッチ画像を取得して出力してくれるようになります！

ちなみに上のコードだと
‘thumbnail’
となっていますが、希望のアイキャッチ画像出力サイズ（mediumやfullなど）を指定することで、その画像でアイキャッチ画像が出力されるようになります(^^)

まとめ

　以上が前後記事へのリンクの出力方法でした！

前後記事へのリンクは必要になる場合も多いので、ぜひご活用いただけましたら幸いです！