今回は、ワードプレスの定番プラグインの１つである『Contact Form 7』で、郵便番号から住所を自動入力するカスタマイズに関する内容です。
最近、知人から「運営しているサイトの郵便番号の住所入力が動かなくなっていた！」と連絡があったので調べてみました。
どうやら今年（2016年）の１月あたりから、Googleのライブラリでajaxzip3 が利用できなくなった様子で、それに伴い読み込むjQuery の記述を変更しなければならないようです。
jQueryの読み込み
<head>〜</head>での読み込み
1 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> |
固定ページへの記述
Contact Form 7 のショートコードを記述しているページに下記コードを記述します。
※投稿ページで利用されている方は、そちらに記述してください。
1 2 3 4 5 6 7 8 | <script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script> <script type="text/javascript"> jQuery(function(){ jQuery('#zip').keyup(function(event){ AjaxZip3.zip2addr(this,'','address','address'); }) }) </script> |
コンタクトフォームの編集
Contact Form 7 の設定画面『フォーム』の項目で下記のように記述します。
1 2 | 【郵便番号】 [text zip id:zip 12/] 【住所】 [text address id:address] |
メールで受け取るショートコード
1 2 | 【郵便番号】 [zip] 【住所】 [address] |
以上でContact Form 7 で郵便番号から住所を自動入力する機能が復活すると思います。
Google Codeの閉鎖から未対応のままの方は、一度ご確認されてみてください。
ワードプレスのショートコードを利用して項目を置換する方法
Breadcrumb NavXTのパンくずから特定カテゴリーを削除
ワードプレスの投稿画面に記事タイトル数をカウント表示させるカスタマイズ
ワードプレスで特定カテゴリーの時だけデザインを変える条件分岐
ワードプレスのサムネイル画像サイズの変更は簡単！プラグインRegenerate Thumbnails
ワードプレスのビジュアルエディタ上からCSSを適用させるカスタマイズ
