【真っ白画面】動画制作マンのWordpress奮闘記

2021年11月16日。

自分のサイトを編集しようとWordpressへログイン。

編集して保存しようとしたその時、事件発生。

保存するための時間が長いな･･･。

と思っていたら、画面が真っ白に。

エラーの文言は一文字も無く、ただただ画面が真っ白。

とりあえず前のページに戻ろうと、ブラウザの戻るをクリック。

が、戻れない。

ここでも読み込み時間が長く･･･。

30秒ほど経過した後に真っ白の画面再登場。

ちょっと時間を置くかと思い、別のサイト（別のWordpress）にログインしようとする。

･･･。

･･･。

できない！

うそ･･･だろ･･･。

通称：死の真っ白画面が突如何度も登場し、私も頭が真っ白になりました。

・・・・・

・・・

・

-------------------------------------------------------

こんにちは、埼玉で動画制作をしているアニメLaboです。

本記事は

「コード？htmlをほんの少しだけ」
　
「ホームページ作れるのかって？テーマ使うなり、ペライチなりWixなりを活用してとりあえず作れます」

という本業動画制作マンが、Wordpressと戦った内容を備忘録として書いていきます。

もし同じエラーが起きた方へ。
どこか一部でも参考になれば幸いです。

-------------------------------------------------------

1.エラー内容と経緯の整理

それでは早速、エラーの整理から。

ここでは端的な記載のみします。

問題発生の経緯に詳しい内容をまとめていきます。

今回のエラーは大きく以下3点。

①読み込み時間が長く、ページの更新／表示ができない
②そもそも管理画面に行けない／戻れない
③エラー発生後に別のドメイン側でも同様のエラーが発生する

経緯はいたってシンプル。

①管理画面へログイン
②公開済み固定ページの編集から編集画面へ
③編集画面で軽い作業後、更新を押す
④読み込み時間の長時間化、その後真っ白画面
⑤戻ろうとするも④と同上
⑥再度管理画面へログインしようとしても同じく④
⑦別ドメインに行って別のサイトを編集しようとしても真っ白

2.解決方法

結論として、解決はできました。

その方法とは

「1ページの容量を軽くすること」

でした。

実際に解決できた作業はコレです。

Wordpressに直接アップロードし、videoタグ使って表示させていた動画ファイル3つをvimeo埋め込みに変更。

3.自身の環境整理

その時の環境がどうなっていたかも残していきます。

＜11月16日以前の更新日＞
・11月3日

＜上記の間のプラグインなどの更新＞
・自動更新不可にしていたため、無し

＜基本的な環境＞
・PC：windows10 64bit
・ブラウザ：Google chrome、試し用にMicrosoft Edge
・サーバー：ロリポップ

＜Wordpressの環境＞
・Wordpress①（最初のエラー）
　・テーマ：Colorful
　・プラグイン：Classic Editor、WP Add Custom CSS、
　　　　　　　　Contact form7、WP Add Mime Types
　・動画ファイルを直接アップロードし利用

・Wordpress②（別のサイト側）
　・テーマ：Sango
　・プラグイン：Google Analytics for WordPress by MonsterInsights
　　　　　　　　Contact Form 7、All in One SEO
　・動画はYouTubeまたはvimeo埋め込みのみ

・Wordpress③（急いで新規作成）
　・テーマ：Sangoテーマ
　・プラグイン：Sango Gutenberg、Contact Form 7
　・動画ファイルを直接アップロードし利用

4.試したこと一覧

ここからは素人なりに試したことを残していきます。

暖かく見守ってくださるとうれしいです！

4-1.一番初めに

とにかく真っ先に行動したのは検索。

エラーメッセージが無いこと、真っ白画面と出会ったことが無いことから、「Wordpress　画面　白い」など似たような文言でとにかく検索しました。

その後、様々なエラーによって成り立つことがわかり、色々やることがあるものの、まずはこの辺を試すこととしました。

・ブラウザのキャッシュ削除
・Wordpressのキャッシュ削除
・プラグインの全停止⇒一つずつ再開させ原因を突き止める

4.2ブラウザのキャッシュ削除

ログイン画面から管理画面へ入ることは出来るようになりました。

再度固定ページの編集⇒編集画面で保存。

が、真っ白。

これでは無いようです･･･。

4.3Wordpressのキャッシュ削除

ブラウザのキャッシュ削除では、Wordpress内部のキャッシュ削除が出来ないという点が分かり、ではこちらもと対応。

プラグインでWP Fastest Cacheを使いました。

キャッシュ削除開始･･･。

再々度、固定ページの編集⇒編集画面で保存。

わぁ、真っ白！

4-4.プラグインの停止で突き止め･･･

プラグインをいったん全停止⇒一つずつ有効化していき、直します。

ちなみに、その時点で利用していたのはこちらのプラグインです。

＜プラグイン＞
　・Classic Editor
　・WP Add Custom CSS
　・Contact form7
　・WP Add Mime Types
　
※WP Fastest Cacheはキャッシュ削除で利用した後、即停止してからページ編集に移ったため、この作業はやっても意味が無いと予想。

