[wp]MW WP FORMでyubinbango.jsを使う方法+α

コピペで一発、ではないけども。

yubinbango.js

yubinbango/yubinbango
Contribute to yubinbango/yubinbango development by creating an account on GitHub.

ajaxzipの頃から唯一無二レベルで使いまくった、郵便番号を入力したら住所を自動入力してくれるやつ。今回は以下の形で導入する。

  1. yubinbango.jsを読み込む
  2. <form>にclassをつける
  3. 国指定(japan)をする
  4. 郵便番号用の<input>にclassをつける
  5. 自動入力用の<input>にclassをつける

簡単に言えば、jsの記述をしなくて良くなったってのが変更点。
調整の手間は必要なのでそれをやっていく。

MW WP FORM

MW WP Form
MW WP Form はショートコードベースのフォームプラグインです。このプラグインには沢山の機能がついています。例えば、様々なバリデーションルールを使ったり、問い合わせデータを保存することができます。

入力→確認→完了または入力→完了で構築できて汎用性が高い。
よくContact Form7と比較されてるけど、用途が明確でなければとりあえずこっちを入れておけば事足りる。

各フォームタグにidとかclassを付与できる。でも<form>にはつけられないんで、yubinbango.js導入に一手間加える必要がある。

やっていく

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>

入力部ではこんな感じで住所部分にclassを付与する。

<!-- 郵便番号 -->
[mwform_text name="zip" class="p-postal-code"]
<!-- 住所(1枠の場合) -->
[mwform_text name="adr" class="p-region p-locality p-street-address p-extended-address"]

都道府県・市区町村で分けたい場合はそのようにする。

動作確認しておしまい。

注意というか

試したのがローカル環境だからか記述がjQueryだからか、そっちで<form>にclassを付与しても動作しなかった。間違いなく動いてる上記内容でやっていけば問題ないです。とりあえず今は。

ついでに。

自動改行無効化

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)); ?>

コメント

タイトルとURLをコピーしました