カテゴリーで同じタグが付けられている記事リストを表示する

Q: 関連記事が存在しない場合はどうなりますか？

関連記事がない場合は、何も表示されません。if ($tags)の条件を使うことで、無駄なHTMLが出力されないようにしています。

Q: 表示する記事数を変更できますか？

posts_per_pageの値を変更することで、表示件数を調整できます。

Q: 表示する記事の条件をもっと絞り込みたい場合は？

post_typeやorderbyなどのパラメータを$argsに追加することで、さらに詳細な制御が可能です。

Q: ウィジェットのフォームで何か設定を追加したい場合は？

form() メソッドを拡張することで、ウィジェットの管理画面に設定を追加できます。

回遊率を高めるため、記事ページの最後にその記事が属するカテゴリー内で同じタグを共有する他の関連記事を表示するカスタマイズを紹介します。

これにより、訪問者が興味のある記事をさらに閲覧しやすくなり、サイトの滞在時間を延ばすことが期待できます。

カテゴリー内の同じタグ付き記事を記事の最後に自動表示

このカスタマイズでは、各記事の最後に「その記事が所属するカテゴリー内」で「同じタグを持つ記事リスト」を動的に表示します。

カテゴリとタグの両方のフィルタリングを行うことで、より関連性の高い記事を案内し、読者の興味を引きやすくします。

<?php
// カテゴリー内で同じタグが付いている記事リストを表示
function display_related_posts_by_category_and_tag() {
    global $post;
    $categories = wp_get_post_categories($post->ID); // 現在の記事のカテゴリーIDを取得
    $tags = wp_get_post_tags($post->ID); // 現在の記事のタグを取得

    if ($tags) {
        $tag_ids = array_map(function($tag) {
            return $tag->term_id;
        }, $tags);

        // クエリを構築して関連記事を取得
        $args = array(
            'category__in' => $categories,
            'tag__in' => $tag_ids,
            'post__not_in' => array($post->ID),
            'posts_per_page' => 5, // 表示する記事数
        );

        $related_posts = new WP_Query($args);

        // 関連記事があれば表示
        if ($related_posts->have_posts()) {
            echo '<h3>関連記事</h3><ul>';
            while ($related_posts->have_posts()) {
                $related_posts->the_post();
                echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
            }
            echo '</ul>';
            wp_reset_postdata(); // クエリをリセット
        }
    }
}
// フィルターフックで記事の最後に挿入
add_filter('the_content', function($content) {
    if (is_single()) {
        $content .= display_related_posts_by_category_and_tag();
    }
    return $content;
});
?>

カテゴリーとタグの取得

wp_get_post_categories()とwp_get_post_tags()を使用して、記事のカテゴリーIDとタグ情報を取得します。

WP_Queryで関連記事を取得

category__in と tag__in で、同じカテゴリとタグを共有する記事を検索します。
post__not_in に現在の記事のIDを指定することで、同じ記事が表示されないようにしています。

the_contentフックで記事本文の最後に関連記事を追加

add_filter('the_content', ...) で記事の本文が表示されるタイミングで関連記事リストを挿入します。

難易度：

カテゴリーとタグの取得は比較的簡単ですが、WP_Queryで条件付きのクエリを構築するにはある程度の理解が必要です。

クエリの結果をリセットしない場合、他のコンテンツ表示に影響を与えることがあるため、wp_reset_postdata()の使用が重要です。

ショートコードで関連記事を表示する方法

// ショートコードで関連記事を表示する関数
function shortcode_related_posts($atts) {
    global $post;
    $categories = wp_get_post_categories($post->ID);
    $tags = wp_get_post_tags($post->ID);

    if ($tags) {
        $tag_ids = array_map(function($tag) {
            return $tag->term_id;
        }, $tags);

        // WP_Queryで関連記事を取得
        $args = array(
            'category__in' => $categories,
            'tag__in' => $tag_ids,
            'post__not_in' => array($post->ID),
            'posts_per_page' => 5, // 表示する記事数
        );

        $related_posts = new WP_Query($args);
        $output = '<h3>関連記事</h3><ul>';

        if ($related_posts->have_posts()) {
            while ($related_posts->have_posts()) {
                $related_posts->the_post();
                $output .= '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
            }
        } else {
            $output .= '<li>関連記事が見つかりませんでした。</li>';
        }

        $output .= '</ul>';
        wp_reset_postdata(); // クエリをリセット

        return $output;
    }
    return ''; // タグがない場合は空文字を返す
}
// ショートコードを登録
add_shortcode('related_posts', 'shortcode_related_posts');

add_shortcode()関数で[related_posts]というショートコードを登録しています。
投稿や固定ページでショートコード [related_posts] を使うと、その場所に関連記事リストが表示されます。

使用方法

投稿や固定ページの本文に [related_posts] を追加するだけで、関連記事が挿入されます。

難易度：

ショートコードは比較的簡単で、どこにでも挿入できるため柔軟です。

ウィジェットで関連記事を表示する方法

class Related_Posts_Widget extends WP_Widget {
    // ウィジェットの初期化
    public function __construct() {
        parent::__construct(
            'related_posts_widget', // ウィジェットID
            '関連記事ウィジェット', // ウィジェット名
            array('description' => 'カテゴリーとタグに基づいた関連記事を表示します。')
        );
    }

    // ウィジェットの出力
    public function widget($args, $instance) {
        if (is_single()) { // シングル記事ページでのみ表示
            echo $args['before_widget'];
            echo $args['before_title'] . '関連記事' . $args['after_title'];
            echo do_shortcode('[related_posts]'); // ショートコードを利用
            echo $args['after_widget'];
        }
    }

    // ウィジェットの設定フォーム（今回は使用しない）
    public function form($instance) {}

    // ウィジェットの更新処理（今回は使用しない）
    public function update($new_instance, $old_instance) {
        return $instance;
    }
}

// ウィジェットを登録
function register_related_posts_widget() {
    register_widget('Related_Posts_Widget');
}
add_action('widgets_init', 'register_related_posts_widget');