ワードプレスのフッターにある jQueryの読み込みをヘッダーで出力させる
ワードプレスのフッターにあるjQueryの読み込みをヘッダーで出力させる必要ができました。
simplecity の後継ともいわれる ワードプレスのテーマ cocoon のカスタマイズです。
cocoon は、jQuery をフッターで出力しているため、javascript を使った動的なページを作ろうとすると
jQuery is not defined
とか
$ is not defined
とか言われちゃいます（デバッガーの出力)
そのためjQuery の読み込みをヘッダーに移動させようと思ったわけです。
jQuery を使おうとしたときに Jquery が読み込まれていないと jQuery を使うことができません。
つまり、
jQuery is not defined
とか
$ is not defined
といわれるのは、jQuery の読み込みが終わっていないうちに jQuery を使った javascriptを動かそうとしている時にこのメッセージが表示されます。
対策は、そのページのソースファイルを見てください。
jQuery の読み込みと動かそうとする javascript の位置関係はどうなっていますか？
jQuery の方が先に読まれているのならば、その前の javascript でトラブルが発生している可能性があります。
目的の javascript の関数の前にある関数でエラーが出ていないか調べてみてください。
jQuery が 目的の javascript よりも後に出てくるようならば、その順番を変えてあげればいいんです。
ワードプレスの場合、大抵は ヘッダで読み込みますが、テーマによってはフッターで読み込むものもあります。
ソースファイルで確認してください。
テーマ側で意図的に操作しない限り jQuery の読み込みはヘッダー部でやってくれています。
じゃあ、なぜ jQuery の読み込みをわざわざフッターにもっていく必要があるんでしょう？
jQuery はご存知の通り、とっても便利な javascript のライブラリーです。
そのため jQuery は、でかい。
ヘッダーで jQuery を読み込むとコンテンツが表示されるまで時間がかかってしまいます。
そこでフッターのさらに下で jQuery を読み込むことでコンテンツの表示速度を上げようとするためです。
つまり、cocoon も速度優先という考え方のようです。
通常ワードプレスで jQuery の読み込む時は、以下のようにしています。
wp_enqueue_script("jquery", "jQuery の URL");
これをフッターで読み込むようにするためには、こう書きます。
wp_enqueue_script("jquery", "jQueryURL", array( "jquery" ), false, true );
最初の行で wp が読み込む jquery を無効にしています。
次の行で jQuery をフッターで読み直すようにしています。
ワードプレスのリファレンスでは、こんな感じで説明があります。
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
が、解説がイマイチ高度なので平たく言わせていただきます。
$handle: 読み込んだ場所につけるアンカー（目印）
$src:script の 読み込み場所（今の説明でいうと jQuery の URL)
$deps:通常は、array() で指定しません。が、どの場所(アンカー)の下に配置するかを指定します。
$ver:読み込むスクリプトのバージョン番号(自作のスクリプトなら別に何でもいい。省略可)
$in_footer:false ならヘッダーで true ならフッターで読み込みます。
そこで、フッターに書こうとしているものを再びヘッダーに・・・
それは、時間の無駄なのでは？
ということで、自分のスクリプトをjQuery の下に出力する方法をこちらに書いておきました。
⇒ ワードプレスで jQuery の後に script を読み込ませる方法(動的スクリプトもOK)
simplecity の後継ともいわれる ワードプレスのテーマ cocoon のカスタマイズです。
cocoon は、jQuery をフッターで出力しているため、javascript を使った動的なページを作ろうとすると
jQuery is not defined
とか
$ is not defined
とか言われちゃいます（デバッガーの出力)
そのためjQuery の読み込みをヘッダーに移動させようと思ったわけです。
jQuery is not defined とか $ is not defined とか言われる理由
JavaScript は、使用する関数が先に読み込まれていないと動かない言語です。jQuery を使おうとしたときに Jquery が読み込まれていないと jQuery を使うことができません。
つまり、
jQuery is not defined
とか
$ is not defined
といわれるのは、jQuery の読み込みが終わっていないうちに jQuery を使った javascriptを動かそうとしている時にこのメッセージが表示されます。
対策は、そのページのソースファイルを見てください。
jQuery の読み込みと動かそうとする javascript の位置関係はどうなっていますか？
jQuery の方が先に読まれているのならば、その前の javascript でトラブルが発生している可能性があります。
目的の javascript の関数の前にある関数でエラーが出ていないか調べてみてください。
jQuery が 目的の javascript よりも後に出てくるようならば、その順番を変えてあげればいいんです。
ワードプレスの場合、大抵は ヘッダで読み込みますが、テーマによってはフッターで読み込むものもあります。
ソースファイルで確認してください。
なぜ jQuery の読み込みをフッターにするテーマがあるのか
基本的にワードプレスは、何もしなくても jquery を読み込んでいてくれるのでテーマ側で意図的に操作しない限り jQuery の読み込みはヘッダー部でやってくれています。
じゃあ、なぜ jQuery の読み込みをわざわざフッターにもっていく必要があるんでしょう？
jQuery はご存知の通り、とっても便利な javascript のライブラリーです。
そのため jQuery は、でかい。
ヘッダーで jQuery を読み込むとコンテンツが表示されるまで時間がかかってしまいます。
そこでフッターのさらに下で jQuery を読み込むことでコンテンツの表示速度を上げようとするためです。
つまり、cocoon も速度優先という考え方のようです。
フッターにある jQuery の読み込みを ヘッダーに持ってくる方法
ワードプレスでは、ヘッダーで jQuery を読み込むのがセオリーですが、テーマによってはフッターで読み込んでいます。通常ワードプレスで jQuery の読み込む時は、以下のようにしています。
wp_enqueue_script("jquery", "jQuery の URL");
これをフッターで読み込むようにするためには、こう書きます。
wp_enqueue_script("jquery", "jQueryURL", array( "jquery" ), false, true );
wp_deregister_script("jquery"); wp_enqueue_script("jquery","jQueryURL",array(), "", true);
最初の行で wp が読み込む jquery を無効にしています。
次の行で jQuery をフッターで読み直すようにしています。
ワードプレスのリファレンスでは、こんな感じで説明があります。
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
が、解説がイマイチ高度なので平たく言わせていただきます。
$handle: 読み込んだ場所につけるアンカー（目印）
$src:script の 読み込み場所（今の説明でいうと jQuery の URL)
$deps:通常は、array() で指定しません。が、どの場所(アンカー)の下に配置するかを指定します。
$ver:読み込むスクリプトのバージョン番号(自作のスクリプトなら別に何でもいい。省略可)
$in_footer:false ならヘッダーで true ならフッターで読み込みます。
そこで、フッターに書こうとしているものを再びヘッダーに・・・
それは、時間の無駄なのでは？
ということで、自分のスクリプトをjQuery の下に出力する方法をこちらに書いておきました。
⇒ ワードプレスで jQuery の後に script を読み込ませる方法(動的スクリプトもOK)
スポンサーリンク