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本執筆しました!!!