WordPressを使っていると、jQueryを使ったスクリプトを使用したい場合に動作しないことがあります…
HTMLタグの貼り付け方には問題はないはずなのに、どうしても動かない!
そんな時は、原因を調べるためにブラウザのコンソールを使ってJavascriptのエラーが発生してみると、
「TypeError: $ is not a function」
こんな感じのエラーが表示されており、「$」を使ったコードが無効になっているのです。
WordPressでは、jQueryを他のJavascriptのライブラリを使用したコードとの衝突を回避するために、「$」を無効にしているようです。
“$”を使用したスクリプトを下記のように囲む
(
function
($){
// ここにコードを記述
})(jQuery);
もしくは
jQuery(document).ready(
function
($){
// ここにコードを記述
});
“$”を”jQuery”に置き換える
このようなコードの場合
$(
function
() {
$(
"#menu"
).click(
function
() {
$(
"#menu_area"
).slideToggle();
});
});
以下のように「$」を全て「jQuery」に変更します。
jQuery(
function
() {
jQuery
(
"#menu"
).click(
function
() {
jQuery
(
"#menu_area"
).slideToggle();
});
});
これで上手く動いてくれます!