こんにちは。@tomicciです。
WordPressで運営しているブログやサイトで、jQueryを使ったスクリプトを使用したい場合に動作しないことがあります。。
HTMLタグの貼り付け方には問題はないはずなのに、どうにもこうにも動かない。
そんな時は、原因を調べるためにブラウザのコンソールを使ってJavascriptのエラーが発生していないかチェックをしましょう。
僕はFirfoxの場合はFirebug、ChromeやIEでデバッグをおこなう場合は「F12」キーで起動する開発ツールのコンソールを使用しています。※Windowsユーザーです。
「TypeError: $ is not a function」
こんな感じのエラーが表示されていたら、「$」を使ったコードが無効になっています。
WordPressでは、jQueryやPrototypeといった、他のJavascriptのライブラリを使用したコードとの衝突(コンフリクト)を避けるために、「$」を無効にしているみたいですね。
ということで、早速、解決策を以下に記載します！
"$"を使用したスクリプトを下記のように囲む
[javascript](function($){// ここにコードを記述
})(jQuery);[/javascript]
もしくは、下記のように記述します。
[javascript]jQuery(document).ready(function($){// ここにコードを記述
});[/javascript]
"$"を"jQuery"に置き換える
[javascript]jQuery(function() { // ここにコードを記述
});[/javascript] 例)
[javascript]$(function () {
$("#navi").click(function () {
$("#navi_contents").slideToggle();
});
});[/javascript] となっていたら、以下のように「$」を全て「jQuery」に置換します。 [javascript]jQuery(function () {
jQuery("#navi").click(function () {
jQuery("#navi_contents").slideToggle();
});
});[/javascript]
どうでしょうか。動きましたか…！？
