ウェブデザイナーの毎日のお仕事のメモ - mainichi web まいにちウェブ

作成日:2021.11.02  最終更新日:2021.11.05

WordPress

wordpress 前の記事、次の記事、のリンクの表示方法

投稿記事のページの下のほうによくある、前の記事、次の記事、のリンクの表示方法についてのメモです。

基本の 前の記事、次の記事、の表示方法

前の記事

<?php previous_post_link(); ?>

次の記事

<?php next_post_link(); ?>

出力結果


上記のように記述すると、それぞれ、

« <a href="前の記事へのリンク" rel="prev">前の記事のタイトル</a>
<a href="次の記事へのリンク" rel="next">次の記事のタイトル</a> »

のように出力されます。


応用の 前の記事、次の記事、の表示方法

表示されるテキストを変更する方法

『前の記事へ』、『次の記事へ』というテキストが表示されるようにするには、以下のように記述します。

<?php previous_post_link('%link', '前の記事へ'); ?>
<?php next_post_link('%link', '次の記事へ'); ?>

すると、以下のように出力されます。
※今回の書き方では、矢印などはつけていないため、cssで装飾すればいいかなと思います。

<a href="前の記事へのリンク" rel="prev">前の記事へ</a>
<a href="次の記事へのリンク" rel="next">次の記事へ</a>

上記の他にも、応用編、時間があるときに追記していきます。

前の記事、次の記事がない場合は非表示にする方法

現在の記事の前・後に、記事がない場合は、『前の記事へ』、『次の記事へ』のリンクを非表示にしたいですよね。
その場合は、以下のように記述します。

<?php if (get_previous_post()):?>
<?php previous_post_link('%link', '前の記事へ'); ?>
<?php endif; ?>

<?php if (get_next_post()):?>
<?php next_post_link('%link', '次の記事へ'); ?>
<?php endif; ?>

同じカテゴリーの記事の前の記事、次の記事を表示する方法

同じカテゴリーに属する記事の中で、『前の記事へ』、『次の記事へ』を表示したい場合は以下のように記述します。

<?php previous_post_link('%link', '前の記事へ', true); ?>
<?php next_post_link('%link', '次の記事へ', true); ?>

'true' にすることによって、現在の投稿と同じタクソノミー・ターム(例:カテゴリー)の投稿に限定することができます。(デフォルトの値は'false'になっています。)

最新記事