WordPressでお問い合わせやお申し込みなどのフォームを簡単に作成できるプラグイン・MW WP Formで、郵便番号から住所を自動で入力するサンプルを紹介します。
郵便番号による住所の自動入力には、導入がJavaScriptで比較的容易なYubinBangoを使わせていただきます。
YubinBangoライブラリの読み込み設定
まずはfunctions.phpにYubinBangoライブラリを読み込む記述します。
<script src="//yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>functions.php
// オリジナルテーマ用JS読み込み
function my_scripts() {
// yubinbango
wp_enqueue_script( 'yubinbango', '//yubinbango.github.io/yubinbango/yubinbango.js', array(), null, true );
}
add_action( 'wp_enqueue_scripts', 'my_scripts');続けてMW WP FormのFormタグにクラスを付与する関数を記述します。
functions.php
// MW WP Formのクラスをyubinbangoのクラスに変更する
function mwform_form_class() {
?>
<script>
jQuery(function($) {
$( '.mw_wp_form form' ).attr( 'class', 'h-adr' );
});
</script>
<?php
}
add_action( 'wp_head', 'mwform_form_class', 10000 );これでFormタグに’h-adr’が付与されます。※参考MW WP Formで出力される内にクラスを指定したい
MW WP Form側での設定
国名を設定
MW WP Formのフォームの編集画面で、国名（今回はJapan）を下記のように記述します。
<span class="p-country-name" style="display: none;">Japan</span>郵便番号入力フォームタグを設置
MW WP Formの機能でフォームタグを下記のように挿入します（name属性やサイズは任意のものに変更してください）。
[mwform_text name="郵便番号" class="p-postal-code" size="10"]住所が出力されるフォームタグを設置
同じく住所が自動で入力されるフォームタグを下記のように挿入します。
[mwform_text name="住所" class="p-region p-locality p-street-address p-extended-address" size="60"]これで郵便番号を入力すると自動で住所が出力されます。さらに細かい設定（入力フォームタグを別けるなど）はYubinBangoの公式サイトをご覧ください。
コメントを残す