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

ブログ記事を読んでいて、次の記事に簡単にジャンプする方法を考えたことはありますか？

そこが次へ/前へリンクが役立つところです。これらのシンプルなナビゲーションリンクは、読者が検索することなくサイト上の他のコンテンツに誘導することで、エンゲージメントを維持します。

デフォルトでは、WordPressには次へおよび前への投稿リンクが含まれていますが、テーマによっては、表示されない場合や、希望どおりにスタイル設定されていない場合があります。

しかし、心配する必要はありません。私たちはあなたをカバーしています！さまざまな方法をテストした後、これらのリンクを追加およびカスタマイズするためのいくつかの信頼できる方法を見つけました。

このガイドでは、プラグインを使用する場合でも、カスタムコードを使用する場合でも、WordPressに次へ/前へリンクを簡単に追加する方法を説明します。

WordPressにおける次へ/前へリンクとは何ですか？

次へおよび前へリンクは、WordPressテーマに組み込まれた動的なナビゲーションリンクです。これにより、ユーザーは投稿間を簡単に移動でき、追加のクリックなしでより多くのコンテンツを発見できます。

デフォルトでは、WordPressブログの記事は逆時系列順（新しい記事が先）に表示されます。

これは、現在の投稿を閲覧しているユーザーにとって、次の投稿は現在の投稿の後に公開された投稿であり、前の投稿は現在の投稿の前に公開された投稿であることを意味します。

次/前のリンクにより、ユーザーは個々の記事やブログアーカイブページを簡単にナビゲートできます。また、ブログの ページビューを増やす のにも役立ちます。

ほとんどのWordPressテーマには、各投稿の下部に自動的に表示される組み込みの次へおよび前への投稿リンクが付属しています。ただし、一部のテーマでは表示されない場合や、WordPressウェブサイトでの表示場所や表示方法をカスタマイズしたい場合があります。

それでは、WordPressに前の記事と次の記事へのリンクを簡単に追加する方法を見ていきましょう。以下のリンクをクリックすると、お好みのセクションにジャンプできます。

• プラグインを使用してWordPressに次へ/前へリンクを追加する（最も簡単な方法）
• カスタムコードを使用して次/前のリンクを追加する
• WordPressで次/前のリンクをスタイリングする
• サムネイル付き投稿の次へ/前へリンクの追加
• WordPressページに次へ/前へリンクを追加する
• ボーナス：WordPressで次へ・前へリンクを削除する

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

この方法は簡単で、ウェブサイトにコードを追加することに慣れていない初心者におすすめです。

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

有効化したら、設定 » CBX 次 前 ページにアクセスします。ここから、ウェブサイトのどこに次/前のリンクを表示したいかを選択できます。

このプラグインを使用すると、シングル投稿、ページ、アーカイブページなどで、次へ・前へのリンク矢印を表示できます。

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

次および前のリンクをより関連性の高いものにするために、同じカテゴリまたはタグから次および前の投稿を表示することも選択できます。

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

前または次の投稿のいずれか一方の矢印のみを表示したい場合は、「投稿の表示」設定で「前」または「次」オプションを選択してください。

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

プラグインの無料版では、次の記事と前の記事への矢印のみを表示できます。スライドインポップアップなどの他の表示オプションを有効にするには、プロバージョンにアップグレードできます。

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

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

同じ タクソノミー から次の投稿/前の投稿を表示することを選択した場合、タクソノミーでナビゲートタブに切り替える必要があります。

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

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

その後、プラグイン設定のGoogle Analyticsタブに切り替え、クリックトラッキングオプションを有効にします。

残りの設定はそのままにしておくか、好みに合わせて構成できます。完了したら、「設定を保存」ボタンをクリックして変更を保存してください。

これで、WordPressウェブサイトにアクセスして、次へ/前へリンクが機能していることを確認できます。

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

カスタムコードを使用して次/前のリンクを追加する

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

これは非常に危険な場合があります。わずかなエラーでもサイトにアクセスできなくなる可能性があります。

