WordPressで次へ/前へリンクを追加する方法（究極のガイド）

ブログの投稿を読んで、次の投稿に簡単にジャンプしたいと思ったことはありませんか？

そこで便利なのが、次へ／前へリンクです。これらのシンプルなナビゲーションリンクは、読者に検索させることなく、サイト内のより多くのコンテンツに誘導することで、読者の興味を惹きつけます。

WordPressの初期設定では、次の投稿と過去の投稿のリンクが含まれていますが、テーマによっては表示されなかったり、思い通りのスタイルにならない場合があります。

しかし、心配する必要はありません！様々な方法を試した結果、リンクを追加してカスタマイズする信頼性の高い方法がいくつか見つかりました。

このガイドでは、WordPressで次へ/前へリンクを簡単に追加する方法を、プラグインやカスタマイザーコードを問わずご紹介します。

WordPressの次/前のリンクとは？

次と前のリンクは、WordPressテーマにビルトインされたダイナミックナビゲーションリンクです。ユーザーが投稿の間を簡単に移動することができ、余分なクリックをすることなく、より多くのコンテンツを発見することができます。

初期設定では、WordPressブログの投稿は逆時系列（新しい投稿が先）で表示されます。

つまり、次の投稿はユーザーが表示している現在の投稿の後に公開された投稿であり、過去の投稿は現在の投稿の前に公開された投稿である。

次へ／前へリンクは、ユーザーが個々の投稿やブログのアーカイブページを簡単にナビゲートできるようにします。また、ブログのページビューを増やすのにも役立ちます。

ほとんどのWordPressテーマには、次の投稿と過去の投稿のリンクがビルトインされており、各投稿の下部に自動的に表示されます。しかし、テーマによっては表示されなかったり、WordPressサイトのどこにどのように表示されるかをカスタマイズしたい場合もあります。

ということで、WordPressで次と前のリンクを簡単に追加する方法を見てみましょう。以下のリンクをたどって、お好きなセクションにジャンプできます：

プラグインを使ってWordPressに次へ／前へリンクを追加する（最も簡単な方法）

この方法は簡単で、サイトにコードを追加するのが苦手な初心者におすすめだ。

まず、CBX Next Previous Articleプラグインをインストールして有効化する必要があります。詳しくはWordPressプラグインのインストール方法をご覧ください。

有効化したら、Settings ” CBX Next Previousページにアクセスしてください。ここから、サイト上の次と前のリンクを表示する場所を選択できます。

このプラグインを使うと、個別投稿、ページ、アーカイブページなどに次の投稿と過去の投稿のリンク矢印を表示させることができます。

これを行うには、「アーカイブ表示設定」セクションまでスクロールダウンし、これらのリンクを表示したいエリアで「はい」を選択します。

次と過去のリンクをより関連性の高いものにするために、同じカテゴリーやタグの次の投稿と過去の投稿を表示することもできます。

次に、「個別記事表示設定」セクションまでスクロールダウンしてください。矢印が表示される初期設定の投稿タイプとして、投稿とページがすでに選択されていることがわかります。

過去の投稿と次の投稿の矢印を1つだけ表示したい場合は、「投稿の表示」設定で「前」または「次」を選択するだけです。

ただし、両方の矢印を表示したい場合は、「両方の矢印を表示」の設定で「はい」を選択する。

プラグインの無料版では、次の投稿と前の投稿に矢印を表示することしかできません。プロバージョンにアップグレードすることで、スライドインポップアップなどの他の表示オプションをアンロックすることができます。

その後、「矢印スタイル設定」セクションのドロップダウンメニューから矢印スタイルを選択することができます。

そうすると、下に矢印のプレビューが表示されます。そして、「設定を保存」ボタンをクリックしてください。

同じタクソノミーから次の投稿/過去の投稿を表示する場合は、Navigate by Taxonomyタブに切り替える必要があります。

ここから、次と前のリンクを選択するために使用するタクソノミーを選択します。そして、「設定を保存」ボタンをクリックしてください。

オプションで、このプラグインはGoogleアナリティクスを使ってクリックをトラッキングすることもできる。この機能を使用するには、まずWordPressにGoogleアナリティクスをインストールする必要があります。

