WordPress + Contact Form 7 + AjaxZip2
jQueryに僕が弱いのではまったのですが、もしかすると同じような情報を探している人もいるかもしれないので、メモ。
Contact Form 7はWordPressで簡単にフォームを作ることができるプラグイン。AjaxZip2は郵便番号を入力すると、ボタンなどをクリックせずに住所をテキストボックスなどに出力させることができるJavaScriptライブラリ。この2つをWordPress上で組み合わせる方法。
まず、WordPressでjQuery（またはPrototype）を使うにはちょっとしたコツがいります。理由は次のエントリーを参照してください。
そこで、jQueryはこんな感じで読み込みます。header.phpあたりのhead要素内で、さらにwp_head()よりも先に、
<?php wp_enqueue_script('jquery'); ?> <?php wp_enqueue_script('ajaxzip2', 'http://hoge/wp-content/themes/hoge/ajaxzip2/ajaxzip2.js'); ?>
と書きます。本来はこれで動くはずだったのですが、なぜか全く動かず。そこで、wp_head()の下に次のように追記。
<script type="text/javascript"> AjaxZip2.JSONDATA = 'http://hoge/wp-content/themes/hoge/ajaxzip2/data'; </script>
これで動きました。
AjaxZip2は郵便番号を入力するinput要素に、onKeyUpイベントハンドラを書く必要があるのですが、Contact Form 7はinput要素に直接コードを書き込むことができません（正確にはonKeyUpのオプションがない）。
そこで、まず、Contact Form 7で郵便番号を入力するテキストボックスの要素を、
[text* zip id:zip]
こんな感じでid属性を与え、作ります。そして、先のhead要素内に書いたJavaScriptにid属性を扱えるように追記します。
<script type="text/javascript"> AjaxZip2.JSONDATA = 'http://hige/wp-content/themes/hoge/ajaxzip2/data'; //< ![CDATA[ jQuery(function(){ AjaxZip2.JSONDATA = '<?php bloginfo("template_directory") ?>/ajaxzip2/data'; jQuery('#zip').keyup(function(event){ AjaxZip2.zip2addr(this,'your-pref','your-city'); }) }) //]]> </script> </head>
これできちんと動くようになりました。
今回はこちらの記事を参考にしました。
