フリーエンジニアになってみた@名古屋(4年目突入)

名古屋圏でフリーランスのエンジニアとして独立した管理人S。「フリーランスエンジニアの現実」をお伝えしています。

ブログ

AjaxZip3からYubinbangoへの移行

2017/06/22

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

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

なぬー!

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

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

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

1)YubinBangoライブラリを読み込む

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

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

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

  • テキストモードに切り替え
  • <div>で囲う
<div>
<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
</div>

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

2)formタグの設定

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

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

html_classの指定を追加します。

例:(※大括弧[]が全角になってますので、コピペの際はご注意を!

[contact-form-7 id="1234" title="お問い合わせフォーム1"]

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

3)国情報をこっそり追加

コンタクトフォーム7に隠し属性を追加

クリックで拡大

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

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

4)郵便番号入力欄を修正

コンタクトフォーム7の郵便番号フィールドにクラス属性を追加

画像クリックで拡大

[text zipcode]

[text zipcode class:p-postal-code]

5)住所入力欄を修正

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

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

以上!


メールでお知らせ

少しずつ記事を追加しております。m(_ _)m

フリーエンジニアに興味がある方は、サイト更新時にメールをお送りしますので、このフォームで登録してやって頂けたら幸いです。

-ブログ
-, , ,