その後、プラグイン設定のGoogleアナリティクスタブに切り替え、クリックトラッキング設定を有効化する。

残りの設定はそのままでも、お好みに合わせて設定することもできます。設定が終了したら、「設定を保存」ボタンをクリックするだけで、変更内容が保存されます。

WordPressサイトにアクセスして、次へ/前へリンクの動作を確認できるようになりました。

この方法は簡単ですが、柔軟性があまりありません。例えば、無料プラグイン版では次の投稿や過去の投稿のタイトルは表示されません。

カスタムコードによる次/前リンクの追加

より柔軟でカスタマイズ可能なナビゲーション・リンクの追加方法をお探しなら、この方法がお勧めです。次/前のリンクを追加するには、 WordPressテーマファイルを編集する必要があります。

ちょっとしたエラーでサイトにアクセスできなくなる可能性があるため、これは非常にリスキーだ。

そこでWPCodeの登場です。サイトを壊すリスクなしにカスタマイザーコードを安全に追加できるため、WordPressのコードスニペットプラグインとして最適です。

詳しくはWPCodeレビューをご覧ください。

まず、WPCodeプラグインをインストールし、有効化する必要があります。詳しくは、WordPressプラグインのインストール方法のチュートリアルをご覧ください。

有効化したら、WordPressダッシュボードからCode Snippets ” +Add Snippetページにアクセスします。ここで、「カスタムコードの追加（新規スニペット）」設定の下にある「+カスタム・スニペットの追加」ボタンをクリックします。

カスタムスニペットの作成」ページが表示されますので、まずはタイトルを入力してください。

次に、右側のドロップダウンメニューからコードタイプとして「PHP Snippet」を選択します。

次に、以下のカスタムコードを「コードプレビュー」ボックスに追加します：

その後、「インサーター」セクションまでスクロールダウンし、「自動挿入」モードを選択する。

有効化したコードは、あなたのサイトで自動的に実行されます。

次に、「Location」ドロップダウンメニューを開き、「Page-Specific」タブに切り替える。

次に、コードの場所として「投稿後に挿入」を選択します。これで、過去の投稿や次の投稿のリンクが各投稿の最後に表示されるようになります。

しかし、他のポジションを考えている場合は、そのオプションを設定することができる。

最後に、一番上までスクロールして戻り、「Inactive」スイッチを「Active」に切り替える。

その後、’Save Snippet’ボタンをクリックして変更を保存します。

これでWordPressサイトにアクセスして、「次へ」「前へ」リンクの動作を確認することができます。

ここで、あなたが追加したカスタムコードは、アンカーテキストとして投稿タイトルを持つ次の投稿と過去の投稿へのリンクのみを表示していることに気づくでしょう。

それが次の投稿や前の投稿へのリンクであることは強調されていない。

これを変更したい場合は、次のカスタムコードを「コードプレビュー」ボックスに追加してください：

WPCodeで変更を保存したら、サイトにアクセスするだけです。

これがテストサイトでの様子だ：

また、次の投稿や過去の投稿のタイトルと一緒に、特殊文字や矢印を使用することもできます。

コードを以下のように置き換えるだけだ：

このコードがテストサイトでどのように表示されたかを示します：

さて、次と前のリンクをユーザーが現在表示している投稿にもっと関連したものにしたいとしましょう。

同じカテゴリーやタグの次のリンクや前のリンクを表示することで、それが可能になります：

このコードは、同じカテゴリー内の次の投稿と過去の投稿を表示するようにWordPressに指示します。必要に応じて、タクソノミーのパラメータをタグやその他のカスタム・タクソノミーに変更することができます。

WordPressの次/前のリンクのスタイリング

WordPressで「次へ」「前へ」リンクを追加する方法を学んだので、次はそれらを適切にスタイル設定する方法を見てみよう。

デフォルトでは、WordPressは自動的にいくつかのデフォルトCSSクラスを投稿ナビゲーションリンクに追加します。WPCodeでこれらのCSSクラスを使って、リンクのスタイルを設定することができます。

