今回は、ワードプレスの定番プラグインの１つである『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の閉鎖から未対応のままの方は、一度ご確認されてみてください。
ワードプレスで見出しタグのショートカットが使えない？対応キーまとめ
ワードプレス-Popular Posts をカスタマイズして表示項目・ソースを変更する
ワードプレスのサムネイル画像サイズの変更は簡単！プラグインRegenerate Thumbnails
ワードプレスの投稿画面に記事タイトル数をカウント表示させるカスタマイズ
ワードプレスのページ送り（ページャー）をプラグインなしで実装する
ワードプレスの投稿編集画面を実際の表示と同一にするカスタマイズ
