WordPress(Woo Commcerce)で郵便番号から住所を自動入力する

wordpressのプラグインで住所の自動入力できるものがあったものの、動かなかったのと、更新されてなかったので、themeのfunctions.phpで管理できるように下記のコードで対応しました。

ポイントは、県名の表示部分で、AjaxZip3.PREFMAPの県名をwoo commerceの表記と揃えたものに上書きしてるのと、woo commerceの表示切替のjsが動くように`trigger(‘change’)`を設定。

応用すれば、wordpressの郵便番号から住所を自動入力するのは大体対応できるかと。

/**
 * ADDR AUTO INPUT FROM ZIP CODE
 * */
function my_after_checkout_form(){
    $js = <<< EOM
<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
<script type="text/javascript">
AjaxZip3.PREFMAP = [
    null,       '北海道',   '青森',   '岩手',   '宮城',
    '秋田',   '山形',   '福島',   '茨城',   '栃木',
    '群馬',   '埼玉',   '千葉',   '東京都',   '神奈川',
    '新潟',   '富山',   '石川',   '福井',   '山梨',
    '長野',   '岐阜',   '静岡',   '愛知',   '三重',
    '滋賀',   '京都',   '大阪',   '兵庫',   '奈良',
    '和歌山', '鳥取',   '島根',   '岡山',   '広島',
    '山口',   '徳島',   '香川',   '愛媛',   '高知',
    '福岡',   '佐賀',   '長崎',   '熊本',   '大分',
    '宮崎',   '鹿児島', '沖縄'
];
(function($){ 
	$('input#billing_postcode').attr('onKeyUp', 'AjaxZip3.zip2addr(this,"","billing_state","billing_city","billing_address_1");');
	$('input#shipping_postcode').attr('onKeyUp', 'AjaxZip3.zip2addr(this,"","shipping_state","shipping_city","shipping_address_1");');
	AjaxZip3.onSuccess = function() {
            $('#billing_state').trigger('change');
            $('#shipping_state').trigger('change');
        };
})(jQuery);
</script>
EOM;
echo $js;
}
add_action( 'woocommerce_after_checkout_form', 'my_after_checkout_form');