WordPress│GA4の人気記事をSWELL風に表示する例とキャッシュの確認

2024.07.262026.10.21

サーバー負荷はPV数だけでは判断できず、同時アクセス、キャッシュ、データベース更新の実測で確認します。

負荷が大きいと契約しているレンタルサーバーが使えなくなるケースもあります。

たとえば人気記事ランキングの表示です。

WordPress側でアクセスを集計する構成では、集計処理とランキング表示それぞれの負荷を確認します。

Simple GA4 Rankingは、GA4のデータを利用してランキングを表示するプラグインです。

キャッシュを利用する構成ですが、導入だけで負荷が減るとは断定できません。

本記事では負荷軽減の実測は行っていません。

Simple GA4 Rankingの設定方法

以下の配布元の記事は、2022年公開の移行・設定案内です。

利用する版の対応条件と変更内容は、配布元のリポジトリでも確認してください。

キャッシュと標準表示を確認する

キャッシュは管理画面のSimple GA4 RankingのCacheメニューから確認できます。

掲載画面にはDELETEボタンがありますが、削除前に対象のキャッシュと利用箇所を確認します。

後述の独自ショートコードは既存キャッシュを読み取るだけで、GA4からの取得やキャッシュの再生成を行いません。

独自表示へ進む前に、標準ショートコードでランキングを表示できるか確認します。

確認に使う標準ショートコードは[sga_ranking]です。

表示するだけで必ず再取得に成功するとは限らないため、結果とキャッシュの状態を確認します。

Simple GA4 RankingのSWELL人気記事ランキング風の表示

[sga_ranking]の表示はただのリストなので、SWELL人気記事ランキング風の表示をするカスタマイズしてみました。

SWELLのクラスを利用するため、テーマのバージョンやウィジェットの設定によって見た目が異なります。

サンプル

子テーマのfunctions.phpをバックアップし、複製環境で以下のコードを確認してから適用します。

PHPスニペット管理プラグインを使う場合は、functions.phpと重複登録せず、停止して戻す方法を確認します。

表示するショートコードは以下になります。

[sga_swell_popular_posts]


function sga_swell_popular_posts_shortcode($atts) {
    // キャッシュキーを取得
    $cache_data = get_transient('sga_ranking_result_keys');
    if (!is_array($cache_data) || !isset($cache_data['results']) || !is_array($cache_data['results']) || empty($cache_data['results'])) {
        return '集計中です。';
    }

    // キャッシュキーを検索
    if (count($cache_data['results']) !== 1) return '対象ランキングのキャッシュを1種類に限定してください。';
    $period_cache_key = '';
    foreach ($cache_data['results'] as $key => $result) {
        $period_cache_key = $key;
        break;  // 最初のキーを使用
    }

    if (!is_string($period_cache_key) || $period_cache_key === '') {
        return 'No cached data found.';
    }

    $post_ids = get_transient($period_cache_key);

    // NO IMAGE画像を取得
    $noimg_url = '';   // デフォルトのNO IMAGE画像のパスを指定してください

    if (!$post_ids) {
        return '集計データを確認してください。';
    }

    if (!is_array($post_ids) || empty($post_ids)) {
        return 'No posts found in cache';
    }

    ob_start();

    $rank = 1;
    $seen = array();
    echo '<ul class="p-postList -type-card -w-ranking">';
    foreach ($post_ids as $post) {
        if ($rank > 6) {  // 記事数が6を超えたらループを終了
            break;
        }
        $my_id = is_array($post) ? ($post[0] ?? null) : $post;
        if ((!is_int($my_id) && !is_string($my_id)) || !ctype_digit((string) $my_id)) {
            continue;
        }
        $my_id = (int) $my_id;
        if ($my_id < 1 || isset($seen[$my_id])) continue;
        $seen[$my_id] = true;
        if ($my_id && get_post_type($my_id) === 'post' && get_post_status($my_id) === 'publish' && get_post_field('post_password', $my_id) === '') {
            ?>
            <li class="p-postList__item">
                <a href="<?php echo esc_url(get_permalink($my_id)); ?>" class="p-postList__link">
                    <div class="p-postList__thumb c-postThumb">
                        <figure class="c-postThumb__figure">
                            <?php if (has_post_thumbnail($my_id)) : ?>
                                <img class="c-postThumb__img u-obf-cover" src="<?php echo esc_url(get_the_post_thumbnail_url($my_id, 'medium')); ?>" alt="<?php echo esc_attr(get_the_title($my_id)); ?>">
                            <?php elseif ($noimg_url) : ?>
                                <img class="c-postThumb__img u-obf-cover" src="<?php echo esc_url($noimg_url); ?>" alt="<?php echo esc_attr(get_the_title($my_id)); ?>">
                            <?php endif; ?>
                        </figure>
                    </div>
                    <div class="p-postList__body">
                        <div class="p-postList__title"><?php echo esc_html(get_the_title($my_id)); ?></div>
                        <div class="p-postList__meta"></div>
                    </div>
                </a>
            </li>
            <?php
            $rank++;
        }
    }
    echo '</ul>';

    return ob_get_clean();
}

add_shortcode('sga_swell_popular_posts', 'sga_swell_popular_posts_shortcode');