ショートコードでサイト全体での閲覧数を表示する方法（時間制限可能）

この記事では、WordPressサイト全体の閲覧数（時間制限可能）を表示する方法を解説します。

WordPressサイト全体の閲覧数を、時間ごとのユニークIPカウントで表示する方法をご紹介します。これにより、指定した時間内に同じIPからの複数アクセスは1回だけカウントされます。

サイトの閲覧数をカウントする際、Botや管理者アクセスは除外されます。これにより、実際の訪問者数（ユーザー）だけを正確にカウントできます。

1. $limit_seconds = 86400; // 24時間
2. あるIPが 23:00 にアクセス → カウント
3. 翌日の 01:00 に同じIPがアクセス → まだ24時間経っていないのでカウントされない
4. 翌日の 23:00 に同じIPがアクセス → 24時間経過したので1件カウントされる
5. 日別ユニークIPの正確な件数（0時リセット）とズレが生じる。

1 実装のポイント

• 同一IPでのカウントを時間制限
• ショートコード [site_total_views] でどこでも表示可能
• Ajax による非同期更新も可能（※JavaScript を無効にすれば通常のショートコード表示のみ）

2 functions.php にコードを追加

// -------------------------------------------------
// サイト全体の閲覧数を更新（IPごと時間制限付きカウント）
// -------------------------------------------------
function increment_site_view_count() {

    // --- タイムゾーンを日本時間に設定 ---
    date_default_timezone_set('Asia/Tokyo');

    $user_ip = $_SERVER['REMOTE_ADDR'];
    $user_agent = strtolower($_SERVER['HTTP_USER_AGENT'] ?? '');
    $limit_seconds = 86400; // 24時間。制限時間（秒）ここを数字で自由に設定

    // ▼ Bot判定キーワード（必要に応じて追加可能）
    $bot_keywords = [
        'bot', 'crawl', 'spider', 'slurp', 'bingpreview',
        'mediapartners-google', 'facebookexternalhit',
        'python-requests', 'curl', 'wget', 'feedfetcher',
        'twitterbot', 'yandex', 'petalbot', 'baiduspider'
    ];

    // ▼ Botならカウントしない
    foreach ($bot_keywords as $bot_keyword) {
        if (strpos($user_agent, $bot_keyword) !== false) {
            return; // botアクセス → カウントせず終了
        }
    }

    // 保存されたIPリストを取得（形式: array( 'IP' => タイムスタンプ )）
    $counted_ips = get_option('site_total_views_ips', array());

    $now = time();

    // IPが記録されている場合
    if (isset($counted_ips[$user_ip])) {
        $last_time = intval($counted_ips[$user_ip]);

        // 制限時間以内ならカウントしない
        if (($now - $last_time) < $limit_seconds) {
            return;
        }
    }

    // カウント更新
    $total = get_option('site_total_views', 0);
    update_option('site_total_views', $total + 1);

    // IPと現在時刻を保存
    $counted_ips[$user_ip] = $now;
    update_option('site_total_views_ips', $counted_ips);
}
add_action('template_redirect', 'increment_site_view_count');

/** サイト全体の閲覧数を取得 */
function get_site_total_views() {
    return intval(get_option('site_total_views', 0));
}

/** ショートコードで表示 */
function site_total_views_shortcode() {
    return '' . get_site_total_views() . '';
}

/** Ajax用スクリプトを読み込み */
function enqueue_site_total_views_script() {
    wp_enqueue_script(
        'site-total-views-ajax',
        get_stylesheet_directory_uri() . '/js/site-total-views.js',
        array('jquery'),
        '1.0',
        true
    );

    wp_localize_script('site-total-views-ajax', 'siteTotalViewsData', array(
        'ajax_url' => admin_url('admin-ajax.php')
    ));
}

add_action('wp_enqueue_scripts', 'enqueue_site_total_views_script');

add_action('wp_ajax_get_site_total_views', 'ajax_get_site_total_views');
add_action('wp_ajax_nopriv_get_site_total_views', 'ajax_get_site_total_views');

function ajax_get_site_total_views() {
    wp_send_json_success(array(
        'total' => get_site_total_views()
    ));
}

add_shortcode('site_total_views', 'site_total_views_shortcode');

3 完成イメージ

4 JavaScript にコードを追加（任意、非同期更新用）

ファイル名：site-total-views.js
保存先：wp-content/themes/child-theme/js/site-total-views.js

document.addEventListener('DOMContentLoaded', function() {
    const el = document.querySelector('.site-total-views');
    if (!el || !siteTotalViewsData) return;

    fetch(siteTotalViewsData.ajax_url, {
        method: 'POST',
        headers: {'Content-Type':'application/x-www-form-urlencoded'},
        body: 'action=get_site_total_views'
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            el.textContent = data.data.total;
        }
    });
});

  

4.1 ディレクトリ構造

5 汎用CSS

/* -----------------------------
 * サイト全体の閲覧数表示
 * ----------------------------- */

/* 閲覧数全体を囲むボックス */
.site-total-views {
    display: inline-block;       /* インライン要素として表示、幅は内容に合わせる */
    padding: 2px 8px;            /* 上下2px、左右8pxの内側余白 */
    background-color: #f0f0f0;   /* 薄いグレーの背景色 */
    border-radius: 4px;          /* 角を丸くする */
    font-size: 0.9em;            /* 文字サイズを少し小さめに設定 */
    color: #333;                  /* 文字色をダークグレー */
}

3 完成イメージ

本日までの閲覧者数4547人

7 まとめ

• サイト全体のユニークIPごとの閲覧数をカウント
• 投稿ごとの post_meta は使用しない
• Ajax を利用すれば非同期で最新値を表示可能

8 Botアクセス除外の一覧

サイトの閲覧数をカウントする際に、以下のBotは除外されます：

※googlebotを回避しても、SEO対策には影響しません。見た目の件数だけ回避しています。