wordpressでjqueryを使う時の推奨方法まとめ
wordpressでjqueryを使う時、静的HTML環境のコードをそのまま使うことができず、エラーも起きたりして、少々面倒です。ただし、落ち着いて対処し、推奨された方法にすればきちんと動作します。
今回は、wordpressでjqueryを使う時の推奨方法についてまとめてみました。
目次
外部jqueryを読み込まず、wordpress本体に同梱されているjqueryを使おう
jquery関連のコードはheader.phpに書かず、wp_headスクリプトで呼び出そう
jQuery関連の呼び出しはfunctions.phpのファイルに、wp_enqueue_scriptの記述を用いて、一元管理できるように呼び出すことが推奨されています。
本ブログサイトでは、headタグに書かず、下記のようにfunction.phpに記述しています。
function my_scripts() {
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'javascript',get_template_directory_uri().'/js/javascript.js',array('jquery'));
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );この記述により、wp_headのタイミングでwordpress内部のjqueryとjavascriptファイルが読み込みされるようになります。もちろん、読み込むjsファイルは複数登録可能です。
wordpressのウェブサイトにおいて、jquery関連のコードを通常の静的HTMLのようにheadタグ内に記述してしまった場合、コードが重複されて二重読込になってしまう可能性があります。そうなるとサイト全体の読み込み速度が低下してしまたり、思わぬエラーの原因になったりするので、できるだけ避けておいたほうが賢明です。
WordPressのjQueryが読み込まれるタイミングとは
header.phpに記載されたwp_headで読込
WordPress内のjQueryは、基本的にはwp_headのタイミングで呼び出されます。
<?php wp_head(); ?>wp_headはheadタグ終了直前に書きますので、headタグのタイミングで読まれることになります。
footer.phpにwp_footerも忘れずに記載しておく
wordpress内のjqueryを利用する場合、footer.phpへ下記コードも併せて記入しておきましょう。
<?php wp_footer(); ?>プラグインの中には、wp_footerのタイミングに併せて動かすものもあるので、しっかり記述しておくように気をつけましょう。
wp_footerの記述がない場合、たとえばAmazonJSや、Contactform7の一部の機能(フォーム送信後のリダイレクト設定)などでエラーが起きてしまいます。
登録したスクリプトはwp_headとwp_footerの二種類のタイミングで呼び出すことができる。
wp_enqueue_scriptに登録したスクリプトを読み込むタイミングは、wp_headとwp_footerの中から選ぶことができます。
wp_enqueue_script($handle, $src, $deps, $ver, $in_footer);
$handle — スクリプトのハンドル名
$src — スクリプトのURL（オプション）
$deps — このスクリプトに関連するスクリプトのハンドル名（オプション）
$ver — スクリプトのバージョン（オプション）
$in_footer — trueの場合、フッターで読み込む（デフォルトはfalse）（オプション）
▼引用：wp_enqueue_script関数の詳細
http://morilog.com/wordpress/js/wp_enqueue_script/
jqueryのコードがそのまま使えない理由
問題：コンフリクトが起きてしまうため
wordpress内で使われている他のライブラリにおいて、「$」の文字が使われており、これがjqueryとコンフリクトしてしまうからです。
詳しくはこちらのブログサイト様より
WordPressでjQueryを使うときに、問題なく動作させる為の基礎知識やTipsと、動かない場合の対処例
解決法：コンフリクトを防ぐため、カプセル化をする
大体、下記のようにカプセル化してしまえば、コンフリクトは避けられ、問題は解決します。
1.functionを下記のように書き換える。
$(function(){
...
});
↓書き換え
jQuery(function($){
...
});2.loadの場合は下記のように書き換える。
$(window).load(function(){
...
});
↓書き換え
jQuery(function($){
$(window).load(function(){
...
});
});
エラーが出た時の対応
wordpressとjqueryのバージョンを確認する
静的環境で動いていたものがwordpressで動かない場合は、大体カプセル化にミスっていたりします。ただ、そもそも静的環境でエラーが出ていた場合はバージョンによるエラーが考えられますので、きちんと確認するようにしましょう。
また本番環境に移行した際、wordpressのバージョンが変わっていることも考えられますので気をつけてください。
どうしてもうまくいかない時は、wordpress側のjqueryを読み込まない設定にして、外部jqueryを利用
根本的な解決策ではありませんが、エラーの原因が複雑になってきて、たとえば締切までに収集がつかなそうな場合は、wordpress側のjqueryを読み込まない設定にして、外部jqueryを利用する選択肢もありです。
<?php
wp_deregister_script('jquery');
wp_enqueue_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js', array(), '1.11.1');
?>この場合、静的HTMLで構築したものと同じ動作が期待できますので、jquery修正の必要はありません。最も手間がかからない簡単な方法だと思います。
ただし、代償として、AmazonJSなどの外部プラグインのほうで望んだ動作をしない可能性があります。そこはどうしてもトレードオフになってしまうところです。
原理をきちんと知って、解析および修正できれば、それが一番です。
その他、関連リンク
wp_enqueue_scriptの記述の際に出てくる、WordPressのカスタマイズコードadd_filter、add_actionなどのアクションフックとフィルターフックの働きは覚えておいた方がいいです。
まとめ
いかがでしたでしょうか。たとえ外部コードだとしても、一つ一つのコードを潰していけば、きちんとworedpress対応にできるはずですので、色々と試してみてください！
