こんにちわ。
開発グループの姿と言います。
スタッフブログに登場するの、どれ位ぶりでしょうか…
今日は、基本の部分について、お話させていただきたいと思います。

とっても有名なJavascript「Jquery.js」。
多分、ちょっと凝ったWebサイトの構築や、開発を行っていらっしゃる方なら一度位耳にしたり使った事があったりするものではないでしょうか？
プラグインも豊富で、色んなことが出来て本当に便利です。

あと、「WordPress」。これも有名ですよね。
当サイトもWordPressで作られています。

それで、今回のお話、このJqueryとWordPressの兼ね合いの部分がメインとなります。

WordPressには、共通のヘッダを出力するエリアがあると思います。
当然ながら全てのページ共通で同じコードが出ます。
ページ毎に出力内容を変更したい場合は、if文等を使って分岐させる必要があるのですが、ここで注意点が！
Jqueryの記述位置です。

Jqueryのプラグインを使用する場合、jquery.jsは絶対に必要で、誤って無かったりするとプラグインは動作してくれません。
なので、WordPressの共通ヘッダに書いておけば、確実に読んでくれるのでミスが起きなくて安心です。

ですが、共通ヘッダPHPに以下の様にページ毎に出力内容を変更させるif文を作ると、「あらら」ということになります。

1.ページ毎の出力内容変更if文
2.共通出力コード

上記だけだと、一見問題なさそうですが、よくよく見てみると、
Jqueryのプラグインは、特定のページのみで使うので、「1.ページ毎の出力内容変更if文」で出たり出なかったりさせる必要があります。
jquery.jsはどのページでも読んでて欲しいので「2.共通出力コード」に入ることになります。

そうなると…
jqueryの読み込み順が

1.Jqueryのプラグイン
2.jquery.js

となってしまいます。
Jquery.jsを使った事がある方なら既にお分かりと思います。
Jqueryのプラグインを使う場合は、「必ず先にjquery.jsを読み込む」必要があります！
なので、Jqueryプラグインが動作しない、という事態が発生します。

WordPressのヘッダエリアのif文分岐のことだからjsなんて関係ねーと、油断してると思わぬ落とし穴にハマってしまう場合もあります。
ハマって時間を無駄にしないよう、jquery.jsやprototype.jsの読み込み順にはよくよくお気をつけて！