はい、全部ダメでした。

4-5.サーバー会社へ連絡

ロリポップへ現状と対応した内容を報告。

すると、このようなご連絡をいただきました。

サーバー側には何もエラーログが無く、ロリポップ社側からは画像含めページが正常に表示されている。

そのため、Wordpress側で何か起きているのでは･･･。

そして、合わせて参考記事をいただきました。

別に責めたいとかは無く、むしろそこまでやっていただいてとても感謝しているのですが、先に調べていたページでした･･･。

あくまでもサーバーの会社ですから、ここからはもう頼れない。

とは言え、ここからはFTPサーバをいじるーとかwp-config.phpをいじるーとか、今まで知らない内容ばかり。

そこで私が取った行動は･･･。

4-6.いったん時間を置いてみた

ほっときました。

このエラーが起きたのは11月16日。

その日の最後に、プライベートウィンドウを利用して自分のサイトを確認したところ、画像も含め正常に表示されていました。

頭の中が混乱しきっていて、まあとりあえずいっかと思い、翌日に回しました。

･･･

次の日、再度管理画面へログイン。

編集画面をいじって、いつもと同じように保存･･･できない。

また真っ白画面でした。

4-7.新しいWordpressインストール

FTPやらなんやらは無知ゆえにどこにどんな影響があるのか怖く、最悪はWordpress入れ直しという方向を考えていました。

元々作ったものをコードコピペで残していたことから、そんなに手間じゃないかなと･･･。

そして、ついに新規で作り直すことを決意。

サブドメインを作り、再度インストール。

インストール後のテーマとプラグインです。

テーマ：Sango
プラグイン：Sango Gutenberg、Contact Form7

特に問題なく公開まで行きました。

公開後に再度見直していたところ、少し直したい箇所を発見したため、直そうとしました。

固定ページの編集⇒ページを編集し、保存。

読み込み時間が長い･･･。

頼む、進んでくれ！

ダメでした。

4-8.検索⇒再度整理⇒たまたまの発見

もうダメだと思い、絶望の中なにかないかと再度検索。

Wordpress公式のサポートフォーラムの中身を一つずつとか色々探しました。

ちなみに、フォーラムでは有志達が色々と質問に答えてくれてそこから解決したものも多々あります。

そこから同じエラーが見つかるかも知れません。
https://ja.wordpress.org/support/forums/

でも、同じエラーはあっても、残っているのはFTP～といった方法しか残っていません。

いったんエラー内容や備考など、思ったことをノートちぎって整理してみました。

以下が書いていた内容です。
（汚くまとまりもありませんが許してください･･･）

＜エラーの内容＞
①読み込み時間が長く、ページの更新／表示ができない
②そもそも管理画面に行けない／戻れない
③エラー発生後に別のドメイン側でも同様のエラーが発生する
④新規のWordpressでも同様のエラー

＜備考＞
①時間をある程度置いてから再度試すと管理画面にいける
②外観のカスタマイズ画面も更新できない
③クイック編集だけは出来た（ページの公開／非公開）
④プライベートウィンドウから見に行くと、一部の画像が表示されない場合と問題なく表示できている場合がある
⑤表示されない場合、Googleのページ検証⇒コンソール⇒エラー表記は画像が表示できないものという内容　
⑥編集後に保存／更新した内容は真っ白画面になったとしても、保存されている（⇐！！？

＜疑問点＞
①外部から画像を含め問題なく表示される場合と表示されない場合がある
②時間を置いてからなら、キャッシュの削除をしなくても管理画面までいける
③更新した内容がしっかり保存されて表示されている
④そもそもテーマやプラグインの問題ではない？？

そして、たまたま「そういえばこっちは動画をvimeoまたはYouTubeから経由しか表示させてないなー」なんて思い、最初のエラーとは違うWordpressをいじっていました。

え、問題なく保存できる･･･！？

もしかして、動画が容量多すぎるからなんて問題か･･･？

というたまたまの予想をしてみました。

そして、エラー側の管理画面へ行き、メディア内容から動画を削除。

メディアから動こうとしたときにまた例の真っ白画面をやられましたが、少し時間を置いてから再度管理画面へ。

固定ページの編集⇒ページの編集⇒保存。

できました！

一気に体の力が抜けていったのを覚えています。

5.まとめ＋参考記事

ということで今回は動画制作マンの奮闘記でした。

今回の記事を3点でまとめると、このような感じです。

・動画はなるべくYouTubeもしくはVimeo経由で表示させる
・ダメなときはいったん落ち着く⇒とにかく言語化して整理する⇒再度考える
・死の真っ白画面の恐怖に負けない

あのあと調べていたら、もしかしたらメモリ不足が原因だったのかなと思います。

こちらの記事が参考になるかもしれません。

＜参考記事＞
「死の真っ白画面（WSoD）」をなおす、効果的な9つの対処法
https://kinsta.com/jp/blog/wordpress-white-screen-of-death/

WordPressのメモリ使用量を増やす方法
https://harmonic-sound.com/wordpress-memory/

この真っ白画面を体験したことにより、3レベルくらい上がった気がします。