WordPressに郵便番号検索窓追加する

はじめ

会員登録やサービスリクエストフォームに郵便番号を住所を検索してアドレスを自動的に挿入することができる機能を追加することが、過去には、容易ではない作業だったが、今は、次の郵便番号のサービスを利用すると、簡単にこの機能を実装することができます。

次の検索APIは、キー（Key）を別途発行する必要がなく、簡単なコードで商業用途に関係なく、無条件無料で使用可能です。 使用方法は 次の郵便番号のサービスガイドに詳しく説明します。 コードを適切に変更して、ユーザーのページに追加します。 この方法は、 WordPressでも簡単に適用することができます。

メモ： 次の検索APIが更新され、以下の方法は、正常に動作しません。 下の文の代わりに この記事を参照してください。 WooCommerceの決済画面で郵便番号検索ウィンドウを有する方法は、 この記事を参照してみてください。

Daumの郵便番号サービスを利用するには、
郵便番号検索ポップアップを浮かべうとするページに次のような方法でコードを入れるとします。

<script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>
<script>
new daum.Postcode({
oncomplete: function(data) {
// 팝업에서 검색결과 항목을 클릭했을 때 실행할 코드를 작성하는 부분입니다.
// 예제를 참고하여 다양한 활용법을 확인해 보세요.
}
}).open();
</script>

コードサンプル：

<input type="text" id="zip1"> - <input type="text" id="zip2">
<input type="button" onclick="openDaumPostcode()" value="우편번호 찾기">
<input type="text" id="addr1">
<input type="text" id="addr2">

<script src="http://dmaps.daum.net/map_js_init/postcode.js"></script>
<script>
function openDaumPostcode() {
new daum.Postcode({
oncomplete: function(data) {
document.getElementById('zip1').value = data.postcode1;
document.getElementById('zip2').value = data.postcode2;
document.getElementById('addr1').value = data.address;
document.getElementById('addr2').focus();
}
}).open();
}
</script>

会員登録フォーム

ここで会員登録フォームに適用された郵便番号検索ウィンドウを確認することができます。 会員登録プラグイン中にユーザーコードを追加する機能がある場合、上記のコードの関数スクリプト部分と部分を追加するだけです。 そして、各入力フィールドにid要素を追加できる必要があります。

ユーザーhtmlコードを追加することができない場合には、ページテンプレートを作成し、ページテンプレートファイル内scriptコードの一部を追加すると、なりそうです。

KBoard

このサイトのKBoard（WordPress 掲示板プラグイン）で作成された見積もり依頼フォームのサンプルでの郵便番号を検索ウィンドウを確認することができます。 Kボードでは、上記の会員登録フォームより簡単にアドレス検索ウィンドウを追加することができます。 script部分のコードを対応するskinフォルダの下にあるeditor.phpファイルの適切な場所に追加するだけです。 （フィールドを追加する方法は、 ここをご覧ください。）

上記の見てきたように WordPressでもDaumアドレス検索APIを使用すると、簡単にアドレス検索ウィンドウを実装することができます。 今住所検索ウィンドウを追加する作業を次のアドレス検索サービスを利用して、簡単に解決してください。