ショートコードでサイト全体での閲覧数（カウンター）を表示する方法

この記事では、WordPressサイト全体の閲覧数（全投稿の合計カウント）を表示する方法を解説します。

実装のポイント

• 同一IPが何記事見ても1カウントだけカウント
• ショートコード [site_total_views] でどこでも表示可能
• Ajax による非同期更新も可能（※JavaScript を無効にすれば通常のショートコード表示のみ）

functions.php にコードを追加

子テーマの functions.php に以下を追加します。
※ <?php と ?> は不要です。

/** サイト全体の閲覧数を1件更新（IPごと1回カウント） */
function increment_site_view_count() {
    $user_ip = $_SERVER['REMOTE_ADDR'];

    // 既にカウント済みかチェック
    $counted_ips = get_option('site_total_views_ips', array());
    if (in_array($user_ip, $counted_ips)) return;

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

    // IPを保存
    $counted_ips[] = $user_ip;
    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() . '';
}
add_shortcode('site_total_views', 'site_total_views_shortcode');

/** 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');

/** Ajaxハンドラ */
function ajax_get_site_total_views() {
    wp_send_json_success(array('total' => get_site_total_views()));
}
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');

  

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

ファイル名：post-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;
        }
    });
});

  

子テーマのディレクトリ構造

汎用CSS

.site-total-views {
    display: inline-block;
    padding: 2px 8px;
    background-color: #f0f0f0;
    border-radius: 4px;
    font-size: 0.9em;
    color: #333;
}

  

（例）

まとめ

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