時給単価UP【3大特典付き】
コーディングテクニック集100選⋙

【WordPress】前の記事｜次の記事のリンク出力方法【７選】

記事内に広告を含みます

パソ君
パソ君

・WordPressで前の記事や次の記事のリンクを出力するには？

こんな疑問にお答えします。

WordPressでテーマ作成するときに「＜前の記事」「＞次の記事」みたいなリンクを出力したい場合ありますよね。

詳細ページの下部分とかに。

あれ実はあるコードを使えば、簡単に出力可能です。

ジト
ジト

カスタマイズもできるよ！

ということで、この記事では「前の記事｜次の記事のリンク出力方法」について解説していきます！

この記事でわかること

・前の記事｜次の記事のリンク出力方法
・前の記事｜次の記事のリンク出力方法【一覧へ戻る】

【WordPress】前の記事｜次の記事のリンク出力方法【７選】

「前の記事」や「次の記事」のリンク出力方法は下記の関数を使えばOK。

<!-- 前の記事 -->
previous_post_link()

<!-- 次の記事 -->
next_post_link()

この関数を使うことで、簡単にリンク出力が可能になります。

といっても色々なカスタマイズ方法があるんですよね。

  1. 通常
  2. テキストを変える
  3. 同カテゴリーのみ表示
  4. 前後の記事がない場合は非表示
  5. 特定の記事のみ除外
  6. タグを直接記述（アイコンなど表示可能）
  7. 前・次記事のサムネイルを表示

➀：通常

通常のリンク出力方法がこちら。

<!-- 前の記事 -->
<?php previous_post_link(); ?>

<!-- 次の記事 -->
<?php next_post_link(); ?>

出力されるコードが下記。

<!-- 前の記事 -->
<a href="前の記事のリンク" rel="prev">前の記事のタイトル</a>

<!-- 次の記事 -->
<a href="次の記事のリンク" rel="next">次の記事のタイトル</a>

➁：テキストを変える

排出されるテキストが、記事のタイトルではなく、カスタマイズしたい場合もありますよね。

そんな場合は、第2引数を変更すればOK。

<!-- 前の記事 -->
<?php previous_post_link('%link', '前の記事を見る'); ?>

<!-- 次の記事 -->
<?php next_post_link('%link', '次の記事を見る'); ?>

%linkも書くことでaタグのリンクが表示されるようになります。

排出されるHTMLコードがこちら。

<!-- 前の記事 -->
<a href="前の記事のリンク" rel="prev">前の記事を見る</a>

<!-- 次の記事 -->
<a href="次の記事のリンク" rel="next">次の記事を見る</a>

➂：同カテゴリーのみ表示

同じカテゴリー記事のみ、前・次のリンクを出力したい場合もありますよね。

そんな時は第3引数に「true」を入れればOK。

<!-- 前の記事 -->
<?php previous_post_link('%link','%title', true); ?>

<!-- 次の記事 -->
<?php next_post_link('%link','%title', true); ?>

排出されるHTMLコードがこちら↓

<!-- 前の記事 -->
<a href="同じカテゴリーの前の記事のリンク" rel="prev">前の記事のタイトル</a>

<!-- 次の記事 -->
<a href="同じカテゴリーの次の記事のリンク" rel="next">次の記事のタイトル</a>

➃：前後の記事がない場合は非表示

記事の順番によっては前後の記事がない場合がありますよね。

そんな時はif文を使って非表示にする対策をすればOK。

<!-- 前の記事 -->
<?php if (get_previous_post()):?>
  <?php previous_post_link(); ?>
<?php endif; ?>

<!-- 次の記事 -->
<?php if (get_next_post()):?>
  <?php next_post_link(); ?>
<?php endif; ?>

get_previous_post()とget_next_post()で、それぞれ前の記事と次の記事を取得しています。もし取得出来たら～表示するという意味ですね。

➄：特定の記事のみ除外

場合によっては特定の記事のみ、前・次のリンクに表示したくないことありますよね。

