Advanced Custom Fieldsでクリックしたら住所が自動入力されるボタンを作る
Advanced Custom Fieldsで作成したフィールドで郵便番号と住所を入力するとき、郵便番号を入力したら住所は自動入力される機能を作ってみました。これが正しい方法かは分かりませんが、応用すれば色々できそうです。
カスタム投稿タイプを追加
add_action('init', function() {
register_post_type('shops', [
'label' => 'お店',
'labels' => [
'all_items' => 'お店一覧'
],
'public' => true
]);
});
例えばお店を紹介するサイトを作るとして、functions.php
にカスタム投稿タイプ shops
を追加します。
カスタムフィールドを追加

郵便番号と住所というカスタムフィールドを追加します。

また、郵便番号のフィールドで、Prependという項目にボタンを設置します。設定できたら右上の[公開]をクリックすればOKです。
ボタンに機能を追加

[お店]→[新規追加]をクリックするとこのような画面になります。今の状態だとこの住所自動入力ボタンをクリックしても何も起きません。このボタンに機能を追加していきます。
<?php
add_action('admin_print_footer_scripts-post-new.php', function() {
// カスタム投稿タイプがshopのとき
if (get_post_type() === 'shops') : ?>
<script>
(function($) {
$('#acf-postal_code .button').on('click', function() {
$.ajax({
type: 'get',
url: '//api.zipaddress.net',
data: {
zipcode: $('#acf-field-postal_code').val()
},
timeout: 10000
})
.done(function(res) {
if (res.code === 200) {
$('#acf-field-address').val(res.data.fullAddress);
} else {
$('#acf-field-address').val('存在しない住所です。');
}
});
});
})(jQuery);
</script>
<?php
endif;
});
functions.php
にボタンをクリックしたらajaxで住所を取得するようにします。Advanced Custom Fieldsのドキュメントを読んでいて、JavaScriptを読み込むフックがあったのですが有料版限定の機能だったため、admin_print_footer_scripts
フックを利用しました。

これで、郵便番号を入力してボタンをクリックすると、住所が自動入力されるようになります。
CSS本執筆しました!!!
CSS本出します!1/29発売予定
— たかもそ@CSS本1/29発売!! (@takamosoo) 2018年12月31日
自分がCSS学びたての頃にもっとはやく知りたかったテクニックを載せています。CSSの基礎知識について解説していないので、中級者〜向けとなります。CSS入門書を読んではみたものの、思い通りに作れない人にオススメです。
よろしくお願いします。https://t.co/fkz1dM03Pj pic.twitter.com/suYyaPqwIs