フリーランスエンジニア実体験ブログ(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行を入れたいんですが、

[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)に入れるべきかとは思いますが。

2)formタグの設定

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

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

html_classの指定を追加します。

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

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

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

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

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

クリックで拡大

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

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

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

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

画像クリックで拡大

[code][text zipcode][/code]

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

5)住所入力欄を修正

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

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

以上!

新しい記事が追加されたらメールでお知らせ

新しい記事が追加されたらメールでお知らせ

新しい記事が追加された時、自動的にメールでお知らせ致します。 こちらのフォームにメールアドレスを入力してお申し込みください。

-ブログ
-, , ,

オススメ

1
「いまフリーエンジニアになろうとしているあなたへ」電子書籍、発売しました。僕が経験した暗黒時代、そしてフリーランスになる直前までを無料公開中。

電子書籍、発売しました。Kindleでお読みいただけます。Kindleオーナーシップライブラリー、Kindle Unlimited対象作品です。 このページでは、「はじめに」の自己紹介から、僕が経験した暗黒時代、そしてフリーランスになる直前までを無料サンプルとしてお読みいただけま ...

%d人のブロガーが「いいね」をつけました。