今回はレアな情報ではありませんが、お問い合わせフォームなどで郵便番号を入力すると住所を自動入力してくれる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の投稿画面にのみ実装されます。
