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

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

実装のポイント

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

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;
});

汎用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;
    }
}
    

（例）

代用プラグイン

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

まとめ

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