「あれ!?前に別のワードプレスに組み込んだ時は動作したのに、今回はJQueryが動かない」という時の対処法!!ほぼ同じ環境下のWPサイトで、全く同じ記述してるのに片方は動いて片方は動かない・・・という時の対処法です。ケースバイケースだとは思いますが、この記事が皆さんのお役に立てたら嬉しい限りです。
念の為にワードプレスでJQueryを使用するときの注意点
ワードプレス内でJQueryを使用するには＄をJQueryに変えなきゃいけないというお約束が存在します。
例えば、
$(‘.toTop’).click(function () {
$(‘body,html’).animate({
scrollTop: 0
}, 800);
return false;
});
});
上記はJQueryを使用してページ内リンクのスムーススクロールを実装するコードです。ワードプレス以外で使用する場合はこのままの記述で問題ありませんがワードプレスサイトでこのままの記述だと動かなくなってしまいます。これをワードプレスで使えるようにするには
jQuery(‘.toTop’).click(function () {
jQuery(‘body,html’).animate({
scrollTop: 0
}, 800);
return false;
});
});
と書き換えなければなりません。恐らくこの記事に辿り着いた方は「そんな事は百も承知だ!!」という方々だと思われますが、念の為・・・。
＄をJQueryに変更もしている、なのに動かない場合
こうなってしまうと気が滅入ってしまいますよね・・・。しかも筆者の場合、記事タイトルの様に異なるワードプレスサイトで片方は動いて片方は動かないという状況だったので、なおさら頭を抱えました・・・。ただ同一コードで片方は動いて片方が動かないなんてコンピューターの世界であり得るわけがないと思い、2サイトのソースの差分を探しました。
wp_head()で読み込まれるJQuery本体に差分発見!!
自分でCDNなんかでJQueryを読み込んでいたのですが、キチンと動作する側はwp_head()で読み込まれるファイル群にJQuery本体が無く、動いてくれない方は読み込まれるファイル群にJQueryが含まれていました。早い話、動かない側はJQueryを二回読み込んでいた（しかも違うバージョン）そりゃ動かないですよね・・・。
wp_deregister_script()を使い、wp_head()で読み込まれるJQueryを削除する
下記のコードを組み込むことでJQueryの二重読み込みを避ける事ができます。ひとまずは、このコードで一旦は解決しました。ですがIE8でページを閲覧するとまた別の問題が発生してしまいました。
<?php wp_head(); ?>
wp_head()で読み込まれていたプラグイン関連がIE8と相性が悪かった
wp_head()は使用しているプラグイン関連のファイルをを使っていないページでも読み込みます。今回作成していたサイトはlightBox2のプラグインを使用していたのですが、どうやらIE8ではlightBox2で使用しているライブラリ「prototype.js」がlightboxを使用していないページでエラーを起こしていたらしく、lightBoxを使用していないページはprototypeを外す必要性が出てきました。
<?php wp_deregister_script(‘prototype’); ?>
<?php wp_head(); ?>
と記述すればもちろんprototypeの除外は出来きますがそうするとlightBoxを使いたいページでもprototypeが読めなくなってしまう。それは非常に困るので、条件分岐でprototypeが必要な所だけ呼び出せるように改良しました。筆者の場合特定のカテゴリのみ使用していたので
global $post;
$post_id = $post->ID;
$post_cats = get_the_category($post_id);
$post_cat_id = $post_cats[0]->cat_ID;
$post_cat_parent = $post_cats[0]->category_parent;
?>
//中略
<?php wp_deregister_script(‘jquery’); ?>
<?php if ( !($post_cat_id == lightboxを使うカテゴリID) || !($post_cat_parent == lightboxを使うカテゴリID) || !(cat_is_ancestor_of( lightboxを使うカテゴリID , (int)$post_cat_id ))) { ?> <?php wp_deregister_script(‘prototype’); ?>
<?php } ?>
<?php wp_head(); ?>
とすることでIE8での問題も解決しました。この記事が皆様のお役に立てることを願っています。
このようにニワカソフトでは日々新しいことに挑戦し、より良いものを皆様にご提供できるよう努力しております。ぜひホームページの新規作成・リニューアルはニワカソフトにご相談ください!!
