WordPressで「前の記事」と「次の記事」のページネーションを作成する方法

今回は、WordPressで「前の記事」と「次の記事」のページネーションを作成する方法について紹介します。
ページネーションはWordPress案件で頻出の内容なので、是非マスターしましょう!
WordPressで「前の記事」と「次の記事」のページネーションを作成する方法
完成形はこちら。
1 2 3 4 5 6 7 8 |
<div class="postLinks"> <div class="postLink postLink-prev"> <?php previous_post_link('<i class="fas fa-chevron-left"></i> %link', '前の記事へ'); ?> </div> <div class="postLink postLink-next"> <?php next_post_link('%link <i class="fas fa-chevron-right"></i>', '次の記事へ'); ?> </div> </div> |
previous_post_link
前の記事に戻るには、<?php previous_post_link(); ?>のテンプレートタグを使います。
上記のコードのように、矢印アイコンをFont Awesomeで実装することもできます。
「%link」はaタグのリンクなので、 アイコンをクリックできるようになりますよ。
そして、こちらのテンプレートタグは必ずループの中で使う必要があります。
next_post_link
次の記事に移動するには、<?php next_post_link(); ?>のテンプレートタグを使います。
previous_post_linkと同様、ループの中で必ず使いましょう。
まとめ
以上が、WordPressで「前の記事」と「次の記事」のページネーションを作成する方法でした。