コピペで一発、ではないけども。
ContactForm7の場合
以下の記事を参照。
yubinbango.js
GitHub - yubinbango/yubinbango
Contribute to yubinbango/yubinbango development by creating an account on GitHub.
github.com
ajaxzipの頃から唯一無二レベルで使いまくった、郵便番号を入力したら住所を自動入力してくれるやつ。今回は以下の形で導入する。
- yubinbango.jsを読み込む
- <form>にclassをつける
- 国指定（japan）をする
- 郵便番号用の<input>にclassをつける
- 自動入力用の<input>にclassをつける
簡単に言えば、jsの記述をしなくて良くなったってのが変更点。
調整の手間は必要なのでそれをやっていく。
MW WP FORM
MW WP Form
MW WP Form はショートコードベースのフォームプラグインです。このプラグインには沢山の機能がついています。例えば、様々なバリデーションルールを使ったり、問い合わせデータを保存することができます。
ja.wordpress.org
入力→確認→完了または入力→完了で構築できて汎用性が高い。
よくContact Form7と比較されてるけど、用途が明確でなければとりあえずこっちを入れておけば事足りる。
MW WP FORMは各フォームタグにidとかclassを付与できるけど、<form>には付与できない。
一手間加える必要がある。
やっていく
MW WP FORMでフォームを組み立てるんだけど、まず先頭に以下の3行をつっこむ。
<script>document.querySelector('.mw_wp_form_input form').classList.add('h-adr');</script>
<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
<span class="p-country-name" style="display:none;">Japan</span>入力部ではこんな感じ。
MW WP FORMの郵便番号と親和性があるんで、デザインに応じて好きな方を使えばOK。
<!-- 郵便番号 -->
[mwform_text name="zip" class="p-postal-code"]
[mwform_zip name="zip" class="p-postal-code"]都道府県・市区町村で分けたい場合はそのようにする。
4つのclassをすべて使い切ること。
<!-- 住所（まとめる場合） -->
[mwform_text name="adr" class="p-region p-locality p-street-address p-extended-address"]
<!-- 住所（振り分ける場合） -->
[mwform_text name="adr01" class="p-region" placeholder="都道府県"]
[mwform_text name="adr02" class="p-locality" placeholder="市町村区"]
[mwform_text name="adr03" class="p-street-address" placeholder="町域"]
[mwform_text name="adr04" class="p-extended-address" placeholder="丁目番地建物名等"]動作確認しておしまい。
動作について
郵便番号の入力が完了したタイミングで自動入力されるってだけの動作になる。
ajaxzipとの違ってinputにフォーカスしなくなった。
ちなみに、住所入力後に郵便番号を変更すると、入力した住所はすべてリセットされる。
ついでに。
自動改行無効化
MW WP FORMはinputの手前に<br>を自動挿入するようになっている。親切なんだろうけど個人的には不要なので対応する。function.phpに以下の内容を書き込めばOK。
function my_mwform_content_wpautop( $has_wpautop, $view_flg ) {
if ( $view_flg === 'input' ) {
return false;
}
return $has_wpautop;
}
add_filter( 'mwform_content_wpautop_mw-wp-form-***', 'my_mwform_content_wpautop', 10, 2 );「***」に識別子を突っ込むこと。
参考：MW WP Form の自動改行処理を設定するフィルターフックについて | WordPress.org 日本語
カスタムフィールドでショートコード使用
本文にショートコードを突っ込んでるのって何割なんだろう。
<?php echo apply_filters('the_content', get_post_meta($post->ID, '【フィールド名】', true)); ?>
コメント