今回はレアな情報ではありませんが、お問い合わせフォームなどで郵便番号を入力すると住所を自動入力してくれるjavascriptです。
Javascript
スクリプトの実行にはjQueryが必要です。
<script type="text/javascript"> jQuery(function($){ // 郵便番号入力による住所自動入力 $('#zipcode').change(function(){ var zip = $(this).val(); var url = 'http://api.zipaddress.net?callback=?'; var query = {'zipcode': zip}; $.getJSON(url, query, function(json){ /* json.pref 都道府県の取得 * json.address 市区町村の取得 * json.fullAddress 都道府県+市区町村の取得 */ $('#pref').val(json.pref); $('#addr').val(json.address); }); }); }); </script>
html
<form action=""> <label for="zipcode">郵便番号</label><input id="zipcode" name="zipcode" size="10"> <label for="pref">都道府県</label><input id="pref" name="zipcode" size="40"> <label for="addr">市区町村</label><input id="addr" name="zipcode" size="40"> </form>
デモ
デモ:別ウィンドウで動作を確認できます。
ちょっとだけ解説
上記スクリプトでは 郵便番号-住所検索API を利用させていただいています。
特に余計なことはしていないので、割と高速に動作するものと思います。
WordPressにでもどこにでも実装できる
シンプルなスクリプトですからどこにでも設置できます。
冒頭で述べたとおりお問い合わせフォームというのが一般的な使い方だと思いますが、その他にも、ユーザー登録フォーム、プロフィールページ、カスタムフィールドの住所入力などなど
WordPressのカスタム投稿タイプで動作させる実装例
条件設定としては、カスタム投稿タイプのスラグがestate、WordPressプラグイン Advanced Custom Fields でカスタムフィールドを実装しているとして(そうでなくても同様)
functions.phpに記述:
function my_print_footer_scripts() { global $post_type; // 投稿タイプがestateなら if ($post_type == 'estate'): ?> <script type="text/javascript"> jQuery(function($){ // 郵便番号入力による住所自動入力 $('#acf-field-zipcode').live('change', function(){ var zip = $(this).val(); var url = 'http://api.zipaddress.net?callback=?'; var query = {'zipcode': zip}; $.getJSON(url, query, function(json){ $('#acf-field-addr').val(json.fullAddress); }); }); }); </script> <?php endif; } // admin_print_footer_scriptsにフックしてestateの投稿画面表示時の下部にスクリプトを設置 add_action('admin_print_footer_scripts', 'my_print_footer_scripts', 21);
これで、カスタム投稿タイプがestateの投稿画面にのみ実装されます。