結構前からサイトヘルスステータスでPHPのバージョンを上げてちょーだいねって言われていたのですが、今まで見て見ぬ振りをしていました。
何故かというと、以前7.3にバージョンをあげた際、人気記事だったか関連記事だったかの関数のコードでエラーが出てしまい、それを修正する方法が見つからず7.2に戻したことがあったからです。
とは言え、ずーっと最新にアップしてよーって言われ続けてるのを無視するのも気持ちが悪いもので。
そんなわけで、そろそろ現実と向き合うべく、PHPのバージョンアップをすることにしました。
PHPのバージョン上げたらエラーがどどーんっと現れた!!?
バージョンを上げたらエラーが出ると分かっては居たので、そのエラー内容を確認して、修正の方法を探そうと思いエラーを確認してみたところ……
そうです。前回は1つだったエラーが今回は20個以上に増えてました!!
取りあえず、落ち着いて現状を確認してみることにします。確認されたエラーをざっとコピーしテキストアプリに移してから、いったんPHPのバージョンを7.2に戻しました。いつ解決するか、現時点では不明だったもので。
エラーを吐き出しているのは、テーマじゃなく……プラグイン??
で、エラーの内容を確認してみると、7.3の時に見たものと違うような気がします。
前回は確か、/wp-content/の後に来ていた文字は、themesになっていたはずなのですが、今回はpluginsになっています。
なんだか分からないが、テーマ側で出ていたエラーは気が付かないうちに解決していたようです。その代わり、プラグイン側で新たなエラーが発生しているため、エラー対処しなくても快適にサイトが閲覧可能！という状態では無いんだけども。
で、どのプラグインがダメっていわれてるのかというと。
この記事のタイトルではcrayon-syntax-highlighterだけをピックアップしていますが、実はエラーを吐き出していたのはcrayon-syntax-highlighter以外にもEWWW Image Optimizerも引っかかっていました。
なので、今回問題を起こしていたのは、crayon-syntax-highlighterとEWWW Image Optimizerの2つとなっています。
EWWW Image Optimizerのエラーについて。
エラーの内容を確認して見ると、こんな感じになっています。
日本語にしてみると、
との事みたいですが、何のことだかサッパリワカラン。
なので、いったんプラグインを削除することにしました。
削除してみたところ、エラーは消えたんだけど……
プラグインを削除してみるとEWWW Image Optimizer側で吐き出されていたエラーが消えてくれました。
ただ、プラグイン自体は削除したはずなのに、何故か残っているんですよね。
取りあえず、解決はしたし、プラグイン自体は継続使用したいので、これはこのまま様子を見ることにします。
crayon-syntax-highlighter側のエラーについて。
エラーの内容を確認して見ると、こんな感じになっていました。
日本語にしてみると、
になります。
何でこんなエラーが出ているのかというと、どうやらこのプラグインの更新がストップしてしまっていることが原因のようです。
エラーを修正するには？
で、このエラーを修正するにはどうすれば良いのかというと、自力でPHPを修正する方法と、有志によって配布されている最新版をアップロードする方法があるようです。
詳しくはこちらのサイトさんを。説明が丁寧でとてもわかりやすいです。
PHP7.3へバージョンアップ後の「サイトに重大なエラー」を対策 | 己で解決！泣かぬなら己で鳴こうホトトギス
サーバーのPHPをPHP7.2からPHP7.3にバージョンアップし、その後にブログの動作確認をしていたら、一部のページが「サイトに重大なエラーがありました。」と表示されて完全にバグっている。インストール済みのテーマやプラグインなどの互換性を
とは言え、自分はこのプラグイン削除してしまいました。
というのも、実はずっと前からこのプラグインを継続して使用するのをどうするか悩んでいたからなのですが。
そうです。そんな理由で今までcrayonを使っていたわけです。
で、今回思い切ってcrayon削除を決めたので、代わりになる良いプラグインは無いかと探してみたところ……ありました！Highlighting Code Blockというプラグインが!!
WordPressでソースコードの記述がめちゃくちゃ簡単に！新旧エディタに対応のシンタックスハイライター「Highlighting Code Block」の使い方 | WEMO
ブロックエディター・旧エディターの両方に対応しているシンタックスハイライトプラグイン、「Highlighting Code Block」の使い方を紹介します。クリックだけでコードブロックを簡単に挿入でき、選択した言語に合わせてシンタックスハイライトしてくれます。カラーリングは現在「Light」と「Dark」の2種類。カラーリングの例カラーリングの例このような格好いい表示のコードブロックがめちゃくちゃ簡単に使用できます！シンタックスハイライトの機能自体は「prism.js」を使っています。（より良いカラーリングができるように少しだけ追加処理を加えています。）また、使用できる言語も幅広く、以下の言
内容を確認して見ると、デザインもシンプルだし、操作も簡単そうです。
あれこれ悩むのも面倒くさいので即決でこのプラグインを使用することに決めました。
Highlighting Code Blockの詳細設定は、設定項目の[HCB]設定から。
と言うわけで、プラグインを乗り換えたのですが、見た目のデザインや詳細の設定変更が紹介されている記事から少し変更があって戸惑いました。
というのも、WEMO.techさんでは
「Highlighting Code Block」に関する設定は、「設定」項目内の「CODE BLOCK」項目から可能です。
と紹介されていましたが、自分の環境で確認して見たところ、「CODE BLOCK」という項目がどこにも無いんですよね。
まぁ、設定しなくても基本操作はできると思うのでそれでも良いかと一度は納得しましたが……
と言うことで、探しました。
で、気付いたことは、「CODE BLOCK」から[HCB]設定という表記に変わっているようだという事です。
なので、設定項目に「CODE BLOCK」がない場合は、「[HCB]設定」とい項目を探すと良いかと。
無事エラーが解決したから良かったが、クレヨン使って表示させてたコードを全部直さないといけないおまけが付いてきた。
が……がんばるぞー……おー。