まず、WordPress管理画面のサイドバーからCode Snippets ” Add Snippetのページに移動します。そして、「カスタムコードの追加（新規スニペット）」設定の下にある「+カスタム・スニペットの追加」ボタンをクリックします。

カスタム・スニペットの作成」ページに移動したら、コードのタイトルを追加します。

次に、ドロップダウンメニューからコードタイプとして「CSS Snippet」を選択する。

その後、以下のCSSコードを「コード・プレビュー」ボックスに追加します。

この基本的なCSSは、単に次と前のリンクを隣り合わせに、しかし同じ行の異なる側に表示するだけである：

背景色やマウスオーバー効果などを追加して、ナビゲーションリンクを目立たせることもできます。

ここに、出発点として使えるCSSコードのサンプルがあります：

挿入」セクションまでスクロールダウンし、「自動挿入」モードを選択する。

カスタムコードは有効化されると自動的に実行されます。

先に進み、「Inactive」スイッチを「Active」に切り替える。

その後、「Save Snippet」ボタンをクリックして設定を保存します。

では、WordPressサイトにアクセスして、投稿のスタイル付きリンクをご覧ください。

リンクテキストに背景色が付き、マウスオーバー効果で次と前のリンクがより目立つようになったことにお気づきでしょう。

サムネイル付き投稿に次/過去のリンクを追加する

次の投稿や過去の投稿のリンクを目立たせたい場合は、リンクと一緒に投稿サムネイルを表示することができます。Imagelyは、ユーザーの注意を引き、これらのリンクをより魅力的にする最も簡単な方法です。

これを行うには、functions.phpファイルにカスタマイザーのコードを追加することもできますが、わずかなエラーでサイトが壊れてしまう可能性があることを覚えておいてください。そのため、WPCodeを使用することをお勧めします。

プラグインを有効化したら、Code Snippets ” +Add Snippet ページに移動し、’Add Your Custom Code (New Snippet)’ オプションの下にある ‘+ Add Custom Snippet’ ボタンをクリックします。

カスタマイザー作成」ページに移動したら、コードのタイトルを追加する必要があります。

次に、右側のドロップダウンメニューからコードタイプとして「PHP Snippet」を選択します。

その後、「コードプレビュー」ボックスに以下のカスタムコードを追加する：

このコードは、次の投稿と過去の投稿を、アイキャッチ画像または投稿サムネイルとともに表示する関数を作成するだけです。

スニペットを入力したら、スイッチを「有効化」に切り替え、「スニペットを保存」ボタンをクリックします。

次に、Code Snippets ” + Add Snippetページに戻り、’Add Your Custom Code’オプションの下にある’Use Snippet’ボタンをクリックします。

カスタム・スニペットの作成」ページが開いたら、以下のコードをコピー＆ペーストして「コード・プレビュー」ボックスに入れてください：

このコードは、リンクを表示する場所を決定します。

コードタイプ」のドロップダウンからも「PHPスニペット」を選択してください。

次に、「インサーター」セクションまでスクロールダウンし、コードを自動的に実行する「オートインサート」モードを選択する。

Location」セクションを展開し、「Page-Specific」タブに切り替えることもできます。ここから’Insert After Post’オプションを選択すると、リンクの次の投稿にサムネイルが表示されます。

最後に、スイッチを「有効化」に切り替え、「スニペットを保存」ボタンをクリックします。

あとは、あなたのサイトにアクセスして、リンクの動きを見てください。

さて、これらのリンクがあまりきれいに見えないことにお気づきだろうか。

WPCodeでカスタムCSSを追加することで、スタイルを変更することができます。

これで変更を保存し、サイトにアクセスして次と前のリンクをサムネイル付きで表示することができます。

これがテストサイトでの様子だ：

詳しくは、WordPressで過去の投稿と次の投稿のリンクにサムネイルを追加する方法をご覧ください。

WordPressページに次へ／前へリンクを追加する

通常、投稿ナビゲーションリンクはWordPressのブログ投稿に使用されます。なぜなら、これらの項目は時系列順に公開されるからだ。

一方、WordPressのページは一般的に時系列で公開されることはありません。詳しくはWordPressの投稿日とページの違いをご覧ください。

