タグを利用して関連記事リンクを自動生成してサイト内回遊率をアップする方法

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

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

functions.php にコードを追加

子テーマの 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');
  

装飾用CSS

子テーマの style.css に以下を追加すると、関連記事が見やすくなります。

/*本文の最後に関連記事リンクを自動追加*/
.related-links {
    margin-top: 30px;
    padding: 15px;
    border-top: 2px solid #ccc;
    background: #f9f9f9;
}
.related-links h3 {
    font-size: 1.2em;
    margin-bottom: 10px;
}
.related-links ul {
    list-style: disc inside;
    padding-left: 10px;
}
.related-links li {
    margin: 5px 0;
}
  

テーマ別サンプルCSS

Lightning用

/*Lightning 本文の最後に関連記事リンクを自動追加*/
.related-links {
    margin: 40px 0;
    padding: 20px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    background: #fafafa;
}
.related-links h3 {
    font-size: 1.3em;
    font-weight: bold;
    margin-bottom: 15px;
    border-left: 5px solid #0073aa; /* Lightningブルー */
    padding-left: 10px;
}
.related-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.related-links li {
    margin: 8px 0;
}
.related-links li a {
    text-decoration: none;
    color: #0073aa;
}
.related-links li a:hover {
    text-decoration: underline;
}
  

（例）

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 h3 {
    font-size: 1.2em;
    margin-bottom: 15px;
    text-align: center;
    color: #333;
}
.related-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
    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系のグリーン */
}
  

（例）

まとめ

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

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