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

APIの説明

ブラウザ側呼び出しは訪問者IPを確認し、訪問者のIP、国、地域、都市を返します。地域別表示に適しています。

{"ip":"185.220.236.7","country":"TW","region":"Taiwan","city":"Taipei"}

利用シーン

これらの利用シーンはIP情報インターフェースの価値を示し、サーバーIPと訪問者IPを明確に区別します。

• これらの利用シーンはIP情報インターフェースの価値を示し、サーバーIPと訪問者IPを明確に区別します。
• WordPressで訪問者IP別の地域コンテンツを表示する方法
• APIの説明
• SEOとUXの推奨事項

実装ロジック

実装前にリクエスト元を確認します。サーバーリクエストはサーバーIP、ブラウザリクエストは訪問者IPを返します。

• 実装前にリクエスト元を確認します。サーバーリクエストはサーバーIP、ブラウザリクエストは訪問者IPを返します。
• ブラウザ側呼び出しは訪問者IPを確認し、訪問者のIP、国、地域、都市を返します。地域別表示に適しています。
• 以下の例はすべて https://my.ipin.io/info を直接使用し、コメントと画面文言も現地語化しています。
• デフォルト内容は完全で読みやすく保ち、地域別内容は拡張として扱います。検索エンジンは安定した内容を取得でき、API失敗時もページは利用できます。

コード例

以下の例はすべて https://my.ipin.io/info を直接使用し、コメントと画面文言も現地語化しています。

functions.php / plugin

function ipin_geo_content_shortcode() {
    $box_id = 'ipin-geo-content-' . wp_generate_uuid4();
    ob_start();
    ?>
    <div id="<?php echo esc_attr($box_id); ?>" class="ipin-geo-box">ようこそ。これはデフォルトのコンテンツです。</div>
    <script>
    (async function () {
      const el = document.getElementById("<?php echo esc_js($box_id); ?>");
      const defaultText = "ようこそ。これはデフォルトのコンテンツです。";
const contentMap = { TW: "台湾訪問者向けコンテンツ", US: "米国訪問者向けコンテンツ", JP: "日本訪問者向けコンテンツ" };
try {
  // ブラウザ側から /info を呼び出し、訪問者IPを判定します。
  const info = await fetch("https://my.ipin.io/info").then(res => res.json());
  el.textContent = contentMap[info.country] || defaultText;
} catch (e) {
  // APIリクエスト失敗時はデフォルト値を保持します。
  el.textContent = defaultText;
}
    })();
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('geo_content', 'ipin_geo_content_shortcode');

Shortcode

[geo_content]

SEOとUXの推奨事項

デフォルト内容は完全で読みやすく保ち、地域別内容は拡張として扱います。検索エンジンは安定した内容を取得でき、API失敗時もページは利用できます。

よくあるミス

以下の問題は、記事の正確性、コードの実用性、API説明の信頼性に影響します。

• 以下の問題は、記事の正確性、コードの実用性、API説明の信頼性に影響します。
• デフォルト内容は完全で読みやすく保ち、地域別内容は拡張として扱います。検索エンジンは安定した内容を取得でき、API失敗時もページは利用できます。
• 実装前にリクエスト元を確認します。サーバーリクエストはサーバーIP、ブラウザリクエストは訪問者IPを返します。
• これらの利用シーンはIP情報インターフェースの価値を示し、サーバーIPと訪問者IPを明確に区別します。

まとめ

ブラウザ側呼び出しは訪問者IPを確認し、訪問者のIP、国、地域、都市を返します。地域別表示に適しています。

よくある質問

以下の質問はこの記事専用に整理しており、実装内容と直接関係しています。