「この記事を読んだ人はこちらも読んでいます」リンクを自動生成してサイト内回遊率をアップする方法

この記事では、投稿ページの本文下に「この記事を読んだ人はこちらも読んでいます」ブロックを自動生成してサイト内回遊率をアップする方法を紹介します。
カテゴリーが同じ投稿をランダムで取得し、デザイン付きで表示します。
固定ページ・お知らせ・アーカイブ・関連記事などには一切影響を与えません。

1 実装のポイント

• 表示対象：投稿ページのみ（is_single）
• 同一カテゴリの記事をランダムで表示
• 現在の投稿は除外
• 固定ページ・アーカイブ・お知らせには影響なし

2 functions.php にコードを追加

注意： 必ず子テーマの functions.php に追加してください。親テーマに直接追加するとアップデートで消える可能性があります。

//----------------------------------------------------------------------
// 投稿ページ本文下に「この記事を読んだ人はこちらも読んでいます」ブロックを追加
//----------------------------------------------------------------------
add_filter('the_content', function($content) {

    // 投稿ページのみ実行（固定ページ・アーカイブ・お知らせを除外）
    if (!is_single() || is_page() || is_category() || is_archive()) {
        return $content;
    }

    global $post;
    $categories = get_the_category($post->ID);
    if (!$categories) return $content;

    // 最初のカテゴリを取得
    $category_id = $categories[0]->term_id;

    // 同じカテゴリ内の他の記事を取得（現在の投稿は除外）
    $related_posts = get_posts([
        'category' => $category_id,
        'numberposts' => 3,
        'post__not_in' => [$post->ID],
        'orderby' => 'rand',
    ]);

    if (!$related_posts) return $content;

    ob_start();
    ?>
    <div class="related-category-box">
        <h3>この記事を読んだ人はこちらも読んでいます</h3>
        <ul>
            <?php foreach ($related_posts as $related): ?>
                <li>
                    <a href="<?php echo get_permalink($related->ID); ?>">
                        <?php echo get_the_title($related->ID); ?>
                    </a>
                </li>
            <?php endforeach; ?>
        </ul>
    </div>
    <?php
    $related_html = ob_get_clean();

    // 本文の下に追記して出力
    return $content . $related_html;
});
    

3 汎用CSS

/* ------------------------------------------------
 * 「この記事を読んだ人はこちらも読んでいます」デザイン
 * --------------------------------------------- */

.related-category-box { /** ブロック全体 **/
  margin: 40px 0; /** 本文との間に余白 **/
  padding: 20px; /** 内側余白 **/
  background: #f9f9ff; /** 淡いブルー背景 **/
  border-left: 5px solid #0073aa; /** 左線をWordPressブルーに **/
  border-radius: 8px; /** 角を丸く **/
}

.related-category-box h3 { /** 見出しタイトル **/
  font-size: 1.2rem; /** 文字サイズ **/
  margin-bottom: 15px; /** 下余白 **/
  color: #0073aa; /** タイトルカラー **/
  font-weight: 700; /** 太字 **/
}

.related-category-box ul { /** 記事リスト全体 **/
  list-style: none; /** 「・」を削除 **/
  margin: 0; /** 余白リセット **/
  padding: 0; /** 内側余白リセット **/
}

.related-category-box li { /** 各リスト要素 **/
  margin-bottom: 10px; /** 下余白 **/
  border-bottom: 1px dashed #ccc; /* 各項目の下に点線 */
  text-indent: -1em; /** ← 1文字分戻す（行頭をそろえる） **/
  padding-left: 1.2em; /** ← マーカー分の余白を確保 **/
  position: relative; /** 擬似要素配置の基準 **/
}

.related-category-box li a { /** リンクデザイン **/
  text-decoration: none; /** 下線削除 **/
  color: #0073aa; /** 通常文字色 **/
  transition: color 0.3s; /** ホバー時の変化を滑らかに **/
}

.related-category-box li::before {
  content: "・"; /** カスタムの「・」 **/
  color: #0073aa; /** WordPressブルー **/
  font-weight: bold;
  position: relative; /** 行内で自然に配置 **/
  left: 0; /** 水平方向の調整不要 **/
}
    

4 代用プラグイン

プラグインで同様の機能を実現する場合は、Yet Another Related Posts Plugin (YARPP) や Contextual Related Posts が人気です。
ただし、今回のコードはPHPのみで軽量動作するため、プラグイン不要です。

5 まとめ

• 投稿ページのみで「おすすめ記事」ブロックを自動表示
• 同じカテゴリの記事をランダムに取得
• お知らせ・固定ページ・アーカイブには非表示
• PHPとCSSのみで実装可能（プラグイン不要）

投稿本文下に自動でおすすめ記事を挿入することで、読者の回遊率アップに効果的です。
WordPress標準機能だけでシンプルに実装できる便利なコードです。