【WordPress】PHP7.2→7.3でレイアウト崩れが発生した

しばらくサボっていたWordPressのメンテをしようと、各バージョンを上げました。

WordPress：5.6
PHP：7.4.4

そしたらトップページでレイアウト崩れ&500エラーが発生するようになり。。。
結論としてはプラグイン(Crayon Syntax Highlighter)のせいだったんですが、忘れそうなのでメモ。

1 トップページだけレイアウトが崩れる
2 レンタルサーバーでの調査って大変

トップページだけレイアウトが崩れる

これがPHP7.2の時。

PHP7.3以上に上げるとレイアウトが崩れてます。
Consoleを見ると500エラーが発生しています。
どうやらindexの1行目がダメらしいです。

アクセスログを見てみる

ブラウザだけだと何が起きているかわからないので、サーバー側のログを確認します。
サーバーはWordPress運用でよく使われるXSERVERです。

XSERVERの場合はサーバーに入ってもroot権限がなくてアクセスログやエラーログが見れません。
ではどうするかというと、ServerPanel > アクセス解析 > アクセスログから取得します。

アクセスログは何も設定していなくても1ヶ月分くらいは保存されています。
必要な日を指定してダウンロードボタンを押します。

UAを変えてアクセスログを探しやすくする

ダウンロードしたファイルには1日分のアクセスログが入っているわけですが、公開済みのサイトだと自分以外のアクセスもあって対象のログを探すのが大変です。
なので、User Agentをいじって目印を付けます。
以下Chromeでの設定方法です。

確認対象のWEBページを表示してF12を押し、Developer Toolを表示します。
歯車アイコンの横の︙ > More tools > Network conditionsをクリック。

Select automaticallyのチェックを外してUser agentに任意の文字列を入力。
これで対象のアクセスログのUAが指定した文字列になります。

で、対象のアクセスログがこれ。
確かに500を返してます。
他にCSSなどへのアクセスも来ていますが、そっちはすべて200を返していました。

なるほど…何が起きてるかさっぱりわからんｗ

www.nekodeki.com xxx.xxx.xxx.xxx - - [03/Jan/2021:12:44:25 +0900] "GET / HTTP/2.0" 500 37771 "https://nekodeki.com/%e3%80%902021%e3%80%91%e3%83%93%e3%83%83%e3%82%af%e3%82%ab%e3%83%a1%e3%83%a9%e3%81%ae%e5%88%9d%e5%a3%b2%e3%82%8a%e3%81%ab%e8%a1%8c%e3%81%a3%e3%81%a6%e3%81%8d%e3%81%9f/" "hazhikko_test_500error_01031244"

www.nekodeki.com xxx.xxx.xxx.xxx - - [03/Jan/2021:12:44:25 +0900] "GET / HTTP/2.0" 500 37771 "https://nekodeki.com/%e3%80%902021%e3%80%91%e3%83%93%e3%83%83%e3%82%af%e3%82%ab%e3%83%a1%e3%83%a9%e3%81%ae%e5%88%9d%e5%a3%b2%e3%82%8a%e3%81%ab%e8%a1%8c%e3%81%a3%e3%81%a6%e3%81%8d%e3%81%9f/" "hazhikko_test_500error_01031244"

エラーログを見てみる

アクセスログと同じようにエラーログをダウンロードします。
が、アクセスしたときにはエラーが発生してませんでした。

え、500なのに何もエラー吐いてないの…？
嘘でしょ…？

んなわけないと思いつつ、root権限なくて詳細が確認できないのでひとまず別の角度から調査を進めます。

レスポンスデータを見てみる

500エラーでエラー画面が表示されるならわかるけど、レイアウト崩れってどういうことだ？
ということで、サーバーが何を返してるかを確認します。

Developer ToolのNetworkで対象ファイルをクリック。
Responseタブを開くと、サーバーが返してきたHTMLのソースが見れます。

ソースを下まで見ていくと、トップページで記事のリストを作っているところでエラーが起きていました。
対象記事はFlutterについてのやつ。
試しにこのページを表示すると、確かにエラー画面になりました。

