先月28日、当ブログの画面が真っ白になり、それから先週いっぱい復旧作業をしていました。
次から次と対処しなければならないことが見つかり状況をメモする余裕もなかったのですが、今後のために順を追って振り返り思い出したことを記録しておきたいと思います。

また、この1週間、検索に検索を重ねて、たくさんのブログ記事を読み、その中から参考にさせていただいたブログも合わせて紹介していきます。

子テーマを作成するまでとその後

1. 最近やけにページの読み込みが遅い
2. PHPのバージョンが古いことに気づきバージョンアップした
3. 「BackWPup」プラグインを導入しバックアップをとっておく
4. キャッシュプラグインを導入し、キャッシュを全削除した途端、画面が真っ白になった↠BackWPupで復元する
5. XAMPPを起動させ、ローカルサイトで子テーマを作り直す
   • 子テーマについて書かれた参考記事
6. 子テーマを作って分かったことと作り直した結果は？
   • そもそも私は何故、子テーマを作るか？
   • style.cssの作成について
   • WordPressを使い続けるにはメンテナンスが必要
   • 子テーマを作り直した結果
7. 困ったことを解決してくれた記事

1.最近やけにページの読み込みが遅い

最近やけにページの読み込みが遅く、コメントの送信にすごく時間がかかるようになりました。ブログサイトそのものがひどく重くなった気がします。
読み込みが遅くなる原因と対策はいろいろありますが、

WordPressブログが重い原因とは？初心者でもできる対策を解説
https://www.xserver.ne.jp/blog/wordpress-slow

まず簡単なところから不要なプラグインを見直して削除することから始めました。

