WordPress に設置した jQuery プラグインが動かない!Google にホスティングされている最新のバージョンに置き換えてライブラリ同士のコンフリクト(衝突)を回避する方法

WordPressにはデフォルトで本体内にjQueryが含まれています。基本的にはこれを使用すればいいのですが、たまに不具合が発生して動かなくなる場合があります。

たとえば、WordPressのjQueryプラグインとして配布されているものではなく、HTMLで作ったサイトで設置することを目的に作られたプラグインや、jQueryとは別の「prototype.js」ライブラリによるものを同時に使っていたりすると、そうなることがあります。

というのも、WordPressにあらかじめ含まれているjQueryには、特殊な設定がなされていて、それがコンフリクト(衝突)を引き起こしている場合があるからです。ややこしいので書きませんが

jQuery.noConflict()

のことです。WordPressに内包されているjQueryの特殊な設定については、こちらのリンク先などを参考にしてください。

jQuery.noConflict() – jQuery 日本語リファレンス
Function Reference/wp enqueue script « WordPress Codex

ということで、ここでは対処法のひとつとして、いったんWordPress内のjQueryを使わないようにして、今後はGoogleにホスティングされている最新版のjQueryを利用することにする、という方法を使いたいとおもいます。

以下、その手順です。

手順

やるべきこと

やるべきことは2つ。テーマファイルのheader.phpを編集します。

  • WordPress本体に含まれているjQueryを読み込ませない
  • Googleにホスティングされている最新版jQueryのURLを指定して読み込ませる

テーマファイルの中でも最重要なファイルを編集するので、事前に必ずバックアップをとってください。管理画面の「テーマ編集」からでもできますが、ファイルをダウンロードして書き加えてからFTPクライアントソフトなどでアップロードする方法が無難です。

最新版jQuery

Googleでホスティングされている最新のjQueryはこちらで確認できます。

Google Hosted Libraries – Developer’s Guide – Make the Web Faster — Google Developers

バージョンの違いの意味はググってください。ここで利用するのはバージョン1.11.1です(2014年10月現在)。

注意点としては、jQueryの最新バージョンが出たときには、自分で書き換える必要があることです。WordPressに内包されているjQueryを使うのなら、WordPress本体のバージョンアップで毎回更新されていきますが、この方法では別のところにあるファイルのURLを指定して、それを読み込ませて使用するので、アップデートには手動の対応が不可欠です。セキュリティ対策として気をつけておきたいですね。

ちなみにjQueryの公式サイトはこちら。

jQuery公式サイト

jQuery公式サイト

追加するコード

header.phpファイルのwp_head()よりも前に以下を書き加えてください。「//」のあとには説明書きを加えていますが、コピペするときに削除してもらってもかまいません。

これだけなので作業そのものは簡単です。修正が終わったら作動チェックを忘れないように。

これで正常に動けば不具合の原因はWordPressに含まれるjQueryが原因と分かりますし、これで直らなければ他に原因があるということです。JavaScriptは問題を起こさせないようにするのが初心者には難しいので、できればいろんなプラグインに手を出さず、できるだけ少ないファイルや構成で間に合わせるようにする方が安定すると思います。

jQueryのおすすめ学習書

JavaScriptやjQueryについての詳しい解説は多くの書籍がありますのでそちらを参考になさってください。以下は、わたし好みの自習参考書でした。

関連記事

WordPress の条件分岐でパソコンには表示させてもスマートフォンに表示させない方法

テーマ編集などでコンテンツを追加してくると、スマホとパソコンで表示を変えたくなってきますね。 「パソコンの大きな画面になら表示してもいいんだけど、スマホに表示させると画面からはみ出しちゃうな・・・」とか「スマの表示のこの場所に広告は出したく…

【add_editor_style】ビジュアルエディターのスタイルシートを追加して投稿画面の本文デザインを調整する方法

編集画面のデザインが使いにくい! 自分でスタイルシートを編集して、サイトの表示デザインを変更することは比較的初心者の頃でもできますが、そのときに困るのが編集画面と投稿後の表示との差です。 もちろん、「プレビュー」をクリックしてみれば一発でわ…