WordPressサイトに前後記事へのリンクを表示させる方法
MENU
  1. HOME
  2. WordPress / カスタマイズ
  3. WordPressサイトに前後記事へのリンクを表示させる方法

最近の作業実績

  • 2024年04月06日非レスポンシブのサイトをレスポンシブ化いたしました。
  • 2024年04月05日テーマファイルが編集できない不具合を解消いたしました。
  • 2024年04月04日WordPress、テーマ、プラグイン、のバージョンアップを担当いたしました。
  • 2024年04月03日不具合で表示されなくなったサイトを表示される状態まで復旧いたしました。
  • 2024年04月02日お問い合わせフォームを再構築いたしました。
  • 2024年04月01日不具合で表示されなくなったサイトを表示される状態まで復旧いたしました。
  • 2024年03月31日サーバー移管に共に表示されなくなったサイトを表示される状態まで復旧いたしました。
  • 2024年03月30日WordPressの操作方法をサポートいたしました。
  • 2024年03月29日サイドバーに人気記事を表示させる仕組みを導入いたしました。
  • 2024年03月28日テキスト等の簡易な修正を行いました。
  • 2024年03月27日アイキャッチが表示されない不具合を修正いたしました。
  • 2024年03月26日WordPressの操作方法をサポートさせていただきました。
  • 2024年03月25日サイト上で発生していたリンクの不具合を解消いたしました。
  • 2024年03月24日不具合で表示されなくなったサイトを表示される状態まで復旧いたしました。
  • 2024年03月23日WordPress、テーマ、プラグイン、のバージョンアップを担当いたしました。
  • 2024年03月22日WordPressにログインできない不具合を解消いたしました。
  • 2024年03月21日既存サイトにセキュリティ対策を導入いたしました。
  • 2024年03月20日メールフォーム周りで発生していた不具合を解消いたしました。
  • 2024年03月19日記事一覧をカテゴリー単位で表示できる様にカスタマイズいたしました。
  • 2024年03月18日WordPress、テーマ、プラグイン、のバージョンアップを担当いたしました。
  • このエリアには直近の制作実績を一部掲載しております。
  • 制作実績はリアルタイム反映ではありません。

WordPressサイトに前後記事へのリンクを表示させる方法

この投稿は2019/09/15に加筆修正いたしました。

WordPressで構築したサイトに前後記事へのリンクを表示させる方法をご紹介します。記事ページの下部などでよく見かける「前の記事」「次の記事」といったナビゲーションリンクです。1分で表示できますので、参考にしてください。

この記事は約 4 分で読めます。

前後記事へのリンクを表示させる方法

それでは、前後記事へのリンクを表示させる方法をご紹介します。
基本的にコピペでOKです。

前後記事へのリンクを表示させるときは、以下のテンプレートタグを使用します。

<?php previous_post_link(); ?>
<?php next_post_link(); ?>

上段が「前の記事へのリンク」を表示させるタグ。
下段が「次の記事へのリンク」を表示させるタグ。

上記のタグを前後記事へのリンクを表示させたい箇所に貼り付けましょう。
貼り付けると、前後記事のタイトルをアンカーテキストにしたリンクが表示されます。

あとは、リンクをリストタグで囲むなど自由に装飾して完成です。

よくあるカスタマイズ

前後記事へのリンクを表示させるとき、よくあるカスタマイズをご紹介します。
カスタマイズは色々とあるのですが、今回は3つのカスタマイズをピックアップしました。

アンカーテキストを記事タイトル以外にする。

先ほどご紹介したタグを設置すると、アンカーテキストは自動的に記事タイトルになります。
アンカーテキストを変更する場合は、タグを以下の様に編集してみましょう。

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

【前の記事へ】【次の記事へ】を、アンカーテキストにしたいテキストに変更するだけです。

リンクをマークアップする。

表示させるリンクの前後にマークを表示させたいという意見もよく聞きます。
例えば、リンクの前に矢印を表示さる場合は、タグを以下の様に編集します。

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

リンクの前後をマークアップする時は【%link】の前後にタグを設置しましょう。
上記の場合は、HTMLの特殊文字を記述して【←前の記事へ】【次の記事へ→】と表示させるようにしています。

同一カテゴリーの前後記事へリンクさせる。

最初にご紹介したデフォルトのタグは、全ての記事を対象にリンクを表示させています。
しかし、同一カテゴリーの【次の記事へリンク】を表示させたいというのもよく聞く意見です。

同一カテゴリー内の前後記事へのリンクを表示させる場合は、以下の様にタグを編集します。

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

【TRUE】という記述が増えていますが、これが「同一カテゴリー」と定義している部分です。

この時、注意が必要なのは【TRUE】を定義する時は、【%link】と【前の記事へ】の部分を合わせて記述しなければいけないところです。

アンカーテキストを変更しない場合でも、以下の様な記述をしなければいけません。

<?php previous_post_link('%link', '%title', TRUE); ?>
<?php next_post_link('%link', '%title', TRUE); ?>

加えてもう1点だけ注意しておきます。

この同一カテゴリー内の前後記事へのリンク表示は、【Intuitive Custom Post Order】というプラグインと相性が悪いようです。【Intuitive Custom Post Order】を有効化した状態では、同一カテゴリー内の前後記事へのリンクは正常に表示できませんでした。

【Intuitive Custom Post Order】をご利用中の方は注意してください。

まとめ

WordPressサイトに前後記事へのリンクを表示させる方法をご紹介しました。

既存のWordPressテーマには、そのほとんどに実装されていると思います。
オリジナルテーマを作成する時や、独自にカスタマイズしたい時、参考にしてください。

今回のコンテンツが誰かの役に立つとうれしいですね。

Wordpressのカスタマイズや不具合など
何かお困りのことはありませんか?

Wordpressに関連するあなたのお悩み、解決いたします。
次のような方は、お気軽にご相談下さい。

  • Wordpressサイトをカスタマイズしたいが、やり方が分からないで困っている。カスタマイズの知識が豊富な人に任せたい。
  • Wordpressサイトに不具合が発生したが、直し方が分からない。不具合の修正経験が豊富な人に任せたい。
  • 既存サイトにWordPressを導入したいが、やり方が複雑で自分ではできそうにもない。経験が豊富な人に任せたい。
  • WordPressがハッキングされたが修正の仕方が分からない。サイトを元通りにできる人を探している。
  • Wordpressで0からサイトを制作したいが、自分ではできそうにもない。プロにサイト制作を委託したい。

一つでも該当する方は、以下のフォームからお気軽にご相談下さい。

WordPressに関して今すぐ相談する

著者:takaya kondo

岡山在住のWordPress専門フリーランサーです。Wordpressを使ったWEBサイト制作を中心に10年間ほど活動させていただいています。

Wordpress関連の記事でお役に立てれば幸いです。

【関連記事】あなたが興味のありそうな関連記事をご紹介します。

コメントを残す

(必須)

CAPTCHA