AjaxZip3からYubinbangoへの移行

2015/06/222018/01/31

Google Code の終了に伴い、AjaxZip3 が github に移行したわけですが、よく見たら、Google Code上にこんな一文が・・。

新規の設置には Yubinbango ライブラリをオススメいたします。

なぬー！

ということで早速、WordPress + Contact Form 7 のお問い合わせフォームをAjaxZip3 から yubinbango に変えるのだ。

きちんと動かすためのポイントはと言うと、要するにREADMEの最後のセクション、「YubinBangoライブラリを有効にするには？」に書いてあるのでした。

• https://github.com/yubinbango/yubinbango#yubinbangoライブラリを有効にするには

１つづつ、WordPress + Contact Form 7 での動作に合わせて解説してみます。

１）YubinBangoライブラリを読み込む

この↓１行を入れたいんですが、

[code]<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>[/code]

そのまま入れるとテキスト編集からビジュアルエディタに切り替えた瞬間にサクッと消されるので、

• テキストモードに切り替え
• <div>で囲う

[code] <div>
<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
</div>
[/code]

が一番早いかと。本来はテーマファイル（例：page-contact.php）に入れるべきかとは思いますが。

２）formタグの設定

Contact Form 7 が吐き出す <form> を修正します。

固定ページに書き込むショートコードをちょっぴり修正。

html_classの指定を追加します。

例：（※大括弧［］が全角になってますので、コピペの際はご注意を！）

[code]［contact-form-7 id="1234" title="お問い合わせフォーム１"］[/code]

↓

[code]［contact-form-7 id="1234" title="お問い合わせフォーム１" html_class="h-adr"］[/code]

３）国情報をこっそり追加

コンタクトフォーム７のフォーム編集画面内に以下の１行を追加。（非表示属性が設定されているので、画面上には表示されません）

[code]<span class="p-country-name" style="display:none;">Japan</span>[/code]

４）郵便番号入力欄を修正

[code]［text zipcode］[/code]

↓

[code]［text zipcode class:p-postal-code］[/code]

５）住所入力欄を修正

４の郵便番号と同様にして、各項目にクラス属性を追加していきます。

• 都道府県名　：　p-region
• 市町村区　　：　p-locality
• 町域　　　　：　p-street-address
• 以降の住所　：　p-extended-address

以上！