<p class="st-catgroup itiran-category">
<a href="https://nekodeki.com/category/%e3%83%97%e3%83%ad%e3%82%b0%e3%83%a9%e3%83%9f%e3%83%b3%e3%82%b0/flutter/" title="View all posts in Flutter" rel="category tag"><span class="catname st-catid99">Flutter</span></a> <a href="https://nekodeki.com/category/%e3%83%97%e3%83%ad%e3%82%b0%e3%83%a9%e3%83%9f%e3%83%b3%e3%82%b0/" title="View all posts in プログラミング" rel="category tag"><span class="catname st-catid6">プログラミング</span></a>	</p>
<h3><a href="https://nekodeki.com/twitter_client%e2%91%a7%e3%82%bf%e3%82%a4%e3%83%a0%e3%83%a9%e3%82%a4%e3%83%b3%e3%81%ab%e7%94%bb%e5%83%8f%e3%82%92%e8%a1%a8%e7%a4%ba%e3%81%99%e3%82%8b/">
FlutterでTwitterクライアント作成⑧タイムラインに画像を表示する					</a></h3>
<div class="blog_info">
<p>
<i class="fa fa-clock-o"></i>2020/4/7										&nbsp;<span class="pcone">
<i class="fa fa-tags"></i>&nbsp;<a href="https://nekodeki.com/tag/android/" rel="tag">Android</a>, <a href="https://nekodeki.com/tag/flutter/" rel="tag">Flutter</a>, <a href="https://nekodeki.com/tag/flutter%e5%85%a5%e9%96%80/" rel="tag">Flutter入門</a>				</span></p>
</div>
<div class="st-excerpt smanone">
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width">
<meta name='robots' content='noindex,follow' />
<title>WordPress &rsaquo; エラー</title>
<style type="text/css">
# CSSいろいろ
</style>
</head>
<body id="error-page">
<div class="wp-die-message"><p>このサイトで重大なエラーが発生しました。</p><p><a href="https://ja.wordpress.org/support/article/debugging-in-wordpress/">WordPress でのデバッグをさらに詳しく見る。</a></p></div></body>
</html>

<a href="https://nekodeki.com/category/%e3%83%97%e3%83%ad%e3%82%b0%e3%83%a9%e3%83%9f%e3%83%b3%e3%82%b0/flutter/" title="View all posts in Flutter" rel="category tag"><span class="catname st-catid99">Flutter</span></a> <a href="https://nekodeki.com/category/%e3%83%97%e3%83%ad%e3%82%b0%e3%83%a9%e3%83%9f%e3%83%b3%e3%82%b0/" title="View all posts in プログラミング" rel="category tag"><span class="catname st-catid6">プログラミング</span></a> </p>

FlutterでTwitterクライアント作成⑧タイムラインに画像を表示する </a></h3>

<p>

<i class="fa fa-tags"></i> <a href="https://nekodeki.com/tag/android/" rel="tag">Android</a>, <a href="https://nekodeki.com/tag/flutter/" rel="tag">Flutter</a>, <a href="https://nekodeki.com/tag/flutter%e5%85%a5%e9%96%80/" rel="tag">Flutter入門</a> </span></p>

</div>

<!DOCTYPE html>

<head>

<title>WordPress &rsaquo; エラー</title>

# CSSいろいろ

</style>

</head>

<div class="wp-die-message"><p>このサイトで重大なエラーが発生しました。</p><p><a href="https://ja.wordpress.org/support/article/debugging-in-wordpress/">WordPress でのデバッグをさらに詳しく見る。</a></p></div></body>

</html>

プラグインを確認してみる

対象がFlutterということは、心当たりはあいつしかいない…！！
コードを表示するためのプラグインCrayon Syntax Highlighterを無効化すると…直りました！！

このプラグイン、有名ではあるものの、もうずっとメンテされてないんですよね。。。
別のに変えたほうがいいのはわかっているものの、直すとなると既存記事を全部書き換えないといけないので放置してたやつです。。。

プラグイン変えるのはしんどいけど、エラーログ出ないのにデバッグするのも嫌だなぁ。
まぁ使ってる人多いから、だれか修正方法書いてるでしょ。
でググってみたらやっぱりヒット。

志木駅前のパソコン教室・キュリオステーション志木店のブログ

GutenbergでCrayon Syntax Highlighterを使う方法 ※PHP7.3でエラーの件も

https://curio-shiki.com/blog/webpage/gutenberg-crayon-syntax-highlighter

※PHP7.3でエラーが出る件を追記しました。Gutenbergエディタになって、ソースコードを表示するために愛用していたCrayon Syntax Highlighterのボタンがなくなり困っていたところ、ひょんなことで方法がわかりましたのでご紹介します。

PHP7.2→7.3で正規表現の解釈が変わったのが原因とのこと。
修正はcrayon_langs.class.php 340行目を直せばOKです。

// 変更前
return preg_replace(‘/[^\w-+#]/msi’, ”, $id);
// -+# → +#-に変更
return preg_replace(‘/[^\w+#-]/msi’, ”, $id);

// 変更前

return preg_replace(‘/[^\w-+#]/msi’, ”, $id);

// -+# → +#-に変更

return preg_replace(‘/[^\w+#-]/msi’, ”, $id);

修正後にCrayon Syntax Highlighterを有効化してトップページを確認し、レイアウトが崩れないことを確認しました。

レンタルサーバーでの調査って大変

レンタルサーバーは手軽ですが、root権限ないとなかなか調査するのが難しいですね。。。
ログをtailしたくてもできないし。
エラー出てないわけないと思っても確認できないし。

最近流行りのVPSならroot権限があるところもあるみたいですが、サーバーを引っ越すのも大変なので悩むところ。
root権限あるとサーバーぶっ壊す可能性もあるわけで。
今のところroot権限あるVPSだとさくらのVPSが有名らしいので、興味がある人はチェックしてみてもいいかも。

まぁ、今回PHP7.4に上げたから当面は問題ないでしょう。
次上げるときは8系だから問題が大量発生しそうだけど、その時になったら考えよう。。。