WordPressで「前の記事」「次の記事」リンクを表示・カスタマイズする方法：コード例と活用術

以下のコード例では、Flexboxを使用して左右に振り分けるデザインを想定しています。

<div class="post-navigation">
    <div class="nav-previous">
        <?php previous_post_link('%link', '<span class="meta-nav">前回の記事</span><br>%title'); ?>
    </div>
    <div class="nav-next">
        <?php next_post_link('%link', '<span class="meta-nav">次回の記事</span><br>%title'); ?>
    </div>
</div>

このコードをスタイルシート（CSS）で調整することで、モダンなUIを実現できます。

.post-navigation {
    display: flex;
    justify-content: space-between;
    margin: 40px 0;
    padding: 20px 0;
    border-top: 1px solid #eee;
}

.nav-previous, .nav-next {
    width: 48%;
}

.nav-next {
    text-align: right;
}

.meta-nav {
    font-size: 0.8rem;
    color: #888;
}

このように構造化することで、モバイル端末で見るときにも崩れにくいレスポンシブな設計が可能になります。

アイキャッチ画像（サムネイル）付きで表示する方法

より視覚的なインパクトを与えたい場合は、記事タイトルだけでなくアイキャッチ画像を表示する方法が効果的です。

しかし、previous_post_link()関数だけでは画像URLを直接取得することはできません。

そこで、get_previous_post()やget_next_post()という関数を使用して、投稿オブジェクトを取得する方法を採用します。

以下に、サムネイル付きリンクの実装例を示します。

<div class="entry-nav">
    <?php
    $prev_post = get_previous_post();
    if (!empty($prev_post)): ?>
        <div class="prev-entry">
            <a href="<?php echo get_permalink($prev_post->ID); ?>">
                <div class="thumb"><?php echo get_the_post_thumbnail($prev_post->ID, 'thumbnail'); ?></div>
                <div class="title"><?php echo esc_html($prev_post->post_title); ?></div>
            </a>
        </div>
    <?php endif; ?>

    <?php
    $next_post = get_next_post();
    if (!empty($next_post)): ?>
        <div class="next-entry">
            <a href="<?php echo get_permalink($next_post->ID); ?>">
                <div class="thumb"><?php echo get_the_post_thumbnail($next_post->ID, 'thumbnail'); ?></div>
                <div class="title"><?php echo esc_html($next_post->post_title); ?></div>
            </a>
        </div>
    <?php endif; ?>
</div>

この方法のメリットは、取得した投稿オブジェクトの全てのデータを利用できる点にあります。

例えば、記事の公開日を表示したり、抜粋文を一部表示したりといったカスタマイズも容易になります。

ただし、記事が存在しない場合にエラーが出ないよう、必ずif (!empty($prev_post))による条件分岐を行いましょう。

特定のカテゴリーを除外してナビゲーションを作る

運用状況によっては、「お知らせ」カテゴリーや「非公開に近い管理用カテゴリー」などをナビゲーションに出したくないケースがあります。

その場合は、除外設定を適切に行う必要があります。

前述のprevious_post_link()の第4引数を使用するか、get_previous_post()の引数を活用します。

<?php
// IDが5と10のカテゴリーを除外する場合
previous_post_link('%link', '%title', false, '5,10');
next_post_link('%link', '%title', false, '5,10');
?>

除外設定を適切に行うことで、サイトのコンテンツに一貫性を持たせることができます。

ユーザーが迷うことのないよう、文脈に沿ったナビゲーション設計を心がけてください。

ブロックエディター環境での前後記事リンク

2026年現在のWordPress開発では、ブロックエディター（Gutenberg）をベースとした開発が主流となっています。

フルサイト編集（FSE）に対応したテーマを制作している場合は、PHPコードを直接記述するのではなく、ブロックを使用することもあります。

「投稿ナビゲーション」ブロックを使用すれば、エディター上の操作だけで基本的なリンク配置が可能です。

しかし、独自のHTML構造や高度なロジックを必要とする場合は、カスタムブロックやパターンとしてPHPファイルを切り出す手法が依然として有効です。

プロジェクトの要件に合わせて、テンプレートパーツを活用した柔軟な実装を選択してください。

UXとSEOの観点から見た注意点

「前の記事」「次の記事」のリンクを設置することは、単なる利便性の向上だけでなく、検索エンジン最適化の面でも大きな意味を持ちます。

内部リンクが網の目のように張り巡らされることで、検索エンジンのクローラーがサイトを巡回しやすくなるからです。

しかし、単にリンクを置くだけでは不十分です。

以下のポイントを意識して実装を検討しましょう。

• リンクテキスト（アンカーテキスト）には記事タイトルを含める。
• ボタンが近すぎて誤タップを招かないよう、適切な余白を設ける。
• ローディング速度に影響を与えないよう、アイキャッチ画像のサイズを最適化する。

特にモバイルユーザーにとって、親指で押しやすいサイズ感と配置は非常に重要です。

リンクが表示されない場合のフォールバック（代わりの表示）も考慮しておくと、より親切な設計となります。

応用編：カスタムタクソノミーへの対応

カスタム投稿タイプを使用している場合、通常のカテゴリーではなくカスタムタクソノミーで前後記事を制限したいケースがあります。

その場合は、previous_post_link()の第5引数にタクソノミー名を指定します。

<?php
// 'product_cat' というタクソノミー内で前後記事を移動させる
previous_post_link('%link', '%title', true, '', 'product_cat');
next_post_link('%link', '%title', true, '', 'product_cat');
?>

この指定を忘れると、デフォルトの「category」を参照してしまい、意図した動作にならないことがあります。

カスタム投稿を利用したサイト構築では、必ずタクソノミー名の指定をセットで行う習慣をつけましょう。

まとめ

WordPressで「前の記事」「次の記事」リンクを表示する方法は、非常に多岐にわたります。

シンプルな実装であれば標準のテンプレートタグだけで十分ですが、より洗練されたサイトを目指すなら、投稿オブジェクトを活用したカスタマイズが推奨されます。

まずは基本となるprevious_post_link()とnext_post_link()をマスターし、その後にデザインやカテゴリー制限などの応用へと進んでいきましょう。

適切なナビゲーションを設置することで、ユーザーにとっても検索エンジンにとっても、使いやすく価値のあるWebサイトへと成長させることができます。

今回紹介したコード例を参考に、あなたのサイトに最適な前後記事リンクを実装してみてください。

サイトの回遊率や平均滞在時間が向上し、結果としてSEOパフォーマンスの改善に繋がるはずです。