Web プログラミング

サイトでバグ発生【解決策:Crayon Syntax Highlighteの削除】

エンジニア初心者のねこらのん(@nekoranon256)です。

 

急にブログのphpがおかしくなって探しても見当たらず途方にくれていましたがやっと改善できたので、改善に至るまでの経緯を残します。

『サイトに重大なエラーがありました』がでたときの4つの対応

2日前に一部のサイトのHTMLやCSSがバグってしまいました。

 

原因追求のために以下のことをしていきました。

 

  1. ホーム画面と人生の画面、2つのブログ記事のCSSのバグ
  2. 「サイトに重大なエラーがありました。WordPressでのデバッグをさらに詳しく見る。」をクリック
  3. デベロッパーツールでみると500エラー
  4. 先日入れたプラグインを入れておかしくなったことに気づく

 

結論を先に言うと、先日入れたプラグインの「Crayon Syntax Highlighter」がphpに悪さをしてみたみたいで削除したら修復することができました

 

これを無効化すると改善されましたが同じことが起こったときに対応できるようにメモで残しておきます。

対応①一部ページのCSSのバグ

ページのCSSが突然以下のようになってしまいました…!

本来あるべきCSSとHTMLが形になっていないので、すべてのページがバグを起こしているのかを確認。

 

するとすべてのページではなく、

  • ホーム画面
  • 人生ページ
  • もりけん塾の最新の2記事

だけがおかしくなっていることが判明。

 

もりけん塾の最新2記事はweb上から削除してみましたがホームページと人生ページは変化なし…でした。

対応②「サイトに重大なエラーがありました。WordPressでのデバッグをさらに詳しく見る。」をクリック

記事を開こうと思ったら上記のようなページが表示されました。

 

リンクがはってあったので、とんでみると以下のページが表示されました。

 

 

「wp-config.php」内にある「define( 'WP_DEBUG', false );」が問題だという記事をみつけたので、

 

false→true

 

にしました。

 

結果何も変わらず…

 

対応③デベロッパーツールでみると500エラー

デベロッパーツールでみるとエラー表示のオンパレード…!

 

わ…わからん…

 

って混乱を少々起こしつつも冷静さを取り戻すと500エラーという文字を見つけました。

 

「 500 Internal Server Error」

 

だったのでエックスサーバーに問題あり…??

 

でも、よく分からず…

 

【解決】対応④プラグイン「Crayon Syntax Highlighte」を入れておかしくなったことに気づく

Crayon Syntax Highlighte」というコードを表示させるプラグインを入れてからおかしくなったことを思い出しました。

 

「Crayon Syntax Highlighte エラー」で検索すると2019年版 Crayon Syntax Highlighterのエラーという記事を見つけました。

 

phpに悪さをするプラグインらしく深刻なエラーを出すことがあったという内容からプラグインを無効化。

 

すると…

 

なおったーーー!

 

プラグインのCrayon Syntax Highlighteが原因でした!

 

バグ見つけてすっきり!!

 

終わりに

バグが起こるとパニックになりますが「バグが起こることには何らかの原因がある」と思い調べてすすめていくと時間はかかりましたが解決することができました…!

 

バグを解決していくことが経験値になるとエンジニア界隈のツイートでみたので、解決できてよかったです!

 

まだまだ時間がかかりますが冷静に分析してバグに対応できるようになっていこうと思います。

 

(本当によかったー!)

-Web, プログラミング

© 2020 Mayu_Yamada