WordPress - 前の記事・次の記事へのリンク出力方法

1. 前の記事・次の記事へのリンク出力設定

前の記事・次の記事へのリンクを出力するにはprevious_post_linknext_post_linkというテンプレートタグを使用します。previous_post_linknext_post_linkに指定できる引数は下記のようになります。

<!-- ひとつ前の記事(古い記事)へのリンク -->
<?php previous_post_link( $format, $link, $in_same_term, $excluded_terms, $taxonomy ); ?>

<!-- ひとつ次の記事(新しい記事)へのリンク -->
<?php next_post_link( $format, $link, $in_same_term, $excluded_terms, $taxonomy ); ?>

$format - リンクの前後に追加する文字を設定(初期値: '« %link')
$link - リンクのテキストを設定(初期値: '%title' - 記事のタイトルを出力)
$in_same_term - リンクを同じタクソノミーの投稿に限定するかしないか(初期値: false - しない)
$excluded_terms - 除外したいカテゴリー、タグなどの ID を設定(初期値: '' - なし)
$taxonomy - タクソノミーの設定。$in_same_term が true の場合のみ設定可能(初期値: 'category')

テンプレートタグ/previous post link
テンプレートタグ/next post link

2. 初期設定で出力した場合

何も指定をしない場合は下記のように出力されます。&laquo;&raquo;は特殊文字というもので、文字列が記号として出力されるものです。(&laquo; = 「«」、&raquo; = 「»」)

<?php previous_post_link(); ?>

<!--HTML出力-->
&laquo; <a href="リンク先" rel="prev">前の記事のタイトル</a>

<?php next_post_link(); ?>

<!--HTML出力-->
<a href="リンク先" rel="next">次の記事のタイトル</a> &raquo;

3. リンクのテキストを独自に設定したい場合

リンクのテキストを記事のタイトルではなく独自に設定したい場合は下記のように記述します。(前の記事、次の記事の部分が独自に決められる部分)

<?php previous_post_link('&laquo; %link', '前の記事'); ?>

<?php next_post_link('%link &raquo;', '次の記事'); ?>

4. 同じカテゴリーで前の記事・次の記事を出力したい場合

同じカテゴリーの記事限定で前の記事・次の記事のリンクを出力したい場合は下記のように記述します。(%title=記事のタイトルを出力)

5. 同じタグがつけられている前の記事・次の記事を出力したい場合

同じタグがつけられている記事限定で前の記事・次の記事のリンクを出力したい場合は、初期値がcategoryの部分をpost_tagに変更します。

<?php previous_post_link('&laquo; %link', '%title', true, '', 'post_tag'); ?>

<?php next_post_link('%link &raquo;', '%title', true, '', 'post_tag'); ?>

6. 特定のカテゴリー・タグがつけられている記事を除外したい場合

<?php previous_post_link('&laquo; %link', '%title', true, '12'); ?>

<?php next_post_link('%link &raquo;', '%title', true, '12'); ?>

7. 矢印に画像やアイコンを使用したい場合

矢印などを画像やアイコンにしたい場合は下記のように記述します。(アイコンの部分はマテリアルアイコンを例にしています)

<!-- 画像 -->
<?php previous_post_link('%link', '<img src="'. get_template_directory_uri().'/images/img.png" alt=""/>前の記事'); ?>

<?php next_post_link('%link', '次の記事<img src="'. get_template_directory_uri().'/images/img.png" alt=""/>'); ?>

<!-- アイコン -->
<?php previous_post_link('%link', '<i class="material-icons">&#xe5c4;</i>前の記事'); ?>

<?php next_post_link('%link', '次の記事<i class="material-icons">&#xe5c8;</i>'); ?>

8. 前の記事・次の記事がない場合の処理

一番古い記事と一番新しい記事には前の記事・次の記事がないので、そのときどうするかの条件分岐が下記のようになります。ひとつが、記事がない場合、替わりに代替を表示する。もう一つが記事がない場合何も表示しないようにする処理です。

<!-- 前の記事がない場合、「この記事が最新の記事です」と表示 -->
<?php if (get_previous_post()):?>
<?php previous_post_link('&laquo; %link', '前の記事'); ?>
<?php else : ?>
<p>この記事が最新の記事です</p>
<?php endif; ?>

<!-- 次の記事がない場合、何も表示しない -->
<?php if (get_next_post()):?>
<?php next_post_link('%link &raquo;', '次の記事'); ?>
<?php endif; ?>

9. 前の記事・次の記事のサムネイル画像(アイキャッチ画像)を表示させる

前の記事・次の記事のサムネイル画像を表示させたい場合、ここでは、get_the_post_thumbnailというテンプレートタグを利用して画像を出力しています。

<!-- 画像をaタグに含めない -->
<?php if (get_previous_post()):?>
<?php echo get_the_post_thumbnail($prevpost->ID, 'thumbnail'); ?>
<?php previous_post_link('%link', '%title'); ?>
<?php endif; ?>

<!-- 画像をaタグに含める -->
<?php if (get_next_post()):?>
<?php
$nextpostThumb = get_the_post_thumbnail($nextpost->ID, 'thumbnail');
next_post_link( '%link', '%title'.$nextpostThumb);
?>
<?php endif; ?>

テンプレートタグ/get the post thumbnail