WordPress Lab

WordPressでjQueryのAjaxを使うときの注意。

2013年5月20日 月曜日

恥ずかしながら、知りませんでした・・・

ウェブエントリーズが納品するWordPressはブログとして、
静的HTMLで制作した本体サイトとセットにするのが一番多くて、

レイアウトやら見出しやら、ボタンやら、本体サイトとシームレスなデザインにすべく
WordPressのheader.phpやfooter.phpの内容を、本体側からコピペして、
共通のCSSやJavascriptも読み込んだりしてるのですが、

最近装飾的や機能的に出番が多くなったjQueryに関しては
WordPressに外部ファイルのjquery.jsを読みこむソースを書くんじゃなくて
で呼び出されたjquery.jsを使わないと、
本体サイトと同じ動きをする分にはいいかも知れないけれど、
プラグインでjQueryな動きモノを追加しちゃうと、
どっちかがあるいは両方が反映しなかったり、動かなくなったりすることがあるのです。

この現象を「コンフリクト」といいます。

僕もプログラムはおろか、Javascriptも怪しいレベルなので、ムズカシイ話はハショリますが、
じつはバージョンが同じjQueryでも、WordPressに同梱されているものと
一般にjQueryのサイトから落としてくるものとは変数の定義の仕方が異なっているので
そういうことが起こるわけです。

正しい対処としては、WordPress側のjQueryに従って、

<?php wp_head();?>

の後に、jquery.js以外の動作に関連するjsファイルを読み込ませて、
header.phpに書くJavascriptソース（プラグインコードという）は

 

(function($){
  ここにもともとのJavascriptソースを書く
})(jQuery);

あるいは

jQuery(document).ready(function($){
  ここにもともとのJavascriptソースを書く
});

 

という感じに変更しましょう。

 

（追記) もうちょっと単純に

$(function(){
	$(・・・・)・・・・
	});

 

↓ $をjQueryに表記変更するとよいみたいです。

 

jQuery(function(){
	jQuery(・・・・)・・・・
	});
});

 

ちなみに「コンフリクト」というのはWordPressにだけ起こる事象ではなく、
prototypeとjQueryのAjaxを同一HTML上で使うと動かなかったりする、
あれも「コンフリクト」なのです。

 

（以上、2013/5/19 WordBench京都での瀬戸 貴弘さんのセッションのウケウリです。感謝。)

※追記※
WordPressに同梱のjQueryが機能していないときは、header.php

<?php wp_head();?>

の前に

<?php wp_enqueue_script( 'jquery' ); ?>

を書くか、

functions.phpに以下を追記して下さい。

function load_script(){
    wp_enqueue_script('jquery');
}
add_action('init', 'load_script');