ここでWPCodeが登場します。これは、ウェブサイトを壊すリスクなしにカスタムコードを安全に追加できる、最高のWordPressコードスニペットプラグインです。

詳細については、WPCode レビューをご覧ください。

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

有効化したら、WordPressダッシュボードからコードスニペット » +スニペットを追加ページにアクセスしてください。「カスタムコードを追加（新規スニペット）」オプションの下にある「+カスタムスニペットを追加」ボタンをクリックします。

これにより、「カスタムスニペットの作成」ページに移動し、コードのタイトルを追加することから始めることができます。

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

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

<?php the_post_navigation(); ?> 

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

コードは有効化すると、サイトで自動的に実行されます。

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

次に、コードの場所として「投稿の後で挿入」を選択します。これで、前の/次の投稿リンクが各投稿の末尾に表示されます。

ただし、他の位置を考えている場合は、そのオプションを選択できます。

最後に、一番上までスクロールして、「非アクティブ」スイッチを「アクティブ」に切り替えます。

次に、「スニペットの保存」ボタンをクリックして変更を保存します。

これで、WordPressサイトにアクセスして、次へ/前へのリンクが機能していることを確認できます。

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

これらが次および前の記事へのリンクであることを強調していません。

それを変更したい場合は、代わりに次のカスタムコードを「コードプレビュー」ボックスに追加できます。

<?php the_post_navigation( array(
 'prev_text'  => __( 'Previous Article: %title' ),
 'next_text'  => __( 'Next Article: %title' ),
 ) );
?>

WPCodeで変更を保存したら、ウェブサイトにアクセスしてください。

こちらがテストサイトでの表示です：

次へ/前の投稿タイトルと共に、特殊文字や矢印を使用することもできます。

コードを以下に置き換えてください。

<?php the_post_navigation( array(
 'prev_text'  => __( '← %title' ),
 'next_text'  => __( '%title →' ),
 ) );
?>

こちらが、このコードがテストウェブサイトでどのように表示されたかです。

次に、ユーザーが現在表示している記事に関連性の高い「次へ」と「前へ」のリンクを作成したいとします。

同じカテゴリまたはタグの次へ・前へリンクを表示することで、これを行うことができます：

<?php the_post_navigation( array(
 'prev_text'  => __( '← %title' ),
 'next_text'  => __( '%title →' ),
 'in_same_term' => true, 
 'taxonomy'	=> __( 'category' ),
 ) );
?>

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

WordPressで次/前のリンクをスタイリングする

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

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

まず、WordPress管理サイドバーから コードスニペット » スニペットを追加 ページに移動します。次に、「カスタムコードを追加（新規スニペット）」オプションの下にある「+カスタムスニペットを追加」ボタンをクリックします。

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

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

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

この基本的なCSSは、次のリンクと前のリンクを互いに隣り合わせに表示しますが、同じ行の異なる側に表示します。

.nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

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

以下は、開始点として使用できるサンプルCSSコードです。

.post-navigation {
background-color:#f3f9ff;
padding:0px;
}
.nav-previous, .nav-next{
padding:10px;
font-weight:bold
}
.nav-previous:hover,.nav-next:hover {
background-color:#0170b9;
}
.nav-previous:hover a:link ,.nav-next:hover a:link {
color:#fff;
}

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

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

「非アクティブ」スイッチを「アクティブ」に切り替えてください。

その後、「スニペットを保存」ボタンをクリックして設定を保存します。

さて、WordPressサイトにアクセスして、投稿のスタイル設定されたリンクを確認してください。

リンクテキストに背景色とホバーエフェクトが追加され、次へ/前へのリンクがより目立つようになっていることに気づくでしょう。

サムネイル付き投稿の次へ/前へリンクの追加

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

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

プラグインのアクティベーション後、コードスニペット » +スニペットを追加 ページに移動し、「カスタムコードを追加（新規スニペット）」オプションの下にある「+カスタムスニペットを追加」ボタンをクリックします。

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

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

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

