Tagged ajaxzip

Browsing all posts tagged with ajaxzip

  • 2013年5月27日
  • By LRI-Magazine
  • WordPressのContact Form 7にAjaxZip3で郵便番号データ自動更新を組込 はコメントを受け付けていません
  • in 時短

WordPressのContact Form 7にAjaxZip3で郵便番号データ自動更新を組込

2016年1月よりgoogleのcode設置サービスが廃止となり、ajaxzip3の設置アドレスがgithubへ移行されました。

 

想うこと多々ありで、朝からウェブサイトの更新・変更作業に没頭している生活総合研究所株式会社の宮平浩示です。

2011年2月に、「WordPressのContact Form 7にAjaxZip2で郵便番号自動変換を組み込み成功」と便利なスクリプトを組み込んだおかげで、ウェブフォームの住所入力の手間が非常に軽減され喜んでいたのですが、いつの間にかさらに便利になったAjaxZip3のスクリプトが公開されていたので早速、組み込みに挑戦してみました。(AjaxZip2を既に導入されている場合はとても簡単です)

■事前準備

その1:ContactForm7の郵便番号入力テキストを[text* zip]→[text* zip id:zip]にしておく

その2:ContactForm7の都道府県入力テキストを[text* pref]もしくは[text* pref id:pref]にしておく

その3:ContactForm7の住所入力テキストを[text* addr]もしくは[text* addr id:addr]にしておく

 

■AjaxZip3の組み込み

その1:wordpressで使用しているthemesにあるheader.phpファイルの中で、<?php wp_head() ?>もしくは</head>を探して下さい。

その2:<?php wp_head() ?>の後ろ、もしくは</head>の前に↓のスクリプトをこのままコピー&ペーストして下さい。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.0/jquery.min.js"></script>
<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('zip','','pref','addr');
return false;
})
})
</script>
 

以上で完成です。これで郵便番号データを手動更新する手間がなくなりますので、ある意味メンテナンスフリーになりますので、是非お試しください。

×