「プラグイン」タグアーカイブ

WordPressの画面が真っ白になり子テーマを作り直すことになった

2025年03月13日コメントを残す

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

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

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

最近やけにページの読み込みが遅い
PHPのバージョンが古いことに気づきバージョンアップした
「BackWPup」プラグインを導入しバックアップをとっておく
キャッシュプラグインを導入し、キャッシュを全削除した途端、画面が真っ白になった↠BackWPupで復元する
XAMPPを起動させ、ローカルサイトで子テーマを作り直す
- 子テーマについて書かれた参考記事
子テーマを作って分かったことと作り直した結果は？
困ったことを解決してくれた記事

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のビジュアルエディタ表示を実際に公開されるページ表示に近づける方法

パンくずリストをプラグイン無しで作る

2021年02月25日コメントを残す

今回はプラグイン無しでパンくずリストを作ったので、備忘録としてメモしておきます。

作成にあたって、とても分かり易い解説がされている下記サイトを参照いたしました。（感謝！）

【WordPress】パンくずリストをプラグイン無しで自作する方法
_{オリジナルゲーム.com「【WordPress】パンくずリストをプラグイン無しで自作する方法」参照}

作成手順は、

作業前に変更するファイルのコピーを取っておく（※これ、大事です）
functions.phpにコードを追記する
パンくずを表示させたいファイルにコードを追記する
style.cssでスタイルを整える
category.phpとtag.phpの二重表記を修正（必要があれば）

2.functions.phpに追記したコード

「【WordPress】パンくずリストをプラグイン無しで自作する方法」に掲載されている完成版を、まるっきりコピーして使用させていただきました。

// ===========================
// = パンくず =
// ===========================
function mytheme_breadcrumb() {
    	//HOME>と表示
    	$sep = '>';
    	echo '&lt;li>&lt;a href="'.get_bloginfo('url').'" >HOME&lt;/a>&lt;/li>';
    	echo $sep;
     
    	//投稿記事ページとカテゴリーページでの、カテゴリーの階層を表示
    	$cats = '';
    	$cat_id = '';
    	if ( is_single() ) {
    		$cats = get_the_category();
    		if( isset($cats[0]->term_id) ) $cat_id = $cats[0]->term_id;
    	}
    	else if ( is_category() ) {
    		$cats = get_queried_object();
    		$cat_id = $cats->parent;
    	}
    	$cat_list = array();
    	while ($cat_id != 0){
    		$cat = get_category( $cat_id );
    		$cat_link = get_category_link( $cat_id );
    		array_unshift( $cat_list, '&lt;a href="'.$cat_link.'">'.$cat->name.'&lt;/a>' );
    		$cat_id = $cat->parent;
    	}
    	foreach($cat_list as $value){
    		echo '&lt;li>'.$value.'&lt;/li>';
    		echo $sep;
    	}
     
    	//現在のページ名を表示
    	if ( is_singular() ) {
    		if ( is_attachment() ) {
    			previous_post_link( '&lt;li>%link&lt;/li>' );
    			echo $sep;
    		}
    		the_title( '&lt;li>', '&lt;/li>' );
    	}
    	else if( is_archive() ) the_archive_title( '&lt;li>', '&lt;/li>' );
    	else if( is_search() ) echo '&lt;li>検索 : '.get_search_query().'&lt;/li>';
    	else if( is_404() ) echo '&lt;li>ページが見つかりません&lt;/li>';
    }

3.パンくずリストを表示させたいファイルに追記するコード

&lt;div class="mytheme_breadcrumb">
    &lt;?php mytheme_breadcrumb(); ?>
       &lt;/div>

パンくずリストを表示させたいファイル
　　・single.php
　　・category.php
　　・tag.php

コードを追記する位置は各ファイルの<div id=”content” role=”main”>の下になります。＜div＞のクラス名は任意。

4.style.cssでスタイルを整える（一例：2021/03/27修正しました）

/* パンくず */
.mytheme_breadcrumb li {
    font-size: 90%;
    display: inline-block;   
}

5.category.phpとtag.phpの二重表記を修正

私が使っているテンプレートでは、カテゴリーとタグページに元々パンくずが表示されていたので、二重表記になってしまいました。スタイルを統一するために
category.phpとtag.phpのコードを一部削除しました。

category.phpで削除したところ

&lt;h1 class="archive-title">&lt;?php printf( __( 'Category Archives: %s', 'twentytwelve' ), '&lt;span>' . single_cat_title( '', false ) . '&lt;/span>' ); ?>&lt;/h1>

