[Cocoon]エラーの原因と修正方法”Invalid or unexpected token”とは?

WordPress

この記事ではWordPressテーマCocoon使用時に、Chromeデベロッパーツールで表示された「Uncaught SyntaxError: Invalid or unexpected token」という謎のエラーの修正方法を紹介します。

プラグインの追加やブログのカスタマイズをしていてデベロッパーツールを確認している際に、突然意味のわからないエラーが出てくるととても焦ってしまいますよね。

私もエラーに直面して右往左往しながら対処方法を見つけたのですが、ちょっと設定を見直すだけで簡単に修正することができます。

エラーの原因が同じであれば、これから紹介する修正方法を真似するだけで同じように解決できますよ。

スポンサーリンク
スポンサーリンク

エラーの意味

“Uncaught SyntaxError: Invalid or unexpected token”というエラーは、JavaScriptの文法におかしな部分がある際に表示されるエラーとのことです。

私はプログラミングに関しては素人なので内容を詳しく把握しているわけではないのですが、カッコ「{」「}」や、カンマ「,」などの記述忘れや、位置がおかしい場合にエラーが起こるそうです。

エラーの原因はWordfence

一つ一つプラグインを無効化したり、Cocoon高速化のチェックをオンオフしたりして原因を探したところ、私の環境ではセキュリティプラグインであるWordfenceが出力しているJavaScriptの文章部分にエラーの該当箇所が表示されていました。

つまり、プラグインのWordfenceを無効化すればエラーはなくなり、有効化すればエラーが表示されるという状況でした。

ただしこれは次で説明するある設定が組み合わさって初めてエラーが起きるというものであり、決してWordfenceが悪いプラグインということではありません。

※画像では4 errorsとなっていますが、残り3つのエラーはレスポンシブ対応のアドセンス表示によるものであるため、仕方ないのです。

エラーの修正方法

エラーの修正方法はとても簡単です。

WordPressの管理画面から、Cocoon設定→高速化のメニューを開きます。

おそらくご自身のサイトでエラーを目にしてこの記事にたどり着いた方であれば、JavaScript縮小化 の設定にチェックが入っていますね。

実は、何も対策していない状態でここにチェックを入れていると、Wordfenceの出力するJavaScript関係のエラー”Uncaught SyntaxError: Invalid or unexpected token”が表示されてしまうのです。

エラーを修正するためには、このチェックボックスのすぐ下、
「縮小化しないJavaScriptファイルのパス、もしくはパスの一部を改行で区切って入力してください。」という文章のすぐ上にあるフォームに、

/plugins/wordfence/

と入力し、最後に「変更を保存」ボタンを押して反映するだけです。

おわりに

たったこれだけの対策で今回表示されたエラーを修正することができ、実際にChromeデベロッパーツールで確認してもキレイさっぱりエラーが解消されていることが確認できます。

エラーの原因を探る際に、切り分けをするのは非常に手間がかかり労力を要するものですが、この記事があなたの助けになれば幸いです。

もしWordfenceをインストールしていない環境でも同じエラーが出ている場合は、WordPressのサーバにFTP接続か、契約しているサーバ会社のcPanelにログインしてプラグインのフォルダ名を調べ、同様に記載してみると修正できるかもしれません。

コメント

タイトルとURLをコピーしました