WordPressに郵便番号自動入力機能を追加する「zipaddr-jp」を使ってみた

郵便番号から住所を自動を実装するためのスクリプトとして、「YubinBango.js」が便利で使うようになりました。
が、こちらのjsはソースコード上に決まったclass属性を振る必要があります。

プラグインなどで出力したフォームでは、ソースコードの書き換えが行えなかったり、手間がかかります。
今回は、Wordpress案件でプラグインで吐き出されたソースコードの住所入力のフォームに、郵便番号から住所入力を自動で行う機能を導入するために「zipaddr-jp」を使ってみました。

◆設定方法
インストール後、メニューバーに「zipaddr-jp」のボタンが追加されます。
設定はほぼ触ることはなく、そのまま進めても問題ありません。
スクリーンショットのサイトでは、郵便番号に「-」の区切りを行うために、郵便番号の区切り文字に「-」を設定しています。

[公式サイトに記載の利用サイト選択の目安]
・利用頻度もあまり高くないので簡単に使えれば良い。‥‥https://zipaddr.com/（商用版）へ
・お客様に納品するので安全性と信頼性の高いものを希望する。‥‥https://zipaddr2.com/（有償版）へ
https://zipaddr2.com/wordpress/

◆フォームソースへのID指定
〇フォームにIDを設定できる場合
inputタグを編集できる場合には、下記のルールでIDを振ります。
・郵便番号（頭3桁）・・・zip
・郵便番号（下4桁）・・・zip1
・郵便番号（7桁で使用）・・・zip
・都道府県・・・pref
・市区町村・・・city
・地域・・・area
・その他・・・addr

例）フォーム系プラグインの指定例
▽Contact Form 7での指定
[text* zip id:zip]
▽MW WP FORMっでの指定
[mwform_text name=”zip” id=”zip”]

上記はプラグインで出力されるソースコードに対してIDの指定が可能です。
既にIDが入っている、IDの指定を行えないタイプのフォームの場合には、下記のように指定を行いました。
〇既にフォームのIDが決まっていて変更ができない場合
[※変更できないID例※]
・郵便番号・・・postcode
・都道府県・・・state
・市区町村・・・address_1

上記のようなIDがすでに入っている場合、管理画面から紐付けを設定することでプラグインを動かすことができます。
下記のように指定を「オウンコード設定パラメータ」に入力して保存することで、どんなID名でも実装が行えます。

例）

zip=billing_postcode,pref=billing_state,addr=billing_address_1,bgc=#3366ff

参考サイト

郵便番号 → 住所自動入力機能 ‥‥ Wordpress用プラグインの説明です。

Wordpressと住所自動入力のZipAddrを連携させるプラグインzipaddr-jpです。

https://zipaddr2.com/wordpress/

ちゅうどう日記

メールフォームで郵便番号から住所を自動入力する方法

http://easy-life.work/2018/06/28/yuubinn/