しかし、ユーザーによっては、訪問者が簡単に次のページを見つけられるように、ページナビゲーションを表示したい場合があります。WPCodeを使ったコードは、ページの前と次のリンクを表示します。

これらのリンクをページと投稿日の両方に表示したい場合は、追加の変更は必要ありません。

ただし、ページの前後のリンクだけを表示したい場合は、コード・スニペット ” + スニペットの追加 ページにアクセスしてください。

ここで、「カスタムコードを追加（新規スニペット）」オプションを選択します。

カスタマイザーの作成」ページに移動したら、スニペットのタイトルを追加します。

次に、ドロップダウンメニューからコードタイプとして「PHP Snippet」を選択します。

次に、以下のカスタムコードを「コードプレビュー」ボックスに追加します。

これは、投稿に過去の投稿／次の投稿リンクを追加するために使用できるコードと同じです：

その後、「インサーター」セクションまでスクロールダウンし、コードを自動的に実行する「オートインサート」モードを選択する。

また、「場所」ドロップダウンメニューからリンクの位置を設定することもできます。例えば、「投稿後に挿入」を選択した場合、リンクは各ページの最後に表示されます。

他のポジションをお考えの場合は、ドロップダウンから該当するオプションを選択してください。

次に、「Smart Conditional Logic」セクションまでスクロールダウンし、「Enable Logic」スイッチを切り替える。

その後、「条件」のドロップダウンメニューから「表示」を選択し、「＋新規グループを追加」ボタンをクリックする。

コード・スニペットが外観に表示される条件を定義する必要があります。

前／次のリンクをページ上にのみ表示したいので、最初のドロップダウンメニューを開き、左カラムの「Where（ページ）」タブに切り替える。

次に、オプションから「投稿タイプ」を選択し、真ん中のドロップダウンから「Is」を選択し、最後のドロップダウンから「ページ」を選択します。

最後に、一番上までスクロールして「Inactive」スイッチを「Active」に切り替え、「Save Snippet」ボタンをクリックします。これで、ページに前後のリンクを追加することができました。

これがデモサイトでの様子です：

おまけ：WordPressの次と前のリンクを削除する

WordPressの次と前のリンクを削除したいユーザーもいるかもしれません。

例えば、これらのリンクがあまり役に立たないと感じるユーザーもいるかもしれません。代わりに関連投稿や 人気投稿を表示したいと思う人もいるでしょう。

WordPressで次と前のリンクを削除するには、2つの方法があります。

方法1.WordPressテーマのコードを削除する。

WordPressで「次へ」と「前へ」のリンクを削除するには、WordPressテーマでリンクを表示するためのコードを削除する必要があります。

この方法の問題点は、テーマを更新するとすぐに、削除されたコードが元のテーマの一部であった場合、復活してしまうことだ。

これを避けるには、子テーマを作成する必要がある。

次に、親テーマで次と前のリンクを表示するレスポンシブのコードを見つける必要があります。

通常は、single.phpまたはcontent-single.phpテンプレートの中にあります。

基本的には、以下の関数を含むコードを探すことになる：

このコードは、フォーマットやパラメータが若干異なる場合がある。

例えば、私たちのテストサイトでは、テーマはリンクを表示するために次のコードを使用していました：

子テーマを使用している場合は、子テーマにこのテンプレートを複製し、次または前のリンクを表示するための行を削除する必要があります。

親テーマで削除したいのであれば、それも可能です。

コードを削除すると、WordPressは次と前のリンクを表示しなくなります。

方法2.次の投稿と過去の投稿のリンクを非表示にする。

この方法は、次と前のリンクを本当に削除するわけではない。その代わり、人間の読者には見えなくなるだけだ。

WordPressテーマに以下のカスタムCSSを追加するだけです：

変更を保存するのを忘れないでください。

そして、ナビゲーションリンクが消えるのを確認するために、あなたのサイトを訪問してください。

この投稿が、WordPressで次と前のリンクを簡単に追加する方法を学ぶのにお役に立てば幸いです。WordPressのブロックパターンの使い方や、WordPressでショートコードを使用するための必須Tipsのリストもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.