そんな時は第4引数に指定記事のIDを入れればOK。

<!-- 前の記事 -->
<?php previous_post_link('%link', '%title', true, '5,10'); ?>

<!-- 次の記事 -->
<?php next_post_link('%link', '%title', true, '5,10'); ?>

この場合、記事IDが5と10の記事に関しては除外されてリンクが出力されます。

⑥：タグを直接記述（アイコンなど表示可能）

テキストの前に、矢印アイコンや画像を表示したい場合もありますよね。

そんな時は第2引数に直接タグを記載すればOK。

imgタグを記述して画像を反映しています。

<!-- 前の記事 -->
<?php previous_post_link('%link', '<img src="'. esc_url(get_template_directory_uri().'/img/hoge-arrow01.png') .'" alt="前の記事へ" height="15" width="15"/>前の記事へ'); ?>

<!-- 次の記事 -->
<?php next_post_link('%link', '<img src="'. esc_url(get_template_directory_uri().'/img/hoge-arrow02.png') .'" alt="次の記事へ" height="15" width="15"/>次の記事へ'); ?>

排出されるコードがこちら↓

<!-- 前の記事 -->
<a href="前の記事のリンク" rel="prev">
  <img src="http://example.com/wp-content/themes/mytheme/img/hoge-arrow01.png" alt="前の記事へ" height="15" width="15" />
  前の記事へ
</a>

<!-- 次の記事 -->
<a href="次の記事のリンク" rel="next">
  <img src="http://example.com/wp-content/themes/mytheme/img/hoge-arrow02.png" alt="次の記事へ" height="15" width="15" />
  次の記事へ
</a>

ちなみにテキスト部分にタグを入れることで、cssで調整しやすくもできますよ。

下記はテキストをspanタグで囲んで出力しております。

<!-- 前の記事 -->
<?php previous_post_link('%link', '<img src="'. esc_url(get_template_directory_uri().'/img/hoge-arrow01.png') .'" alt="前の記事へ" height="15" width="15"/><span class="text">前の記事へ</span>'); ?>

<!-- 次の記事 -->
<?php next_post_link('%link', '<img src="'. esc_url(get_template_directory_uri().'/img/hoge-arrow02.png') .'" alt="次の記事へ" height="15" width="15"/><span class="text">次の記事へ</span>'); ?>
<!-- 前の記事 -->
<a href="前の記事のリンク" rel="prev">
  <img src="https://example.com/wp-content/themes/mytheme/img/hoge-arrow01.png" alt="前の記事へ" height="15" width="15"/>
  <span class="text">前の記事へ</span>
</a>

<!-- 次の記事 -->
<a href="次の記事のリンク" rel="next">
  <img src="https://example.com/wp-content/themes/mytheme/img/hoge-arrow02.png" alt="次の記事へ" height="15" width="15"/>
  <span class="text">次の記事へ</span>
</a>

⑦：前・次記事のサムネイルを表示

前記事と次記事のサムネイル画像も表示したい場合がありますよね。

その場合はif文やechoを使って、下記のような記述をすればOK。

<?php
  // 前の記事を取得
  $prevpost = get_adjacent_post(true, '', true); 
  // 次の記事を取得
  $nextpost = get_adjacent_post(true, '', false); 
  // 前の記事、次の記事いずれか存在していたら
  if ($prevpost or $nextpost) { 
?>
  <ul>
    <?php
      // 前の記事が存在していたら
      if ($prevpost) { 
        echo '<li><div>' . esc_html(get_the_post_thumbnail($prevpost->ID, 'thumbnail')) . '</div><a href="' . esc_url(get_permalink($prevpost->ID)) . '">' . esc_html(get_the_title($prevpost->ID)) . '</a></li>';
      }

      // 次の記事が存在していたら
      if ($nextpost) { 
        echo '<li><div>' . esc_html(get_the_post_thumbnail($nextpost->ID, 'thumbnail')) . '</div><a href="' . esc_url(get_permalink($nextpost->ID)) . '">' . esc_html(get_the_title($nextpost->ID)) . '</a></li>';
      }
    ?>
  </ul>
<?php } ?>

