about

Contact form7でYubinBangoを設置するメモ

メールフォームの設置は色々と面倒なのですが、流用できる作業は多いので、メモをしておくことにより次からの作業が手軽になると思います。

WordPressのプラグインである「 Contact Form 7 」を使用する際、 YubinBangoライブラリをセットできるようにするための流れをメモします。

テンプレートに手を加える部分

テンプレート側に手を加えるのはYubinBangoライブラリのjavascriptを読み込む部分になります。

function.phpに設置

function foot_set() {
	if (is_page( 'contact' )) {
		wp_enqueue_script( 'yubinbango-js', 'https://yubinbango.github.io/yubinbango/yubinbango.js', array(),'');
	}
}
add_action( 'wp_footer', 'foot_set' );

上記のようにfunction.phpにセットします。

「contact」と言う固定ページにお問い合わせフォームを設置している場合、YubinBangoライブラリを wp_footer()から読み込ませるようにしています。
is_page()で読み込ませたいページを指定することにより、指定した場所にだけJavascriptが読み込まれます。

ショートコードに追加するもの

ショートコードには「class=”h-adr”」をフォームに付ける必要があるので下記のようにショートコードにクラスを付けるようにします。

[contact-form-7 id="0000" title="お問い合わせフォーム" html_class="h-adr"]

※都合上「[]」の括弧を全角にしています。

こう書く事によりformに指定のclassが設置されます。

テンプレートに追加するもの

最後にテンプレートの該当部分にclassを設置します。

郵便番号のフォームに「p-postal-code」、住所の入力部分にそれぞれ「p-region」「p-locality」「p-street-address」「p-extended-address」を設置します。

<span class="p-country-name" style="display:none;">Japan</span>
<dl>
	<dt>■郵便番号</dt>
	<dd>[text address-postal class:p-postal-code placeholder "郵便番号入力で自動的に住所が表示されます(半角英数)"]</dd>
</dl>
<dl>
	<dt>■ご住所</dt>
	<dd>[select address-region class:p-region "県の選択" "北海道" "青森県" "岩手県" "宮城県" "秋田県" "山形県" "福島県" "茨城県" "栃木県" "群馬県" "埼玉県" "千葉県" "東京都" "神奈川県" "新潟県" "富山県" "石川県" "福井県" "山梨県" "長野県" "岐阜県" "静岡県" "愛知県" "三重県" "滋賀県" "京都府" "大阪府" "兵庫県" "奈良県" "和歌山県" "鳥取県" "島根県" "岡山県" "広島県" "山口県" "徳島県" "香川県" "愛媛県" "高知県" "福岡県" "佐賀県" "長崎県" "熊本県" "大分県" "宮崎県" "鹿児島県" "沖縄県"]</dd>
	<dd>[text address-other class:p-locality class:p-street-address class:p-extended-address]</dd>
</dl>

「p-country-name」はテンプレートの中に設置します。後は、お好みに合わせてフォームを設置します。

これでContact Form 7でYubinBangoライブラリが使用できるようになります。