【wordpress】「Uncaught SyntaxError: Unexpected identifier」エラーが出たので対処した

先日、WordPressでブログ記事を書いた後に、何気なくブラウザでその記事の確認をしつつChromeのデベロッパーツールを開いたら、たまたま「Uncaught SyntaxError: Unexpected identifier」というエラーが出ていることに気づきました。

ここ数日から1～2週間の間に新たなプラグインを導入していないので、新規のプラグインの導入がエラーの原因ではないと思います。

ただ、WordPressや各種プラグインの設定はちょこちょこ変更しているので、そのうちの何かが原因かもしれないと思い、調べてみました。

結果的に当ブログで利用しているWordPressのCocoonテーマの設定を一か所弄ることで治りました。
Cocoonテーマ以外を利用していても同じような設定が出来るテーマは多くあると思うので参考にはなると思います。

～目次～

発生した環境

WEBサーバーやPHPのバージョンを一応書いておきます。

※結果的に、あまりこの辺の情報は関係ありませんでしたが

Chromeのデベロッパーツールに出ていたエラーメッセージは以下になります。

「Uncaught SyntaxError: Unexpected identifier」エラーと言うのは、要は構文誤りだと思えばいいかと思います。

今回、該当行のソースを確認してみると。

こんな感じのJavaScriptの構文が、ずらずらっと一行に書かれていました。

JavaScriptなんて分からない、自分は使っていない！と思う方もいるかもしれませんが、WordPressのプラグインにはJavaScriptを使って動作させているものが多く存在します。

また、JavaScriptという言葉は知らなくても、jQueryであれば聞いたことがあるかもしれません。
jQueryはJavaScriptを使いやすいように作られたライブラリですが、これもJavaScriptの構文で書かれていると思ってください。

さて、JavaScriptは、構文の終端文字にセミコロン（「;」）を使いますが、これは省略が可能なようです。

しかし、今回該当の行には一行にずらずらっと幾つものJavaScriptの構文が書かれていました。

これを見て、なんとなく原因と言いますか、このエラーが出力され始めた契機として、候補に思いあたるところがありました。

当ブログはWordPressのテーマとしてCocoonを利用しています。

Cocoonの設定の中に、サイトの高速化の為の設定をする箇所があります。

その中の一つに、JavaScript（jQuery含む）のコードを縮小化するという設定があり、この設定を導入すると、複数行の構文を一行にまとめるなどしてコード量を縮小し、データ通信量を減らすことが出来ます。

わたしはつい最近、この設定を有効化してみたのですが、コードを一行にまとめる際に、終端文字「;」の省略が影響してエラーが出力されたのではないかとあたりを付けました。

上の画像のように、WordPressのダッシュボード上から、「Cocoon設定」内の「高速化」とクリックすると、「JavaScriptを縮小化する」という項目があります。

このチェックを外してみたら、エラーが発生しなくなりました。

高速化設定は出来ればしたいところですが、気持ち悪いエラーが残っていて、動作に影響する方が嫌なので、一旦はこの設定を外すことにしました。

そもそも該当のエラー行のJavaScriptコードは何が原因なのか気になったので調べてみました。

該当エラー行前後のコードと、エラーになったコード内に以下のような記述があったので、おそらく当サイトで導入しているお問い合わせフォーム用のプラグイン「Contact Form7」が原因だろうとあたりをつけました。

var inputTypes=['email','url','tel','number','range','date'];

試しにContact Form7のプラグインを無効化してみると、エラーが消えました。

原因は、

Contact Form7のコードを、ワンライナーにまとめた結果

と言えそうです。

とは言え、このプラグインを今すぐに外して他のプラグインを導入するというのは手間なので、しばらくは高速化設定の方を犠牲にして、何か良い対処法なりプラグインを見つけたら対応しようと思います。