function wpb_posts_nav(){
    $next_post = get_next_post();
    $prev_post = get_previous_post();
     
    if ( $next_post || $prev_post ) : ?>
     
        <div class="wpb-posts-nav">
            <div>
                <?php if ( ! empty( $prev_post ) ) : ?>
                    <a href="<?php echo get_permalink( $prev_post ); ?>">
                        <div>
                            <div class="wpb-posts-nav__thumbnail wpb-posts-nav__prev">
                                <?php echo get_the_post_thumbnail( $prev_post, [ 100, 100 ] ); ?>
                            </div>
                        </div>
                        <div>
                            <strong>
                                <svg viewBox="0 0 24 24" width="24" height="24"><path d="M13.775,18.707,8.482,13.414a2,2,0,0,1,0-2.828l5.293-5.293,1.414,1.414L9.9,12l5.293,5.293Z"/></svg>
                                <?php _e( 'Previous article', 'textdomain' ) ?>
                            </strong>
                            <h4><?php echo get_the_title( $prev_post ); ?></h4>
                        </div>
                    </a>
                <?php endif; ?>
            </div>
            <div>
                <?php if ( ! empty( $next_post ) ) : ?>
                    <a href="<?php echo get_permalink( $next_post ); ?>">
                        <div>
                            <strong>
                                <?php _e( 'Next article', 'textdomain' ) ?>
                                <svg viewBox="0 0 24 24" width="24" height="24"><path d="M10.811,18.707,9.4,17.293,14.689,12,9.4,6.707l1.415-1.414L16.1,10.586a2,2,0,0,1,0,2.828Z"/></svg>
                            </strong>
                            <h4><?php echo get_the_title( $next_post ); ?></h4>
                        </div>
                        <div>
                            <div class="wpb-posts-nav__thumbnail wpb-posts-nav__next">
                                <?php echo get_the_post_thumbnail( $next_post, [ 100, 100 ] ); ?>
                            </div>
                        </div>
                    </a>
                <?php endif; ?>
            </div>
        </div> <!-- .wpb-posts-nav -->
     
    <?php endif;
}

このコードは、サムネイル画像または投稿サムネイル付きで次の投稿と前の投稿を表示する関数を単純に作成します。

スニペットを入力したら、スイッチを「アクティブ」に切り替えて、「スニペットを保存」ボタンをクリックできます。

次に、コードスニペット » +スニペットを追加ページに戻り、「カスタムコードを追加」オプションの下にある「スニペットを使用」ボタンをクリックする必要があります。

「カスタムスニペットを作成」ページが開いたら、次のコードをコピーして「コードプレビュー」ボックスに貼り付けます：

<?php wpb_posts_nav(); ?>

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

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

次に、「挿入」セクションまでスクロールし、自動コード実行のために「自動挿入」モードを選択します。

「場所」セクションを展開し、「ページ固有」タブに切り替えることもできます。ここで、「投稿の後で挿入」オプションを選択すると、サムネイルがリンクの横に正しく表示されます。

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

これで、ウェブサイトにアクセスしてリンクが機能していることを確認できます。

さて、これらのリンクがあまりきれいに見えないことに気づくかもしれません。

WPCodeを使用して、カスタムCSSを追加してスタイルを変更することで、それを変更できます。

.wpb-posts-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 50px;
    align-items: center;
    max-width: 1200px;
    margin: 100px auto;
}
 
.wpb-posts-nav a {
    display: grid;
    grid-gap: 20px;
    align-items: center;
}
 
.wpb-posts-nav h4,
.wpb-posts-nav strong {
    margin: 0;
}
 
.wpb-posts-nav a svg {
    display: inline-block;
    margin: 0;
    vertical-align: middle;
}
 
.wpb-posts-nav > div:nth-child(1) a {
    grid-template-columns: 100px 1fr;
    text-align: left;
}
 
.wpb-posts-nav > div:nth-child(2) a {
    grid-template-columns: 1fr 100px;
    text-align: right;
}
 
