WordPressサイトでは、投稿、商品ページ、ランディングページで訪問者の地域に応じた内容を表示したい場合があります。Shortcodeでデフォルト内容を出力し、ブラウザから https://my.ipin.io/info を呼び出します。
設計目標
「WordPressで訪問者IP別の地域コンテンツを表示する方法」では、IP リクエストが完了する前からページが役立つ状態である必要があります。位置情報は補助データとして検証し、限定した一つの判定だけに使い、不完全な場合は採用しません。
リクエストと判定の流れ
WordPressで訪問者IP別の地域コンテンツを表示する方法: 次の流れはこの実装専用であり、一般的な IP 検索チェックリストの使い回しではありません。
- 手順 1 — 既定状態:
shortcode fallback HTML - 手順 2 — リクエスト:
wp_unique_id + static guard - 手順 3 — 検証:
2.5s timeout - 手順 4 — 判定:
sessionStorage - 手順 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] × 2 | 2 unique DOM id; fetch × 1 |
| T2 | CSP block | default HTML |
| T3 | latency > 2500 ms | AbortController; fallback |
| T4 | sessionStorage=JP | fetch × 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別の地域コンテンツを表示する方法: 障害はログや開発者ツールで確認できるようにしつつ、空のモジュールや壊れた決済画面を利用者に見せないことが重要です。
| 障害 | 原因 | 対応 |
|---|---|---|
| CORS | Origin header | default HTML |
| script merged × 2 | cache plugin | global loaded flag |
| country invalid | schema | ignore value |
| consent=false | analytics event | UI state only |
実運用の例
「WordPressで訪問者IP別の地域コンテンツを表示する方法」の現実的な利用例:ドキュメントサイトが shortcode で地域別のサポート時間を表示しつつ、全訪問者に同じ完全でクロール可能なヘルプ本文を残します。
本番公開時の注意
WordPressで訪問者IP別の地域コンテンツを表示する方法: 既定の HTML を完全な状態で残してください。IP 位置情報は本人確認ではなく、クライアント側の結果を権限制御に使ってはいけません。
まとめ
「WordPressで訪問者IP別の地域コンテンツを表示する方法」は、共通テンプレートではなく、独自の実装手順、テスト、フォールバック動作を持つ記事になりました。