【WordPress】管理画面で郵便番号から住所を自動入力してくれるカスタムフィールドを作る

手紙

WordPress5.0.1 と Smart Custom Fields4.1.2 でお試ししました。

1.郵便番号と住所のカスタムフィールドを用意する

カスタムフィールドは何で作っても構わないのですが、今回は私のお気に入りプラグインSCFで作ります。

郵便番号のテキストフィールドを「field_postcode」
都道府県のテキストフィールドを「field_region」
市区町村以下のテキストフィールドを「field_locality」

とします。都道府県をプルダウンにしても大丈夫です。その場合は、47都道府県名を全て値として設定してください。

2.管理画面で郵便番号検索ライブラリを読み込ませる

functions.phpにて郵便番号検索ライブラリとそれを動かす為のJSファイルを読み込ませます。
郵便番号検索ライブラリは軽くて大変有能なYubinBangoを利用します。

function custom_admin_enqueue_scripts() {
    if ( 'post' == get_post_type() ) {
        wp_enqueue_script( 'admin_postcode_script1', 'https://yubinbango.github.io/yubinbango/yubinbango.js' );
        wp_enqueue_script( 'admin_postcode_script2', get_template_directory_uri().'/admin-postcode.js', array( 'jquery' ) );
    }
}
add_action( 'admin_enqueue_scripts', 'custom_admin_enqueue_scripts' );

カスタム投稿タイプを利用する場合は、’post’の部分を書き換えてください。

3.郵便番号検索ライブラリ(YubinBango)を動かす

ライブラリを読み込ませただけでは動きません。YubinBangoを有効にする為のHTMLをjQueryで記述します。

jQuery(function(){
    var fm = $('form.metabox-location-normal');

    fm.addClass('h-adr');
    fm.prepend('Japan');
    $('[name="smart-custom-fields[field_postcode][0]"]').addClass('p-postal-code');
    $('[name="smart-custom-fields[field_region][0]"]').addClass('p-region');
    $('[name="smart-custom-fields[field_locality][0]"]').addClass('p-locality p-street-address p-extended-address');
});

もしWordPress5未満をお使いであれば、var fm = $(‘form.metabox-location-normal’); ではなく #post にすればよさげかとかと・・。

var fm = $('#post');

SCF以外でカスタムフィールドを作った場合は、管理画面のソースを見ながらaddClassする項目を合わせてください。
JSファイルができたら、admin-postcode.jsと名前を付けて functions.php と同じ階層に保存します。

4.完成!

ちゃんと動くのが確認できました!