デモ

今回のデモです。
デモ
住所欄をタイプ別に複数作りました。住所が複数ある場合の解説がなく、苦労したので…。
確認画面は作っていないので、住所入力の挙動だけみてください。

使用するもの

YubinBangoです。
プラグインであるzipaddr-jpを使う方法もあるのですが、無料版だと色々制限があり、クライアント案件には不向きだなと思いました。あと実装できなくてハマりまくりました…。フォーム内に二つあったのがよくなかったんだろうか…

MW WP Formの管理画面ですること

該当箇所（この場合郵便番号と住所）を囲みます。

<h2 class="form-ttl">住所1行タイプ</h2>
<dl class="clearfix">
 	<dt>発送先住所</dt>
 	<dd>
		<div class="h-adr">
		<span class="p-country-name" style="display:none;">Japan</span>
		<dl class="form-lower">
		 	<dt>郵便番号<span class="requred-icon">必須</span></dt>
		 	<dd>[mwform_text name="zip" class="p-postal-code" placeholder="1234567"]</dd>
		 	<dt>住所<span class="requred-icon">必須</span></dt>
		 	<dd>[mwform_text name="address" class="is-big p-region p-locality p-street-address p-extended-address"]</dd>
		 </dl>
		 </div>
	</dd>
</dl>

<h2 class="form-ttl">住所複数行タイプ</h2>
<dl class="clearfix">
 	<dt>発送元住所</dt>
 	<dd>
		<div class="h-adr">
		<span class="p-country-name" style="display:none;">Japan</span>
		<dl class="form-lower">
		 	<dt>郵便番号<span class="requred-icon">必須</span></dt>
		 	<dd>[mwform_text name="zip" class="p-postal-code" placeholder="1234567"]</dd>
		 	<dt>都道府県<span class="requred-icon">必須</span></dt>
		 	<dd>[mwform_text name="address" class="is-small p-region"]</dd>
		 	<dt>市町村区<span class="requred-icon">必須</span></dt>
		 	<dd>[mwform_text name="address" class="is-big p-locality"]</dd>
		 	<dt>地名・番地<span class="requred-icon">必須</span></dt>
		 	<dd>[mwform_text name="address" class=" p-street-address is-big"]</dd>
		 	<dt>建物名</dt>
		 	<dd>[mwform_text name="address" class="is-big"]</dd>
		 </dl>
		 </div>
	</dd>
</dl>

郵便番号と住所に振られているp-から始まるクラスはYubinBango参照

footer.phpでyubinbangoを呼び出す

function.phpで呼び出しする解説が多いのですが、普通にfooter.phpで呼び出すだけで大丈夫でした。

<?php if(is_page('固定ページのスラッグ')){ ?>
<script src="//yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
<?php } ?>

functionじゃないといけない理由がある気がするんですが（よくわかっていない）…私は条件分岐でフォームを設置している固定ページだけ呼び出すようにしています。
以上で終了です。

まとめ

1.郵便番号と住所をタグで囲む
2.yubinbangoを呼び出す

個人的には住所は1行、多くても2行（番地まで&建物名）が好きです。データを分けて保存する必要ってそこまでないだろうし、スマホだと行数が増えるだけでげんなりするので…