.wpb-posts-nav__thumbnail {
    display: block;
    margin: 0;
}
 
.wpb-posts-nav__thumbnail img {
    border-radius: 10px;
}

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

こちらがテストサイトでの表示です：

詳細については、WordPressで前の次の投稿リンクにサムネイルを追加する方法に関するガイドをご覧ください。

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

通常、WordPressでは投稿ナビゲーションリンクはブログ記事に使用されます。それは、それらの項目が逆年代順に公開されるためです。

一方、WordPressのページは一般的に時系列順に公開されません。詳細については、WordPressにおける投稿とページの主な違いに関するガイドをご覧ください。

ただし、訪問者が次のページを簡単に見つけられるように、ページナビゲーションを表示したいユーザーもいるかもしれません。良いニュースは、以前 WPCode で使用したコードが、前のページと次のページへのリンクを表示することです。

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

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

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

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

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

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

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

<?php the_post_navigation( array(
  'prev_text'   => __( '← %title' ),
  'next_text'   => __( '%title →' ),
   ) );
?>

その後、「挿入」セクションまでスクロールし、「自動挿入」モードを選択してコードを自動実行します。

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

他に希望する位置がある場合は、ドロップダウンから適切なオプションを選択するだけです。

次に、下にスクロールして「スマート条件付きロジック」セクションを見つけ、「ロジックを有効にする」スイッチを切り替えます。

その後、「Conditions」ドロップダウンメニューから「Show」を選択し、「+ Add new group」ボタンをクリックします。

これにより、コードスニペットが表示される条件を定義する必要がある新しい設定が開きます。

前へ/次へのリンクをページにのみ表示したいので、最初のドロップダウンメニューを開き、左側の列の「どこ（ページ）」タブに切り替えます。

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

最後に、一番上までスクロールし、「非アクティブ」スイッチを「アクティブ」に切り替え、「スニペットを保存」ボタンをクリックします。これで、ページに前/次のリンクが正常に追加されました。

デモサイトではこのように表示されていました：

ボーナス：WordPressで次へ・前へリンクを削除する

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

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

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

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

WordPressで次へおよび前へリンクを削除するには、WordPressテーマにリンクを表示する責任のあるコードを削除する必要があります。

このアプローチの問題点は、テーマを更新すると、削除したコードが元のテーマの一部であった場合、復活してしまうことです。

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

次に、親テーマで次へおよび前へのリンクを表示するコードを見つける必要があります。

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

基本的に、次の関数が含まれているコードを探すことになります。

<?php the_post_navigation() ?> 

このコードは、わずかに異なる形式やパラメータを持つ場合があります。

例えば、私たちのテストサイトでは、テーマはこのコードを使用してリンクを表示していました。

the_post_navigation(
				array(
					'prev_text' => '<span class="nav-subtitle">' . esc_html__( 'Previous:', 'mytheme' ) . '</span> <span class="nav-title">%title</span>',
					'next_text' => '<span class="nav-subtitle">' . esc_html__( 'Next:', 'mytheme' ) . '</span> <span class="nav-title">%title</span>',
				)
			);

チャイルドテーマを使用している場合は、この特定のテンプレートをチャイルドテーマに複製してから、次のリンクまたは前のリンクを表示するために使用される行を削除する必要があります。

親テーマで削除したい場合は、それも可能です。

コードを削除すると、WordPressで次へおよび前へのリンクが表示されなくなります。

方法2. 次へ・前へ投稿リンクを非表示にする

この方法では、実際には次へおよび前へのリンクは削除されません。代わりに、人間が読めるように表示されなくなります。

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

nav.navigation.post-navigation {
    display: none;
}

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

次に、ウェブサイトにアクセスして、ナビゲーションリンクが消えていることを確認します。

この記事が、WordPressで次へ/前のリンクを簡単に追加する方法を学ぶのに役立ったことを願っています。また、WordPressブロックパターンの使用方法に関するガイドや、WordPressでのショートコード使用に関する必須のヒントのリストもご覧ください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。