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の公式サイトをご覧ください。
コメントを残す