ちょっと前にキャッシュ系プラグイン『W3 Total Cache (W3TC)』を入れていたのですが、サイトのパフォーマンスを上げるためのプラグインなのに現状ページの読み込みが遅くなっているので、これは必要ないと思い削除することにしました。
これがなんと！何度試しても管理画面から削除することができない。FFFTP(ファイル転送アプリ）を使ったところ、一括削除が無理だったのでファイルを少しずつ小分けにして削除していきました。すっごく時間がかかりました。

2.PHPのバージョンが古いことに気づきバージョンアップした

そして新たにキャッシュ系のプラグインを入れようとしたところで、最新のPHPのバージョンが8.4になっていることを知り、レンタルサーバーの管理画面でPHPバージョンを設定しました。（ロリポップでは2025年2月現在最新は8.3）
PHPが古かったためにプラグインが機能していなかったのかもしれません。
PHPのバージョンは毎年更新されています。私はバージョン7.4から5年間ほど更新を怠っていたわけです。

3.『BackWPup』プラグインを導入しバックアップをとっておく

キャッシュ系プラグインを導入する前にバックアップを取っておきます。
PHPもバージョンアップしたことなので、プラグイン『Backwpup』を入れて事前にバックアップを取りました。

【2025年最新】BackWPupの使い方・設定・復元方法を解説

追記：アーカイブ形式と圧縮形式については下記のように推奨している記事もあります。

【アーカイブ形式】解凍時にファイルが壊れにくい「Tar GZip」を設定する
【圧縮形式】サーバーへの転送速度が上がり、容量も軽くなるためサーバーへの負担を減らせる「GZip」を選択する　　
https://help.sakura.ad.jp/

4.キャッシュプラグインを導入し、キャッシュを削除した途端、画面が真っ白になった↠BackWPupで復元する

キャッシュ系プラグインとして設定が比較的シンプルと思える『WP Fastest Cache』を導入しました。
そして設定したのち「キャッシュを削除」ボタンを押したところ、サイトが真っ白になりました。
管理画面は開けるもののサイトは表示されません。真っ白です。

WordPressが真っ白になる９つの原因と対処法をプロが解説

とりあえず、『BackWPup』を使ってバックアップデータを復元することができました。
といっても完璧に復元できたわけでなく、css（スタイルシート）やfunctions.phpに追加した機能が反映されていないところが見受けられます。さらに読み込み速度はグッと遅くなっている気がしました。

サイトが真っ白になる原因はいろいろあるけれど、私のブログの場合絶対テーマに問題があると思いました。
なぜなら、私のブログのテーマは十数年前、私が十分な知識もないままWordpressの標準テーマ『Twenty Twelve』をベースに作った、自作の子テーマだからです。テーマ自体が完璧でないことは間違いないのです。

5.XAMPPを起動させ、ローカルサイトで子テーマを作り直す

XAMPP(ザンプ）を起動してサイトを作成したり編集すれば、いちいちレンタルサーバーにアップしなくても、自分のPC（ローカルサイト）上で動作確認ができます。
何度失敗しても気にすることなく作業が続けられるので、私には無くてはならないツールです。今使っているXAMPPのバージョンは7.46で、5年前に入れ替えたものです。これもだいぶ古くなりました。2025年現在は8.2.12のようです。いずれまた最新のバージョンに入れ替えなければならないかもしれませんが、前回インストールに結構大変な思いをしたので、もうしばらくはこのままでいたいような、、、、

XAMPPとは？XAMPPの意味や設定・使い方を解説
https://hnavi.co.jp/knowledge/blog/xampp

ちなみにコードを書くエディタは『Visual Studio Code』を使いました。
『Visual Studio Code』はMicrosoftが開発している無料のWeb用のコードエディタです。無料とは言えAdobeの有料アプリにも劣らない機能を備えています。

初心者にもわかる「VSCode」の導入から基本操作まで解説
https://envader.plus/article/118

子テーマについて書かれた記事をたくさん読み漁りました。

WordPressで子テーマを作る方法と反映されない場合の対策
https://designup.jp/wordpress-child-theme.html

子テーマを作成して、WordPressのテーマを部分的にカスタマイズする方法

6.子テーマを作って分かったことと、作り直した結果は？

そもそも私は何故、子テーマを作るか？

その理由はプログラミングのスキルが無くても、お仕着せでないデザインで自分仕様のブログサイトを作りたいからです。
それと、プログラミングのスキルが無いからこそ分からないことだらけで、それを検索して解答を見つけ解決していく過程が結構楽しい。もちろん、趣味の範疇だから楽しめています。趣味ならばどんなことも楽しいものです。

とまあ、そんなわけで、『Twenty Twelve』を親として、子テーマを一から作り直していきました。

今回、以前作成した自作の子テーマを見返してみて、私は読み込み速度を低下させるようなマズイ作り方をしていたんだってことがよーく分かりました。
十数年前、親テーマのstyle.cssやfunctions.phpをマルっとコピーして変更や追加をしていったのですが、その際変更を加えなかった部分を削除せずそのままファイルに残していました。親テーマと子テーマで二重表記になった余分なコードがあったということです。
実際はコードを記述するのは変更や追加箇所だけでよかったのです。
追加したけどあとから必要なくなったコードなんかもそのまま残っていて、、、、
作りっぱなしで、ゴミは溜まり続けていたというか、、、、それでも、サイトは動いていたわけですが。正直言うと当時は削除することが怖かったというところもありました。

style.cssの作成について

今回style.cssを作成するにあたっては、親テーマのstyle.cssをコピーして編集追加を行うところまでは前回と同じです。
その後、削除したい部分はコメントアウトして動作確認をし、OKだったら削除、エラーが出たら見直す、を繰り返していきました。
記述ミスと記述する場所を間違えないようにするため、慣れないうちは面倒でもこの方法が安心かなと思います。

その作業をしている間にも別のブログサイトが2個、画面が真っ白になるという事態が発生しました。それはプラグインの自動更新中に起こったことだったので、全てのプラグインを「無効化」し、ひとつずつ「有効化」して動作確認を繰り返していきました。すると古くから入れているプラグインが一エラーを起こしているのが分かりました。PHPのバージョンアップをしたため互換性に問題が生じたのか？と推測するのですが、、、、ともかくそのプラグインを削除したところサイトは正常に戻りました。

WordPressを使い続けるにはメンテナンスが必要

WordPressも親テーマもプラグインも頻繁にアップデートを繰り返しています。
それは、アプリケーションを作る側が常にメンテナンスをしているってことなんですよね。
アプリを使う側も同様にメンテナンスを繰り返していかなければならない、って当たり前のことを今さらながら思い知りました。

子テーマを作り直した結果

そして子テーマを作り直した結果どうなったかというと、すごく読み込みが速くなりました！とりあえず私の環境においてはですが、ページをサクッと開けるようになりました。

下は「テーマ管理画面」に並んでいる親子のツーショット。

7.困ったことを解決してくれた記事

個別記事に大きく表示されるアイキャッチ画像を非表示にしたいと思ったところ、十数年前とはTwenty Twelveの仕様も変わっていて、どこをコメントアウトすれば良いのか分からず困りました。下記記事のおかげで解決できました！

WordPress: Twenty Twelveテーマのアイキャッチ画像の非表示設定

記事編集画面で、ｈ1～ｈ6などがstyle.cssに書いたものと同じスタイルで表示されるようeditor-style.cssを作成しました。下記のブログを参考にさせていただきました。

WordPressのビジュアルエディタ表示を実際に公開されるページ表示に近づける方法