サイト内回遊率を上げる関連記事自動生成｜クリック率アップの方法

サイト内回遊率を高めるためには、記事同士をつなげる内部リンクが効果的です。通常は記事内で手動でリンクを貼る必要がありますが、WordPressならPHPを使って関連記事リンクを自動生成することができます。

この記事では、SEOプラグインを使わずに「タグ」や「カテゴリー」を元に関連記事を自動表示する方法を紹介します。

1 functions.php にコードを追加

投稿の本文の下に、自動的に関連記事が表示されます。

//--------------------------------------------------------
// 本文の最後に関連記事リンクを自動追加（タグ優先 → カテゴリー）
//--------------------------------------------------------
function add_related_internal_links($content) {
    if (is_single() && in_the_loop() && is_main_query()) {
        global $post;

        $related_links = '';

        // 1.タグから関連記事を取得
        $tags = wp_get_post_tags($post->ID);
        if ($tags) {
            $tag_ids = array();
            foreach ($tags as $tag) {
                $tag_ids[] = $tag->term_id;
            }

            $related_posts = get_posts(array(
                'tag__in'            => $tag_ids,
                'post__not_in'       => array($post->ID),
                'posts_per_page'     => 3,
                'ignore_sticky_posts'=> 1
            ));

            if ($related_posts) {
                $related_links .= '<div class="related-links"><h3>関連記事</h3><ul>';
                foreach ($related_posts as $p) {
                    $related_links .= '<li><a href="' . get_permalink($p->ID) . '">' . esc_html(get_the_title($p->ID)) . '</a></li>';
                }
                $related_links .= '</ul></div>';
            }
        }

        // 2.タグがない場合はカテゴリーから関連記事を取得
        if (!$related_links) {
            $categories = wp_get_post_categories($post->ID);
            if ($categories) {
                $related_posts = get_posts(array(
                    'category__in'       => $categories,
                    'post__not_in'       => array($post->ID),
                    'posts_per_page'     => 3,
                    'ignore_sticky_posts'=> 1
                ));

                if ($related_posts) {
                    $related_links .= '<div class="related-links"><h3>関連記事</h3><ul>';
                    foreach ($related_posts as $p) {
                        $related_links .= '<li><a href="' . get_permalink($p->ID) . '">' . esc_html(get_the_title($p->ID)) . '</a></li>';
                    }
                    $related_links .= '</ul></div>';
                }
            }
        }

        // 本文の後ろに関連記事を追加
        $content .= $related_links;
    }
    return $content;
}
add_filter('the_content', 'add_related_internal_links');
  

2 汎用CSS、Lightningテーマcss共通

/* -----------------------------------
 * 本文の最後に関連記事リンクを自動追加
 * --------------------------------- */

/* 関連リンク全体のボックス */
.related-links {
    margin-bottom: 15px;        /* 下の余白 */
    border-left: 5px solid #0073aa; /* 左側にLightningブルーのライン */
    padding:25px 20px;          /* 内側の余白 */
    border-radius: 6px;         /* 角丸 */
    background: #f9f9ff;        /* 淡いブルー背景 */
    font-size: 1em;             /* フォントサイズ */
}

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

/* リスト全体 */
.related-links ul { /** 黒丸を削除 **/
  list-style: none; /** デフォルトのdiscを無効化 **/
  margin: 0;
  padding: 0;
}

.related-links li { /** 各項目のレイアウト調整 **/
  margin-bottom: 8px; /** 行間を少し広く **/
  padding-left: 1.6em; /** 左側に余白（・用） **/
  position: relative; /** 疑似要素位置の基準 **/
}

.related-links li::before {
  content: "・"; /** カスタムのドットを追加 **/
  position: absolute; /** 行頭に固定配置 **/
  top: 0.15em;               /* ← これを追加：ドットを少し下げる */
  left: 0; /** 左端に寄せる **/
  color: #0073aa; /** WordPressブルー（統一） **/
  font-size: 1.2em; /** やや大きく見せる（任意） **/
  line-height: 1; /** バランス調整 **/
}

/* 各関連記事アイテム */
.related-links li {
    margin: 8px 0;              /* 上下の間隔 */
    border-bottom: 1px dashed #ccc; /* 各項目の下に点線 */
}

/* リンク装飾 */
.related-links li a {
    text-decoration: none;      /* 下線なし */
    color: #0073aa;             /* Lightningブルー */
}

.related-links li a:hover {
    text-decoration: underline; /* ホバー時に下線表示 */
}

/* -----------------------------
 * スマホ向け調整
 * ----------------------------- */
@media screen and (max-width: 768px) {
    .related-links {
        font-size: 1em;       /* スマホでも読みやすいサイズ */
    }
}
  

3 テーマ別サンプルCSS

3.1 Cocoon用

CocoonにはデフォルトでSEO対策の枠が用意されていますが、いちよ掲載しておきます。

/* -------------------------------------------
 * Cocoon用：本文の最後に関連記事リンクを自動追加
 * ------------------------------------------- */

/* 関連リンク全体のボックス */
.related-links {
    margin-top: 40px;                      /* 上の余白 */
    padding: 20px;                         /* 内側の余白 */
    background: #fff;                      /* 背景色 */
    border: 1px solid #ddd;                /* 枠線 */
    border-radius: 10px;                   /* 角丸 */
    box-shadow: 0 3px 6px rgba(0,0,0,0.08); /* ほんのり影 */
}

/* 見出し（関連記事タイトル）のスタイル */
.related-links {
    font-size: 1em;      /* フォントサイズ */
    margin-bottom: 15px;   /* 下の余白 */
    text-align: center;    /* タイトルを中央揃え */
    color: #333;           /* タイトル文字色 */
}

/* リスト全体 */
.related-links ul {
    list-style: disc;                 /* 黒丸箇条書きで文字内側に丸表示 */
    margin: 0;
    padding-left: 20px;                      /* 左余白 */
    display: grid;                           /* グリッドレイアウト */
    grid-template-columns: 1fr;              /* 1列表示（必要に応じて2列に変更可能） */
    gap: 10px;                               /* 各アイテム間の間隔 */
}

/* 各関連記事アイテム */
.related-links li {
    padding: 10px;                           /* 内側余白 */
    border-bottom: 1px dashed #ccc;          /* 下線（点線） */
}

.related-links li:last-child {
    border-bottom: none;                     /* 最後の項目は下線なし */
}

/* リンク装飾 */
.related-links li a {
    display: block;                           /* ブロック表示でクリックしやすく */
    color: #111;                              /* 文字色 */
    font-weight: bold;                         /* 太字 */
    text-decoration: none;                    /* 下線なし */
}

.related-links li a:hover {
    color: #009688;                           /* ホバー時にCocoon系グリーン */
}

/* -----------------------------
 * スマホ向け調整
 * ----------------------------- */

@media screen and (max-width: 768px) {
    .related-links {
        font-size: 1em;       /* スマホでも読みやすいサイズ */
    }
}
  

4 完成イメージ

4.1 汎用テーマ、Lightning

4.2 Cocoon

5 まとめ

• functions.php にコードを追加するだけで関連記事リンクを自動生成
• タグ → カテゴリーの順で関連記事を取得
• お客様は記事投稿時にタグやカテゴリーをつけるだけでOK
• SEOプラグインなしで内部リンクを自動化でき、サイト内回遊率アップに効果的

手間なくサイト内回遊率を高めたい方におすすめの方法です。ぜひ導入してみてください！