WordPressで郵便番号で住所自動入力

YubinBangoライブラリを使わせてもらって５分で実装終わる。

functions.phpへの実装

ライブラリはフォームのあるページだけで読み込ませたいので、以下を追加。

add_action('wp', 'loadYubinBangoLib');
function loadYubinBangoLib() {
  $targetPages = array('contact', 'catalog'); // 読み込ませたいページのスラッグ
  if (is_page($targetPages)) {
    wp_enqueue_script( 'yubinbango', 'https://yubinbango.github.io/yubinbango/yubinbango.js', array(), null, true );
  }
}

Contact Form 7への実装

<div class="h-adr">
  <span class="p-country-name" style="display:none;">Japan</span>
  [text your-zipcode class:p-postal-code]
  [text* your-address class:p-region class:p-locality class:p-street-address class:p-extended-address]
</div>

.h-adrで囲った部分が１まとまりになる。なので複数住所フォームがある場合でも対応できる。

.p-country-nameの部分で国を指定している。

.p-postal-codeで郵便番号入力欄を指定している。

.p-region .p-locality .p-street-address .p-extended-addressのそれぞれで、都道府県以降の住所表示欄を指定している。住所欄を複数ボックスで構成もできる。

.p-region	都道府県
.p-locality	市町村区
.p-street-address	町域
.p-extended-address	それ以降

以上です。