郵便番号から住所を表示するライブラリーAjaxZip3を使うと、リンクするだけで大量の郵便番号から住所を取得することができます。
最近そのAjaxZip3を仕事で使うことがあったり、Facebookでそれに関する書き込みを見たりコメントをいただいたりしたのでこの機会にAjaxZip3を使ってContact Form 7で郵便番号を入れたら住所が入るようにする、について前回の記事より簡単にできる改訂版の記事を書こうと思います。
AjaxZip3に関する情報 — googlecode.com が利用できなくなる
昨年末に、
Google Codeの閉鎖に伴い、設置済みajaxzip3が2016年1月死亡確定。引き続き利用するにはjsの読み込みをgithubに変更が必要。
というこの記事がたまたまタイムラインに流れました。これを見たときに「あ～！そうかー、それじゃぁ変えなくっちゃ」と思ったのですがよく考えると昨年9月頃にそのことに気がついて、記事を修正していました。
2016年1月25日にGoogleにあるライブラリーは使えなくなるようですのでもし、
<script src="http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js" charset="UTF-8"></script>
このように googlecode.com のソースを使っている場合は
<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
この github のソースを使うように変更する必要があります。
WordPressのプラグイン Contact Form 7 でAjaxZip3を使えるようにする
お問い合わせフォームのプラグインでは一番有名なContact Form 7でAjaxZip3を使えるようにします。前回のblog記事よりもう少し簡単に入れられるように変えてみました。
郵便番号7桁の入力欄で1つの住所欄に出力する方法
インストールした Contact Form 7 に郵便番号7桁の入力欄と住所欄を追加します。
<p>郵便番号<br /> [text zip 7/7 id:zip]</p> <p>住所<br /> [text address 80/ id:address]</p>
子テーマのfunctions.phpに
function add_head_link() {
echo '<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>';
echo "
<script type=\"text/javascript\">
jQuery(function($){
$(\"#zip\").attr('onKeyUp', 'AjaxZip3.zip2addr(this,\'\',\'address\',\'address\');');
})";
echo '</script>';
}
add_action('wp_head', 'add_head_link');
を追加します。
内容は、
・add_action(‘wp_head’ で指定したfunctioにhead内に表示させたいソースを記述
・JQuery https://ajaxzip3.github.io/ajaxzip3.js を読み込む
・JQuery zip というidを持つ項目に入力があったときに(onKeyUp)addressという名前を持つ項目に住所を表示する
コードとなっています。
この状態で、お問い合わせフォームに郵便番号を入力すると住所欄に住所が貼り付けられます。
郵便番号3桁+4桁の入力欄で3つの住所欄に出力する方法
郵便番号欄を3桁+4桁の入力欄にして、3つの住所欄(都道府県、市区町村、町域大字)に郵便番号から該当する住所を表示します。
Contact Form 7 に項目を追加します。
<p>郵便番号<br /> [text zip1 3/3 id:zip1] - [text zip2 4/4 id:zip2] </p> <p>都道府県<br /> [text prefecture 80/ id:prefecture]</p> <p>市区町村<br /> [text city 80/ id:city] </p> <p>町域大字・番地<br /> [text street 80/ id:street] </p>
これで郵便番号が2つと住所欄が3つ表示されるようになります。
子テーマのfunctions.phpに以下のコードを追加します。
function add_head_link() {
echo '<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>';
echo "
<script type=\"text/javascript\">
jQuery(function($){
$(\"#zip\").attr('onKeyUp', 'AjaxZip3.zip2addr(this,\'\',\'address\',\'address\');');
$(\"#zip2\").attr('onKeyUp', 'AjaxZip3.zip2addr(\'zip1\',\'zip2\',\'prefecture\',\'city\',\'street\');');
});";
echo '</script>';
}
add_action('wp_head', 'add_head_link');
先ほどの郵便番号が1つで住所が1つと共存できるので、新しく zip2というidが入力されたらzip1とzip2から住所を検索してprefectureとcityとstreetという名前の項目に表示するというコードを1行追加しました。
これを実行すると、
このように郵便番号を入力したときに３つの住所欄に値が表示されるようになります。
これで最小入力最小出力と最大入力最大出力の例をここに書きましたのであとはお好みで入力欄や住所欄の数を変えるといいかなと思います。
おまけ:入力フォームの幅が100%固定になってしまうテーマでの対応
既に貼り付けてある画面のハードコピーを見ると郵便番号欄が100%の幅になってしまっています。
ここで使っている親テーマは twentyfifteen でフォーム部品の幅は100%となっています。Contact Form 7のときだけこの指定を外したいと思いました。
使っている子テーマのstyle.cssに、
input[type="text"].wpcf7-text {
width: auto;
}
この記述を追加します。これはContact Form 7のテキスト入力域でclassがwpcf7-textのときだけwidth:をauto(自動)にするという記述です。
再度読み込み直すと、
こんな感じに郵便番号欄らしくなりました(^^)/
コメント
コメント一覧 （17件）
こんにちは。はじめまして。
記事を参考にさせていただいて、テストしてみたのですが、「郵便番号3桁+4桁の入力欄で3つの住所欄に出力する方法」のソースを「functions.php」に記述して保存すると、
Parse error: syntax error, unexpected ‘ echo’ (T_STRING) in /フルパス/wp-content/themes/twentyfifteen/functions.php on line XXX
のような形のエラーが出て、functions.phpをアップロードし直さないとサイトにアクセスできなくなってしまいました。
試したテーマは「Twenty Fifteen」「Twenty Ten」です。
私の環境の問題なのか分からないのですが・・・
みやこさん、こんにちは！スミマセン、確かに確認してみたらエラーになっていました。必ず実行したコードを張っているつもりなのにもう一カ所もなんか変だったのでいったい何をしてしまったのか…
今は正しいコードを張ったと思いますのでもう一度試してみていただけますか？
このときの自分がいったい何を確認してコードを張ったのか全く分からず、、、すみませんがよろしくお願いしますm(_ _)m
兎本美佳さま
早速のお返事、ありがとうございます！
試してみたところ、またエラーになってしまったので、コピーしたソースを確認したところ、インデントのスペースに非改行スペースが混じっていました。
私の環境では、インデントをタブに差し替えましたらうまく動作しました！ありがとうございますー。
みやこさん、こんにちは！さっそく試してみていただき、ありがとうございます。
コードも間違っていたのですが、私も試したときに見た目は全く同じで、カーソルで戻しても4個（漢字のスペースが入っていればもっと少ないはず）、なのになぜかスペースではない文字が入っていておかしいなぁと思っていました。スペースに書き換えてアップしたのですが、どうもコードの形にするときにその「非改行スペース」になってしまうのかなぁ？と思います。教えていただき、ありがとうございました。なぜ入ってしまうか、原因がわかるといいのですが～
兎本美佳さま、ごきげんよう。
固定ページに直接、JavaScriptを記述しないのは何故ですか？
みどりやさん、こんにちは！
＞固定ページに直接、JavaScriptを記述しないのは何故ですか？
そうですね、、、特に深い意味はありませんでした(^_^;。使い回しが効くかなと思って別にしてたりしましたが、直接書いた方がblogとかでは説明がしやすいですよね～
兎本美佳さま、ごきげんよう。
レスありがとうございます。
まだ、WordPressでサイトを作成する場合の一般的な流儀みたいなものがわかっていないので質問させて頂きました。
私の作業している環境で試した時には、scriptタグの前後に、勝手にpタグが挿入されたり（はまあいいとして）、
スクリプトの改行や空白の入れ方によっては、スクリプトの中にも、勝手にpタグが入り込み動かなくなったりしたので、ひょっとしたら関係あるかと思いましたが、そういうことではないんですね。
なんで、コンタクトフォームの方でpostすると、WAFが文句を言うのに、
固定ページだと沈黙しているのかわかりませんが、わからにないまま作業しています。
ちなみに私の方は、
こんな感じのコードを固定ページに貼り付けていますが、表示してソースを見ると
となっていました。
タグは表示されないのですね。失礼いたしました。
はじめまして
phpコードを子テーマのfunctions.phpに貼り付けたところ
500エラーが出てサイト自体も表示されなくなってしまいました。
サーバはロリポップですが、個々のレンタルサーバーの仕様によって、
クロススプリクティング防止で上記のようなコードが無効化される等のケースが
あるのでしょうか？
ご確認のほど、よろしくお願い致します
Sakoryuさん、おはようございます。今一度、この記事を参照して自分のWebサイトで試してみたのですが問題なく表示されました。今回の追加で「個々のレンタルサーバーの仕様によって、クロススプリクティング防止で上記のようなコードが無効化される」というようなことが起こるということは、自分としては考えられません。可能性として functions.php にコードを追加した時に誤った場所（他のfunctionが無効になるような場所）にコードを貼り付けてしまったなどということはないでしょうか。
また、まれになのですが、ブログからコピーして貼り付けたときに半角スペースが異なるコードになってしまうという現象があります。
ref http://www.saka-en.com/java/c2a0/
そうだった場合はコピーしたコードを貼り付けてから行の頭のスペース（にみえるところ）を自分で半角スペースに置き換えていくという方法で解決することができます。
ありがとうございます。再度確認してみます。
はじめまして。
こちらのコードを使って無事実装することが出来ました！
・・・が、同じフォーム内にもう一つ住所欄を作る必要があり、どうしてもうまくいきません。
色々試して12時間経過。
あっさりできたりしないのでしょうか・・・。
もし可能であればご教授願います（泣）
あやのさん、おはようございます。ほかの方もこういうご要望があるような気がしたので、ブログに書いてみました。
http://usortblog.com//ajaxzip3-contact-form-7-2017/
こちらになります。こちらでわかるのではないかなと思うのですが、もしかして勘違いでしたらまたコメントください(^^)/
ありがとうございます！
できました！！
うわぁぁぁん！うれしいです！
わざわざブログにしていただいて本当にありがとうございました。
今まで苦労は何だったのかと^^;
今回郵便番号を【3桁-4桁】で表示させることにこだわっていたので、ここのコードと、新しく作ってくださったコードを上下で貼って見比べて「うむむ」としながらやってみたらものの10分で実装できました！昨日の時点で惜しいところまで行ってたことが分かりました。あと一手が足りなかったようです。
お陰様で一つ賢くなりました～！！
本当にありがとうございます。
あやのさん、おはようございます。ブログが役立ったと聞き、うれしいです。ご報告ありがとうございます(^^)/
書いている途中で「あれ？別のパターンだったらどうしよう？」と思ってました。3桁4桁だったんですね。見比べてできたということはほんとにあともうちょっとだったとおもいますー。
こちらこそ、ブログのネタいただけてうれしく思ってます。ありがとうございます～
コンタクトフォーム7のzip参照参考にさせて頂きました。ありがとうございました。
ただ、区分として、
市区町村+番地＝「○○市+○○町 or ○○▼丁目」+「▲▲号◆番地」＝「city+street」+「street_no」
のようになるので、city+streetのまとめを教えて頂けると助かります。
でも、十分活用させていただいています。本当に有り難うございました。
はまさん、こんにちは。
＞市区町村+番地＝「○○市+○○町 or ○○▼丁目」+「▲▲号◆番地」＝「city+street」+「street_no」
＞のようになるので、city+streetのまとめを教えて頂けると助かります。
ちょっと上記でやりたいことがわかりませんでした。記事では郵便番号を入れると 八王子市三崎町 が一つの項目に入るようになりますが これをどのようになさりたい感じでしょうか？