賢威でjQueryを動かすための最も簡単な方法
実は僕もこの記事を書いていてはじめて知ったことでもあるんですが、賢威（やその他、WordPressブログ）でjQueryを動かすためには、知っていなければいけないことがいくつかあります。
これはWordPress特有の仕様によるものですが、それを理解していないと、賢威でJavaScriptやjQueryを動かしたときに、「あれ、何で動かないんだよ、くっそ～」とイライラが募ることになります。なので今回は賢威でjQueryがそのまま動かない理由と対策についてまとめています。
そもそもjQueryって何なの？
jQueryというのは、誰でも簡単にサイト内で動的な動き／アニメーションができるようにJavaScriptで書かれたライブラリのことです。（もちろん無料です。）
例えば、よくあるトップ画面のスライドショーだったり、あるいは画像の上にマウスをホバーすると絵が変わったり、あるいは上部にあるナビゲーションがスクロールしてもずーっとくっ付いてきたり、といった動きを実現させることができます。
参考：（賢威でjQueryを使って隠しサイドバーを実装する方法）
賢威でjQueryを動かすための４つの注意点
コンフリクトの回避が必要
まず原因の１つとして、jQueryを記述する場合には必ず冒頭に「$(function()」のような記述をつけると思います。
ただ、実は賢威（というよりWordPress）では、「$」を関数に使っているのがjQueryだけではないんですね。
例えば、prototype.jsというこちらもjavascriptのライブラリの１つですが、これを使っているプラグインもあるため、
これらが競合（コンフリクトconflict）してしまうわけです。
そこで、これらの衝突を回避するために、WordPressでjQueryを使うときには以下のように記述するのが一般的です。
jQuery(document).ready(function($){
//中身の記述
});
このように記述することで、「この部分はjQueryで書いていますよ」というのを
教えるわけですね。同様の記述方法で、
(function($){
//中身の記述
})(jQuery);
という記述方法でもOKです。これはどちらでもお好みで。
wordPress記事内ではjavascriptは動かない
２点目。実は、WordPressの記事内では、そのままではjavascript(およびjQuery)って動かないんですよね。動かすためには、専用のプラグインである「inline-javascript」が必要になります。
WordPress管理画面の「プラグイン->新規追加」よりinline-javascriptを追加してください。これを有効化しておく必要があります。
詳しくはこちらのサイトの記事に詳しく書いてあります。
関連（顔面・画面蒼白！WordPressの記事内ではjavascriptは動かない）
WordPressでパッケージされているjQueryを読み込ませない
更に念をいれてここまでやれば完璧、というのがWordPressで既定で読み込んでいるjQueryを「読み込ませない」方法です。賢威のようなWordPressテンプレートでデフォルトで読み込んでいるjQueryのライブラリには、末尾に「jQuery.noConflict();」という関数が書かれています。
つまり、WordPressのオリジナル仕様になっていて、他のjavascriptライブラリと競合しないように設定されています。これが邪魔なので、自前でjQueryを読み込みたいところですが、そのまま新たにjQueryを読み込むと二重読みこみになってしまいます。
そこでheader.phpの、<head></head>内に以下の記述をします。
<?php wp_deregister_script('jquery'); ?>
<!-- WordPressのjQueryを読み込ませない -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
これで私の場合も、賢威でjQueryを動かすことができるようになりました。思ってたよりちょっと大変ですね（汗） でも一回設定してしまえば、今後は簡単になるのでいいかと思います。
以下の記事で賢威の特徴や魅力について詳しく解説していますので良かったらご覧ください。豪華な特典のプレゼントもあります。
賢威がアフィリエイターに選ばれる理由 当サイト限定の賢威の購入特典はこちら
最近のコメント