投稿日:

【原因は2つ】wordpressでjQueryが動かない方への改善方法

こんにちはマサミです。

ブログや自社サイトなどで、wordpressを使用していることは多いと思います。
さらに、jQueryを使って動きのある処理をつけない!と考えている人も多いと思います。

本来ならば、jQueryを動かす大本のファイル(jquery.js)と、配布されているjsファイルをマニュアル通り設置すれば動きますが、実はテーマによっては動かないということもあります。

動かないといっても、動かせるようにする対処方法がありますので今回はそちらをご紹介します。

必要スキルとして以下のレベルぐらいは必要です。

  • FTP内を開けれる人
  • ソース内を少し触れる人(PHPなどのプログラミング知識はいらない)です。

よろしければ、参考にしてください。

テーマ内にjQueryを動かすファイルが入っていない

jQueryを動かすには、動作させるための大元のファイルが必要です。
テーマによってはその大本のファイル(jquery.jsもしくはjqurey.min.js)がソース内に入っていない可能性があります。

ディベロッパーツール(開発者モード)で、<head>内もしくは</body>の上周辺にないか(CTRL+Fやcmd+Fでソース内を検索するのもオススメ)探してみてください。

注意点としては、テキストエディタなどを使ってtheme内で探してもjquery.jsが書かれていない場合もあります。

ですので、確認する場合はサイト上(ブラウザ)の時のみ表示されるように設定しているものもあるので、ディベロッパーツールで探してください。

テーマ内に入っているjQueryが”$”が使えないタイプのもの

使用しているテーマによっては、jQueryが自動的に読み込んでいるものもあります。

こちらも開発者モードやディベロッパーツールで、<head>内もしくは</body>よりちょっと上周辺にないか(CTRL+Fやcmd+Fでソース内を検索するのもオススメ)探してみてください。

wp-includes/js/jquery/jquery.js
と書かれているものがありましたら、それが原因です。

このjQueryファイルの不自由なところは、jQuery使用確率が高い”$”で始める宣言が使えないようになっています。

僕もそうなのですが、自分でjQueryを使ってjavascriptを組み立てる人は恐らく高いは確率で$が使われると思います。

また、配布されているjQueryを使ったファイルなどの中身を見てみて$宣言を使用しているかを確認してみてください。

自動で読み込まれているjQueryとの相性が悪いです。

解決方法としては、既存のjQueryファイルを使わず、”$”を使えるjQueryファイルを引っ張ってくるのが良いです。 やり方については以下の通りです。

手順としては以下の通りです。

  • 既存のjquery.jsを読み込ませない
  • 新しいjquery.jsを引っ張ってくる
  • 配布・自作などの使いたいjsファイルを読み込ませる

既存のjquery.jsを読み込ませない

まず、最初からjquery.jsを読み込まれているテーマは、そのjquery.jsを読み込ませないようにする設定が必要です。

やり方は、wp-contents内のthemesフォルダ内にある使用しているテーマ内を探し、そのファイル内のfunction.phpを開いて、以下のコードを入力(コピペでもok)。

function jquery_noread() {
// 既存のjquery.jsを読み込まない wp_deregister_script(‘jquery’);
}
add_action( ‘wp_enqueue_scripts’, ‘jquery_noread’);

これで、最初から読み込まれているjquery.jsは使用しない設定が完了です。

新しいjquery.jsを引っ張ってくる

次に、先述した”$”が使用できるjquery.jsを引っ張ってきます。

基本的にはgoogleが配布しているURLから引っ張ってきて問題ないです。
https://developers.google.com/speed/libraries/#jquery

こちらの、3.x、2.x、1.xのどれかを使用してください。

3が一番良いというわけでもなく、読み込ませたいjsファイルの相性があるので3.xを読み込ませたけど動かない場合は2.xや1.xを試してください。

注意点としては3つ同時に読み込ませると、動作がおかしなってしまう可能性があるので1つだけにしてください。

設置場所は、使用しているテーマ内のheader.phpを開き、wp_head()よりも上に配置してください。

これで、大本のファイルの読み込みは完了です。

配布・自作などの使いたいjsファイルを読み込ませる

使いたいjsファイルは、配布されているサイトからダウンロードしてきてください。

配布元のサイト内やファイル内テキストファイルなどに設置方法が書かれているので、その通りに設定。

jsファイルに関しては、先ほど設置した大本のjquery.jsファイルより下に配置してください。

これで設置は完了です。もし、これで動かない場合はjsファイルの他にサイト内、ファイル内テキストファイルなどに書かれている設定方法が間違っている可能性があるので、表記が間違ってないか確認してみてください。

これで、wordpressでjqueryの問題解決方法は以上になります。
恐らく最後の設定で試行錯誤する可能性はあると思いますが、見落としや指定ミスが無いか確認してください。
昔は見落として動かないというのを何度も経験したので…諦めずに確認は大事です。

これでjsが上手く動くと良いですね。参考になれば幸いです。