投稿記事に「前の記事・次の記事」を追加する方法

投稿記事の下に「前の記事・次の記事」を自動で表示させる方法を紹介します。ユーザーの回遊性を高め、サイト滞在時間やSEOにも効果があります。
※LightningとCocoonは、このコードがなくてもデフォルトで表示されています。

1 実装のポイント

• 前後記事リンクを functions.php で追加
• リンクの文字列やデザインを自由に変更可能
• CSSで装飾する

2 functions.php にコードを追加

//-------------------------------------------
// 前の記事・次の記事」を追加
//-------------------------------------------
add_filter('the_content', function($content) {
    if (is_singular('post')) {
        ob_start();
        ?>
        <div class="prev-next-links">
            <div class="prev-post">
                <?php
                $prev = get_previous_post();
                if ($prev) :
                    $thumb = get_the_post_thumbnail($prev->ID, 'thumbnail');
                    $title = get_the_title($prev->ID);
                    $url   = get_permalink($prev->ID);
                ?>
                    <a href="<?php echo esc_url($url); ?>">
                        <?php echo $thumb; ?>
                        <span class="post-title">&lt; <?php echo esc_html($title); ?></span>
                    </a>
                <?php endif; ?>
            </div>
            <div class="next-post">
                <?php
                $next = get_next_post();
                if ($next) :
                    $thumb = get_the_post_thumbnail($next->ID, 'thumbnail');
                    $title = get_the_title($next->ID);
                    $url   = get_permalink($next->ID);
                ?>
                    <a href="<?php echo esc_url($url); ?>">
                        <span class="post-title"><?php echo esc_html($title); ?> &gt;</span>
                        <?php echo $thumb; ?>
                    </a>
                <?php endif; ?>
            </div>
        </div>
        <?php
        $content .= ob_get_clean();
    }
    return $content;
});

3 汎用CSS

/* -----------------------------
 * 投稿記事に「前の記事・次の記事」を追加
 * ----------------------------- */

/* 前後記事リンク全体のコンテナ */
.prev-next-links {
    display: flex;                    /* 横並びに配置 */
    justify-content: space-between;   /* 前後リンクを左右に配置 */
    align-items: center;              /* 縦方向中央揃え */
    margin: 20px 0;                   /* 上下の余白 */
    gap: 20px;                        /* 前後記事間のスペース */
}

/* 前後記事リンクの基本スタイル */
.prev-next-links a {
    display: flex;                    /* 画像とタイトルを横並びに */
    align-items: center;              /* 縦方向中央揃え */
    text-decoration: none;            /* 下線を消す */
    color: #0073aa;                   /* リンク色 */
}

.prev-next-links a:hover {
    text-decoration: underline;       /* ホバーで下線表示 */
}

/* サムネイル画像 */
.prev-next-links img {
    width: 100px;                     /* 画像横幅 */
    height: 70px;                     /* 画像高さ */
    object-fit: cover;                /* 枠いっぱいに表示、縦横比保持 */
    margin-right: 10px;               /* 画像とタイトルの間隔 */
    border-radius: 4px;               /* 角を丸くする */
}

/* 「次の記事」用に画像とタイトルを反転 */
.next-post a {
    flex-direction: row-reverse;      /* 画像とタイトルの順序を逆に */
}

.next-post img {
    margin-left: 10px;                /* row-reverse時の左マージン調整 */
    margin-right: 10px;               /* 元の右マージン */
}

/* タイトルテキスト */
.prev-next-links .post-title {
    font-size: 14px;                  /* フォントサイズ */
    line-height: 1.4;                 /* 行間 */
}

/* スマホ対応 */
@media screen and (max-width: 600px) {
    .prev-next-links {
        flex-direction: column;       /* 縦並びに変更 */
        align-items: center;          /* 中央揃え */
        text-align: center;           /* テキスト中央揃え */
    }
    .prev-next-links img, .next-post img {
        margin: 0 0 5px 0;            /* 画像下に余白 */
    }
}
    

4 完成イメージ

5 代用プラグイン

「Simple Post Navigation」などのプラグインを使うことで、手動でのコード追加なしに前後記事リンクを追加できます。

6 まとめ

• 投稿記事下に前後記事リンクを自動追加可能
• 内部回遊性の向上やSEO効果に期待
• CSSで自由にデザイン変更が可能
• プラグインを使えばコード不要で実装できる
• LightningとCocoonはデフォルトで存在しているので不要