【WordPress】前の記事・次の記事の出力方法
ブログ記事の最下部などにみられるこの「前の記事・次の記事」の出力方法をご紹介します。
WordPressのテンプレートタグ「previous_post_link」と「next_post_link」を使用することで出力することができます。
リンクを表示するコード
<?php previous_post_link(); ?>
<?php next_post_link(); ?>
次のようにHTMLが出力されます。
<a href="前の記事のリンク" rel="prev">前の記事のタイトル</a>
<a href="次の記事のリンク" rel="next">次の記事のタイトル</a>
テキストを変更して表示する
テキストを変更する場合は、テンプレートタグの第2引数にテキストを設定します。
<?php previous_post_link('%link', '前の記事へ'); ?>
<?php next_post_link('%link', '次の記事へ'); ?>
次のようにHTMLが出力されます。
<a href="前の記事のリンク" rel="prev">前の記事へ</a>
<a href="次の記事のリンク" rel="next">次の記事へ</a>
同じカテゴリーの前後の記事を表示する
同じカテゴリーの記事を表示するには、第3引数に「TURE」を入れます。テンプレートタグのデフォルトでは「FALSE」となっています。
<?php previous_post_link('%link','%title', TURE); ?>
<?php next_post_link('%link','%title', TURE); ?>
次のようにHTMLが出力されます。
<a href="同じカテゴリの前の記事のリンク" rel="prev">同じカテゴリの前の記事のタイトル</a>
<a href="同じカテゴリの次の記事のリンク" rel="next">同じカテゴリの次の記事のタイトル</a>
前後の記事が無い場合は非表示にする
テンプレートタグの親要素にHTMLタグを入れる場合（下記のコードの場合はPタグ）、前後の記事が無くても親要素のHTMLタグが表示されてしまうので、条件分岐を使って非表示にします。
<?php if (get_previous_post()): ?>
<p><?php previous_post_link(); ?></p>
<?php endif; ?>
<?php if (get_next_post()): ?>
<p><?php next_post_link(); ?></p>
<?php endif; ?>
次のようにHTMLが出力されます。
<p><a href="前の記事のリンク" rel="prev">前の記事のタイトル</a></p>
<p><a href="次の記事のリンク" rel="next">次の記事のタイトル</a></p>
前後の記事が無い場合は、親要素のPタグも含めて非表示になります。
以上。前の記事、次の記事の出力方法になります。
Webサイト制作では頻繁に使いますので、覚えておきましょう。
参考サイト
WordPress Codexに使い方が掲載されてますので、必要に応じてご覧くださいませ。
