WordPressサイトをアップデートしたらJavaScriptが動かなくなった

いつものように、サイトにログインしたついでに更新…と、デザインで弄るところあるかな。
と更新したサイトを開いてみると、そこには動かなくなったローディングアニメーションが表示される。

というわけで、急いで原因を調べて対処しました。
本記事では、今回のようにWordPressサイトを更新したらJavaScriptが動かなくなった時の原因と対処法について共有しておきます。

※あくまでも体験に基づいた対処法なので、確実にエラーが解消できるとは限らないことをご了承ください。

サイト環境とエラー前にやったこと

まずは簡単な環境とエラーが起こる前にやったことについて。

サイトの環境は

• プラットフォーム：WordPress
• テーマ：Cocoon

で、JavaScriptは子テーマの「Cocoon Child」フォルダに格納しており、「コードスニペット」プラグインを使ってPHPでファイルを読み込んでいる、といった感じです。

エラーが起こる前にやったことは、コードスニペットを含むプラグインたちとCocoonテーマの更新です。

原因の究明

サイトのエラーの原因を究明するためにまずはコードスニペットからチェック。

スニペットは簡単にコードをオフにできるので、JavaScriptを読み込んでいるコードをオフにしてサイトを表示してみる。

そうしたら、JavaScriptの動きはないが、問題なくサイトが表示された。

つまり、不具合はサイトではなくJavaScirpt周りにある。

次はテーマのチェック。

JavaScriptファイルは子テーマに格納しているので、親テーマを更新しても影響はない。

一応、テーマの更新情報などもチェックしてみるけれど、自分のような不具合は見当たらなかった。

次、というか最初にやれという話だけれど、不具合が出ている状態で、サイトのコンソールのエラーをチェックする。

そしたら下記のようなエラーが表示されていた。

moving-template.js ~以下省略 TypeError: $ is not a function

対処法

エラー内容は「$ is not a function」

調べてみるとWordPressではjQueryの「$」が使えないということらしい。

JavaScriptのフォルダを見てみると、思い切り使用していたので修正。

jQuery(function($) {
// 〜コードを記述
});

短いものは「$」を「jQuery」へ直接変更、長いものは既存のコードを上記のコードで囲みました。

「$」の記述がないファイルもありましたが、これはそもそも「$」の記述があるファイルを読み込んだ時点でエラーが起きてしまって、その以下のファイルが読み込まれ無くなっているのが原因だと思います。

まとめ

結果的にWordPressでjQueryを使うときに「$」を使うという初歩的なミスによるものでした。

でも、逆になんで今までは普通に動いていたんだろう？という疑問は残りますが、無事に直って一安心。

同じようにWordPressサイトでjQueryが動かないエラーに苦しんでいる人の参考になれば嬉しいです。