【WordPress】プラグインなしで関連記事を表示する方法

WordPressサイトで関連記事を表示することで、ユーザーが興味を持つ他のコンテンツに簡単にアクセスでき、サイトの滞在時間を増やすことができます。この記事では、プラグインを使用せずにテーマファイルにコードを追加して関連記事を表示する方法を紹介します。

関連記事を表示するテンプレートファイルの選定
関連記事を取得するカスタムクエリの追加
デザインのカスタマイズ
実装の確認と調整
まとめ

関連記事を取得するカスタムクエリの追加

関連記事を取得するために、カスタムクエリを作成します。このクエリでは、現在の投稿のカテゴリに基づいて、同じカテゴリの他の投稿をランダムに取得します。以下に、その具体的なコードを示します。

<?php
// 現在の投稿IDを取得
$current_post_id = get_the_ID();

// 現在の投稿のカテゴリIDを取得
$categories = wp_get_post_categories($current_post_id);

if ($categories) {
    // 関連記事を取得するカスタムクエリ
    $args = array(
        'category__in' => $categories, // 現在の投稿と同じカテゴリ
        'post__not_in' => array($current_post_id), // 現在の投稿を除外
        'posts_per_page' => 5, // 表示する関連記事の数
        'orderby' => 'rand' // ランダムな順序で表示
    );

    $related_posts = new WP_Query($args);

    if ($related_posts->have_posts()) {
        echo '<h3>関連記事</h3>';
        echo '<ul>';

        while ($related_posts->have_posts()) {
            $related_posts->the_post();
            ?>
            <li>
                <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
            </li>
            <?php
        }

        echo '</ul>';

        // クエリをリセット
        wp_reset_postdata();
    }
}
?>

デザインのカスタマイズ

関連記事の表示をより魅力的にするために、CSSを使用してスタイルをカスタマイズできます。例えば、以下のようにCSSを追加することで、見た目を整えることができます。

.related-posts {
    margin-top: 20px;
}

.related-posts h3 {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.related-posts ul {
    list-style-type: none;
    padding: 0;
}

.related-posts ul li {
    margin-bottom: 5px;
}

.related-posts ul li a {
    text-decoration: none;
    color: #0073aa;
}

.related-posts ul li a:hover {
    text-decoration: underline;
}

実装の確認と調整

コードを追加したら、実際にサイト上で関連記事が正しく表示されるか確認します。表示する投稿の数や順序など、必要に応じて調整を行いましょう。

まとめ

WordPressでプラグインを使わずに関連記事を表示する方法を紹介しました。カスタムクエリを使用することで、カテゴリやタグに基づいた関連記事を表示でき、ユーザーのサイト内回遊率を高めることができます。ぜひ、この方法を試してみてください。

関連記事を表示するテンプレートファイルの選定

関連記事を取得するカスタムクエリの追加

デザインのカスタマイズ

実装の確認と調整

まとめ