WooCommerceストアでは、訪問者の地域に応じて支払い案内を変えられます。PHPが表示コンテナを挿入し、ブラウザがIP情報を取得して案内文を更新します。
APIの説明
ブラウザ側呼び出しは訪問者IPを確認し、訪問者のIP、国、地域、都市を返します。地域別表示に適しています。
{"ip":"185.220.236.7","country":"TW","region":"Taiwan","city":"Taipei"}
利用シーン
これらの利用シーンはIP情報インターフェースの価値を示し、サーバーIPと訪問者IPを明確に区別します。
- これらの利用シーンはIP情報インターフェースの価値を示し、サーバーIPと訪問者IPを明確に区別します。
- WooCommerceで訪問者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_payment_notice_html() {
$box_id = 'ipin-payment-notice-' . wp_generate_uuid4();
ob_start();
?>
<div id="<?php echo esc_attr($box_id); ?>" class="woocommerce-info ipin-payment-notice">ようこそ。これはデフォルトのコンテンツです。</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_action('woocommerce_review_order_before_payment', 'ipin_geo_payment_notice');
function ipin_geo_payment_notice() { echo ipin_geo_payment_notice_html(); }
add_shortcode('geo_payment_notice', 'ipin_geo_payment_notice_shortcode');
function ipin_geo_payment_notice_shortcode() { return ipin_geo_payment_notice_html(); }
Shortcode
[geo_payment_notice]
SEOとUXの推奨事項
デフォルト内容は完全で読みやすく保ち、地域別内容は拡張として扱います。検索エンジンは安定した内容を取得でき、API失敗時もページは利用できます。
よくあるミス
以下の問題は、記事の正確性、コードの実用性、API説明の信頼性に影響します。
- 以下の問題は、記事の正確性、コードの実用性、API説明の信頼性に影響します。
- デフォルト内容は完全で読みやすく保ち、地域別内容は拡張として扱います。検索エンジンは安定した内容を取得でき、API失敗時もページは利用できます。
- 実装前にリクエスト元を確認します。サーバーリクエストはサーバーIP、ブラウザリクエストは訪問者IPを返します。
- これらの利用シーンはIP情報インターフェースの価値を示し、サーバーIPと訪問者IPを明確に区別します。
まとめ
ブラウザ側呼び出しは訪問者IPを確認し、訪問者のIP、国、地域、都市を返します。地域別表示に適しています。
よくある質問
以下の質問はこの記事専用に整理しており、実装内容と直接関係しています。
質問:HookとShortcodeはそれぞれ何に使いますか?
回答:Hookはチェックアウトに自動表示し、Shortcodeは商品ページや料金ページに手動挿入するために使います。
質問:このコードは支払い方法を変更しますか?
回答:いいえ。支払い案内を表示するだけで、決済ゲートウェイの有効化や並び替えは行いません。
質問:なぜブラウザ側でAPIを呼び出すのですか?
回答:支払い案内は訪問者IPに基づくため、ブラウザ呼び出しが適切です。
質問:支払い案内にリンクを含められますか?
回答:はい。ただし管理画面から入力するHTMLは安全なタグだけを許可する必要があります。
質問:チェックアウトのキャッシュは問題になりますか?
回答:はい。WooCommerceのチェックアウトは通常、ページ全体キャッシュの対象にすべきではありません。