WordPress

【WordPress】前の記事・次の記事の出力方法

WordPress

【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に使い方が掲載されてますので、必要に応じてご覧くださいませ。

  • テンプレートタグ/previous post link – WordPress Codex 日本語版
  • テンプレートタグ/next post link – WordPress Codex 日本語版

あなたにおすすめの記事