tag.phpで削除したところ

&lt;h1 class="archive-title">&lt;?php printf( __( 'Tag Archives: %s', 'twentytwelve' ), '&lt;span>' . single_tag_title( '', false ) . '&lt;/span>' ); ?>&lt;/h1>

wpプラグイン「topへ戻る」ボタンを比べてみました。

2014年02月11日コメントを残す

ボタンをクリックすると、ページのトップにシュルシュルっとスクロールしてくれる。無くてもさほど困らないけど、あるとwebサイトがちょっとカッコ良くなる「topへ戻るボタン」を、いくつか比べてみました。
プラグインをインストールして有効化するだけで作動するものと、設定やオプションがあって、カスタマイズできるタイプがあります。

「RRF Scroll To Top」，「Royal Scroll to Top」
「Smooth Page Scroll to Top」，「Scroll Button」

いずれも同じタイプのボタンです。
オプションはありませんので、プラグインを有効化するだけで、すぐ作動します。
ボタンが現れる位置やアニメーションに、微妙な違いがあります。

「Scroll to Top Button」

これもオプション無し。プラグインを有効化するだけでOKです。画面の右下角っこに四角いボタンがスッと現れます。

「LB Back To Top」

オプション無し。プラグインを有効化するだけでOKです。
画面右下に文字付きの黒い四角いボタンが現れます。
文字はプラグインファイル（backtop/index.php）を直接編集して変更できます。

「Smooth-scroll-to-top」

オプションは無し。プラグインを有効化するだけでOKです。画面右下にボタンが現れます。

「WP Scroll To Top」

プラグインの有効化だけで作動します。アイコン5個からボタンを選べるオプションがあります。
（私の場合icon4は、表示されませんでした。）

「WP-Smooth-Scroll」

ボタンの位置を右、中央、左から選択できます。
ボタンは、マウスオーバーで青色に変わります。

「Back To Top」

ボタンやアニメーションの効果について、オールマイティーなオプションがあります。
ボタンのオプションは以下の3通り。

①左のような25種類の画像が用意されているので、その中から気に入ったボタンを使う。
②手持ちの画像をアップロードして使う。
③画像でなくテキストでボタンを表示する。
ボタンの動きについても3通りのエフェクトが選べます。
①ボタンが、フェードイン／フェードアウトする。
②ボタンが画面下から上下に、スライドアップ／スライドダウンする。
③ボタンが画面右下角からヒョイと現れ、ヒョイと引っ込む。

「Scroll To Top」

テキストとテキスト幅、文字色、背景色を設定できます。ボタンは画面の中央に現れます。

まだまだ、ありますが、このくらいにしておきます。
利用しているWordPressのバージョンや導入しているプラグインなどとの相性で、作動しないものがあるかも知れません。

スクラップブック

art-containerのアトコンブログ

「プラグイン」タグアーカイブ

WordPressの画面が真っ白になり子テーマを作り直すことになった

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

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

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

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

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

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

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

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

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

style.cssの作成について

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

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

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

パンくずリストをプラグイン無しで作る

2.functions.phpに追記したコード

3.パンくずリストを表示させたいファイルに追記するコード

4.style.cssでスタイルを整える（一例：2021/03/27修正しました）

5.category.phpとtag.phpの二重表記を修正

wpプラグイン「topへ戻る」ボタンを比べてみました。

「RRF Scroll To Top」，「Royal Scroll to Top」
「Smooth Page Scroll to Top」，「Scroll Button」

「Scroll to Top Button」

「LB Back To Top」

「Smooth-scroll-to-top」

「WP Scroll To Top」

「WP-Smooth-Scroll」

「Back To Top」

「Scroll To Top」

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

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

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

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

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

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

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

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

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

style.cssの作成について

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

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

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

2.functions.phpに追記したコード

3.パンくずリストを表示させたいファイルに追記するコード

4.style.cssでスタイルを整える（一例：2021/03/27修正しました）

5.category.phpとtag.phpの二重表記を修正

「RRF Scroll To Top」，「Royal Scroll to Top」「Smooth Page Scroll to Top」，「Scroll Button」

「Scroll to Top Button」

「LB Back To Top」

「Smooth-scroll-to-top」

「WP Scroll To Top」

「WP-Smooth-Scroll」

「Back To Top」

「Scroll To Top」

「RRF Scroll To Top」，「Royal Scroll to Top」
「Smooth Page Scroll to Top」，「Scroll Button」