WordPressで訪問者IP別の地域コンテンツを表示する方法

著者:Lisa Farrell·2026-06-01

WordPressサイトでは、投稿、商品ページ、ランディングページで訪問者の地域に応じた内容を表示したい場合があります。Shortcodeでデフォルト内容を出力し、ブラウザから https://my.ipin.io/info を呼び出します。

設計目標

「WordPressで訪問者IP別の地域コンテンツを表示する方法」では、IP リクエストが完了する前からページが役立つ状態である必要があります。位置情報は補助データとして検証し、限定した一つの判定だけに使い、不完全な場合は採用しません。

リクエストと判定の流れ

WordPressで訪問者IP別の地域コンテンツを表示する方法: 次の流れはこの実装専用であり、一般的な IP 検索チェックリストの使い回しではありません。

  1. 手順 1 — 既定状態: shortcode fallback HTML
  2. 手順 2 — リクエスト: wp_unique_id + static guard
  3. 手順 3 — 検証: 2.5s timeout
  4. 手順 4 — 判定: sessionStorage
  5. 手順 5 — フォールバック: ipin:geo-content

本番運用を意識した実装例

WordPressで訪問者IP別の地域コンテンツを表示する方法: この例にはタイムアウト、レスポンス検証、決定的なフォールバック、フレームワーク固有のライフサイクル処理を含めています。

<?php
function ipin_geo_content_shortcode(): string {
    $id = wp_unique_id('ipin-geo-');
    $default = 'Support is available through our global help center.';
    return sprintf(
        '<aside id="%s" class="ipin-geo-note" data-default="%s">%s</aside>',
        esc_attr($id), esc_attr($default), esc_html($default)
    );
}
add_shortcode('geo_content', 'ipin_geo_content_shortcode');

function ipin_geo_content_assets(): void {
    wp_register_script('ipin-geo-content', '', [], null, true);
    wp_enqueue_script('ipin-geo-content');
    wp_add_inline_script('ipin-geo-content', <<<'JS'
(() => {
  if (window.__ipinGeoContentLoaded) return;
  window.__ipinGeoContentLoaded = true;
  const copy = {
    JP: 'Japan support: weekdays 09:00–18:00 JST.',
    DE: 'EU support: weekdays 09:00–17:00 CET.',
    US: 'US support: weekdays 09:00–17:00 ET.'
  };
  async function country() {
    const cached = sessionStorage.getItem('ipin_country');
    if (/^[A-Z]{2}$/.test(cached || '')) return cached;
    const controller = new AbortController();
    const timer = setTimeout(() => controller.abort(), 2500);
    try {
      const response = await fetch('https://my.ipin.io/info', {
        headers: {Accept: 'application/json'}, signal: controller.signal
      });
      if (!response.ok) throw new Error(`HTTP ${response.status}`);
      const data = await response.json();
      const value = String(data.country || '').toUpperCase();
      if (!/^[A-Z]{2}$/.test(value)) throw new Error('invalid country');
      sessionStorage.setItem('ipin_country', value);
      return value;
    } finally { clearTimeout(timer); }
  }
  country().then(value => {
    document.querySelectorAll('.ipin-geo-note').forEach(el => {
      el.textContent = copy[value] || el.dataset.default;
      el.dispatchEvent(new CustomEvent('ipin:geo-content', {
        bubbles: true, detail: {state: copy[value] ? 'resolved' : 'fallback'}
      }));
    });
  }).catch(() => {});
})();
JS);
}
add_action('wp_enqueue_scripts', 'ipin_geo_content_assets');

テストマトリクス

「WordPressで訪問者IP別の地域コンテンツを表示する方法」を公開する前に、モックレスポンスまたは制御可能な VPN 出口で次のケースを確認します。

条件入力 / 設定期待結果
T1[geo_content] × 22 unique DOM id; fetch × 1
T2CSP blockdefault HTML
T3latency > 2500 msAbortController; fallback
T4sessionStorage=JPfetch × 0

自動 / スモークテスト

// Browser console smoke test after inserting [geo_content] twice:
const boxes = [...document.querySelectorAll('.ipin-geo-note')];
console.assert(boxes.length === 2);
console.assert(new Set(boxes.map(x => x.id)).size === 2);

障害時の処理

WordPressで訪問者IP別の地域コンテンツを表示する方法: 障害はログや開発者ツールで確認できるようにしつつ、空のモジュールや壊れた決済画面を利用者に見せないことが重要です。

障害原因対応
CORSOrigin headerdefault HTML
script merged × 2cache pluginglobal loaded flag
country invalidschemaignore value
consent=falseanalytics eventUI state only

実運用の例

「WordPressで訪問者IP別の地域コンテンツを表示する方法」の現実的な利用例:ドキュメントサイトが shortcode で地域別のサポート時間を表示しつつ、全訪問者に同じ完全でクロール可能なヘルプ本文を残します。

本番公開時の注意

WordPressで訪問者IP別の地域コンテンツを表示する方法: 既定の HTML を完全な状態で残してください。IP 位置情報は本人確認ではなく、クライアント側の結果を権限制御に使ってはいけません。

まとめ

「WordPressで訪問者IP別の地域コンテンツを表示する方法」は、共通テンプレートではなく、独自の実装手順、テスト、フォールバック動作を持つ記事になりました。