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>

これできちんと動くようになりました。

今回はこちらの記事を参考にしました。

Permalink | コメント(4) | トラックバック(0)

コメントを書く

TAKAyuki_atkwsk 2010/09/10 11:45 私もハマっていて、記事を見て解決できました。Thanx!

aratako0 2010/09/10 19:53 TAKAyuki_atkwskさん

コメントありがとうございます。
お役に立てたようで何よりです。

ikeshita 2011/02/01 15:12 参考にさせて頂いたのですが、何故かうまくうごきません。
たぶん私のソースの記載がどこか間違っているのだと思います。
ファイルの位置のアドレスは自分のサーバーのアドレスに変更しているのですが、他に変更すべき所はあるのでしょうか？
<?php bloginfo("template_directory") ?>/ajaxzip2/data　はそのままペーストしていますが変更しなければいけないのでしょうか？
phpの知識も乏しくどこが悪いのかも判らない状態です。。。
簡単にお判りになるようでしたら教えて頂けますか？宜しくお願いします。

aratako0 2011/02/02 18:44 ikeshitaさん

コメントありがとうございます。考えられることは2つあると思うのですが、

1.head要素にwp_head()は入っていますか？これのことです。
http://ja.forums.wordpress.org/topic/562

2.問題を切り分けるためには、まずjQueryが動いているかどうかを確認する必要もあるのかなと思います。ajaxzipではなく、ほかのコードでちゃんとjQueryが動くかを確認してみてください。

あらた