WordpressでjQueryを使いたい！そんな時は・・・
Wordpressは2003年にリリースされましたが、もう11年も経つんですね。
日本でもブログや企業ホームページなんかでも頻繁に使用されるようになり、
ますますその使用者は増えているのではないでしょうか？
そんな私も最近仕事でWordpressをさわることがあったのですが、
その時に苦戦したのが、jQueryの導入でした。
というわけで、今回はその備忘録です。
多くの方が個人サイト問わず、仕事で使用していることもあるかと思いますが、
このjQuery、Wordpressでも使用することができます。
ですが、使用するにはその前にやらなければならないことがあるわけで･･･
では何をするのか？
という話になるのですが、その前にWordpress本体のjQueryについて、
少し書いておきます。
wp-includes/js/jquery/jquery.js
上記の中に含まれています。
本体に含まれている、ということは、つまり何もしなければ、
Wordpress本体のjQueryが読み込まれてしまうのですが、
呼び出しの条件としては、
<?php wp_head(); ?>
上記がheader.phpの<head>内に書かれていることが前提になります。
ちなみにこの「<?php wp_head(); ?>」と「<?php wp_footer(); ?>」が書かれていないと、ページが表示されなかったり、プラグインが動かなかったり、
不具合が起こることもあるので、もし書かれていなかった場合は、
記述しておきましょう。
「<?php wp_footer(); ?>」は、footer.phpの</body>直前に記述します。
これを機会に是非確認してみて下さい。
話を戻しますが、「<?php wp_head(); ?>」が記述されていれば、
デフォルトでWordpress既存のjQueryが読み込まれますが、
WordpressのjQueryは、公式版のものと少し違います。
そこで使い慣れている公式版のjQueryを読み込みたいわけなんですが、
一体どうすればよいのでしょうか？
一番簡単な方法は、「header.php」を変更してしまう方法です。
「<?php wp_head(); ?>」より上の部分に、
<?php wp_deregister_script( 'jquery' );
wp_enqueue_script('jquery','http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js');?>
上記を記述することで、公式のjQueryを使用することができます。
一行目のコードで既存のjQueryを読み込まないようにし、
二行目のもので、Google Libraries APIのjQueryを読み込むようにしています。
ただ、もう一つ注意点があります。
それは、｢$｣が使用できないので、「$」の部分を、
「jQuery」に書き換える必要があります。
書き換えると普通に動くようになるので、
Wordpressで公式のjQueryを使用しｈたい、という方は、
是非試してみて下さい！