もし前・次記事があったら、その記事のIDからサムネイル・タイトル・リンクを出力するという意味になります。

出力されるHTMLコードはこちら↓

<ul>
  <!-- 前の記事 -->
  <li>
    <div>
      <img src="https://example.com/wp-content/uploads/2022/03/thumbnail1.jpg" alt="thumbnail 1">
    </div>
    <a href="前の記事のリンク">前の記事のタイトル</a>
  </li>
  <!-- 次の記事 -->
  <li>
    <div>
      <img src="https://example.com/wp-content/uploads/2022/03/thumbnail3.jpg" alt="thumbnail 3">
    </div>
    <a href="前の記事のリンク">次の記事のタイトル</a>
  </li>
</ul>

ちなみ「esc_~」はエスケープ処理をしています。
詳しくは下記記事をどうぞ。

【解説】WordPressのエスケープ処理方法３選【必要・不要な関数】

【WordPress】前の記事｜次の記事のリンク出力方法【一覧へ戻る】

前記事や次記事のリンクを出力するさいに
「一覧へ戻る」というリンクも欲しい場合がありますよね。

実際ユーザーからしてみたら欲しいリンクです。

実はそれも簡単に実装可能なんですよね！

通常：「一覧へ戻る」リンク

結論：home_urlを使って、一覧ページへのリンクを真ん中に入れればOK。

<!-- 前の記事 -->
<?php if (get_previous_post()):?>
  <?php previous_post_link(); ?>
<?php endif; ?>

<!-- 記事一覧 -->
<a href="<?php echo esc_url( home_url( '/news/' ) ); ?>">一覧へ戻る</a>

<!-- 次の記事 -->
<?php if (get_next_post()):?>
  <?php next_post_link(); ?>
<?php endif; ?>

今回はnewsという一覧ページがあると仮定していれました。実績一覧ならworkとかを入れるかと。

サムネイル画像を表示する場合：「一覧へ戻る」リンク

真ん中に同じようにliタグを作成して、home_urlにて一覧へ戻るためのリンクを出力しております。

<?php
  // 前の記事を取得
  $prevpost = get_adjacent_post(true, '', true); 
  // 次の記事を取得
  $nextpost = get_adjacent_post(true, '', false); 
  // 前の記事、次の記事いずれか存在していたら
  if ($prevpost or $nextpost) { 
?>
  <ul>
    <?php
      // 前の記事が存在していたら
      if ($prevpost) { 
        echo '<li><div>' . esc_html(get_the_post_thumbnail($prevpost->ID, 'thumbnail')) . '</div><a href="' . esc_url(get_permalink($prevpost->ID)) . '">' . esc_html(get_the_title($prevpost->ID)) . '</a></li>';
      }

      // 一覧へ戻るリンク
      echo '<li><a href="' . esc_url( home_url( '/news/' ) ) . '">一覧へ戻る</a></li>';

      // 次の記事が存在していたら
      if ($nextpost) { 
        echo '<li><div>' . esc_html(get_the_post_thumbnail($nextpost->ID, 'thumbnail')) . '</div><a href="' . esc_url(get_permalink($nextpost->ID)) . '">' . esc_html(get_the_title($nextpost->ID)) . '</a></li>';
      }
    ?>
  </ul>
<?php } ?>

【WordPress】前の記事｜次の記事のリンク出力方法【７選】：まとめ

  • 前の記事はprevious_post_link()
  • 次の記事はnext_post_link()
  • カスタマイズすることでテキストを変えたりサムネイル画像を表示したりが可能
ジト
ジト

前の記事、次の記事の出力はよくするので覚えておこう！

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

CAPTCHA


前の記事

【解説】WordPressの各ページURLの表示方法【トップ・…

次の記事

【解説】WordPressの記事に紐づくターム全て表示【リンク…