MENU

【WordPress×PHP】子テーマの導入とバックアップを解説

【WordPress×PHP】子テーマの導入とバックアップを解説
目次

はじめに

【WordPress×PHP】テーマとPHPの関係を基本から解説では、WordPressがテーマのPHPファイルでページを組み立てていることと、カスタマイズは親テーマではなく子テーマに書くことを解説しました。

いよいよPHPを書き換えていきたいところですが、その前に安全に書き換えるための準備が必要です。今回は、SWELLの子テーマを導入する手順と、本番サイトのバックアップ、そして万一エラーが出たときの戻し方を解説します。

このシリーズの全15回の構成は、第1回の記事の冒頭にまとめています。

本番サイトを直接書き換えると何が起こる?

PHPは、1文字の書き間違いでも動かなくなる言語です。たとえば、子テーマのfunctions.phpの最後に、セミコロンを付け忘れた次の1行を追加したとします。

echo "テスト"

この状態でサイトを開くと、ページの代わりに次のメッセージだけが表示されます。

このサイトで重大なエラーが発生しました。

functions.phpはすべてのページで読み込まれるため、トップページも記事も、管理画面へのログインもすべて同じ表示になります。管理画面に入れないので、管理画面から元に戻すこともできません。

functions.phpの書き間違いで表示される「このサイトで重大なエラーが発生しました」の画面イメージ。サイトのすべてのページと管理画面がこの表示になる

このような事態に備えて、このシリーズでは次の3つを準備してからPHPを書き換えます。

準備目的解説する回
子テーマ親テーマのアップデートで変更が消えないようにする今回
バックアップ失敗しても元の状態に戻せるようにする今回
ローカル環境本番サイトではなく、自分のパソコンの中で試せるようにする次回

SWELLの子テーマを導入する

第1回で解説したとおり、カスタマイズは子テーマに書きます。SWELLでは、公式の子テーマが無料で配布されています。

Step 1:子テーマをダウンロードする

SWELLの会員サイト「SWELLERS’」にログインし、マイページの「SWELL製品ダウンロード」から子テーマをダウンロードします。ファイル名はswell_child.zipです。

ZIPファイルは、展開せずにそのまま使います。

Step 2:子テーマをインストールする

WordPressの管理画面で、次の順に操作します。

  1. 「外観」→「テーマ」を開く
  2. 画面上部の「テーマを追加」をクリックする
  3. 「テーマのアップロード」をクリックする
  4. 「ファイルを選択」でswell_child.zipを選び、「今すぐインストール」をクリックする
WordPressの管理画面「テーマを追加」で「テーマのアップロード」をクリックし、swell_child.zipを選んで「今すぐインストール」を押す直前の画面

Step 3:子テーマを有効化する

インストールが終わったら「有効化」をクリックします。「外観」→「テーマ」の画面で、SWELL CHILDが「有効」になっていれば完了です。

子テーマを有効にしても、見た目や機能は親テーマのSWELLのときと変わりません。子テーマは、親テーマの機能をすべて受け継いでいるからです。

SWELL以外のテーマで子テーマが配布されていない場合は、自分で作ります。wp-content/themes/の中に新しいフォルダを作り、style.cssの先頭にTheme Name:(子テーマの名前)とTemplate:(親テーマのフォルダ名)を書けば、子テーマとして認識されます。親テーマのCSSを読み込む書き方はテーマによって異なるため、使っているテーマの公式マニュアルを確認してください。

切り替えで引き継がれる設定・引き継がれない設定

すでにSWELL(親テーマ)でサイトを運営している場合、子テーマに切り替えたときに設定がどうなるかが気になるところです。検証用のWordPressで実際に切り替えて確かめたところ、次のとおりでした。

設定子テーマに切り替えた後
カスタマイザーで設定したSWELLの設定(メインカラーなど)引き継がれる
メニューの表示位置(グローバルナビなど)引き継がれる
カスタマイザーの「追加CSS」引き継がれない

SWELLの設定は、テーマごとではなくサイト全体の設定として保存されているため、そのまま使えます。一方、「追加CSS」はテーマごとに保存されるため、子テーマに切り替えると空になります(親テーマ側には残っています)。

親テーマから子テーマに切り替えたときに引き継がれる設定と引き継がれない設定。SWELLの設定とメニューの位置は引き継がれ、追加CSSは引き継がれない

親テーマで「追加CSS」を使っている場合は、子テーマに切り替える前に、その内容をメモ帳などにコピーしておきましょう。切り替えた後、子テーマの「追加CSS」に貼り付けるか、子テーマのstyle.cssに移します。

本番サイトのバックアップを確認する

次に、失敗しても元に戻せるようにバックアップを確認します。ここでは、当サイトでも使っているエックスサーバーを例に解説します。

エックスサーバーの自動バックアップ

エックスサーバーには、自動バックアップの機能が全プランに標準で付いています。

項目内容
取得のタイミング1日1回、自動で取得
対象Webサイトのファイル・メール・データベース(MySQL)
保存期間過去14日分(一部の旧サーバーは7日分)
料金追加料金なし

自分で操作しなくても毎日バックアップが取られているので、まずはこの機能があることを知っておけば十分です。

Webサイトのファイルの取得や復元は、サーバーパネルの「自動バックアップの取得・復元」から行います。この画面で扱えるのはWeb・メールのデータで、データベースのバックアップは「MySQLバックアップ」という別のメニューから取得・復元します。

エックスサーバーのサーバーパネル「自動バックアップの取得・復元」の画面。処理の種類(取得または復元)と対象のバックアップ日を選んで操作する

復元すると、対象のフォルダはバックアップした日の状態で上書きされ、それ以降に追加したファイル(記事にアップロードした画像など)は削除されます。また、記事の本文はデータベースに保存されているため、ファイルの復元とデータベースの復元は別の操作です。復元はほかの方法で直せないときの最後の手段と考え、実行前にエックスサーバーのマニュアルで手順と注意事項を確認してください。

書き換える前に、自分でも控えを取る

自動バックアップは便利ですが、「1日前の状態」にしか戻せず、操作も大がかりです。そこで、ファイルを書き換える直前に自分でも控えを取っておくのがおすすめです。

いちばん簡単なのは、書き換える前のfunctions.phpの中身を、すべてメモ帳などにコピーして保存しておく方法です。何かあっても、コピーした内容を貼り直せば元に戻せます。

また、エックスサーバーのサーバーパネルにある「手動バックアップ作成」を使うと、好きなタイミングでサーバー上のフォルダのバックアップを作れます。PHPを大きく書き換える前に作っておくと安心です。

子テーマのフォルダごと控えを取りたいときは、エックスサーバーのファイルマネージャを使います。ファイルマネージャは、ブラウザからサーバーのファイルを操作できる機能で、フォルダ単位でダウンロードできます。

(ドメイン名)/public_html/wp-content/themes/swell_child

上の場所にあるswell_childフォルダをダウンロードしておけば、子テーマ全体の控えになります。

重大なエラーが出たときの戻し方

準備をしていても、エラーを出してしまうことはあります。慌てずに、次の順番で対処します。

重大なエラーが出たときの戻し方。1.ファイルマネージャで直前の変更を元に戻す、2.リカバリーモードで管理画面に入る、3.自動バックアップから復元する、の順に試す

1. 直前の変更を元に戻す

エラーの原因は、ほとんどの場合直前に書き換えた部分です。エックスサーバーのファイルマネージャでfunctions.phpを開き、追加した部分を削除するか、控えておいた元の内容に戻して保存します。

検証用のWordPressで試したところ、書き間違いを直して保存すると、その直後からサイトは元どおり表示されました。

2. リカバリーモードで管理画面に入る

重大なエラーが起きると、WordPressはサイトの管理者のメールアドレスに通知メールを送ります。このとき、エラーの画面は次のような表示になります。

この Web サイトに重大なエラーが発生しました。サイト管理者のメール受信箱で手順を確認してください。

メールに書かれているリンクからリカバリーモードでログインすると、エラーの原因になったテーマやプラグインを一時停止した状態で、管理画面に入れます。メールには、エラーが起きたファイル名と行番号も書かれているので、原因を探す手がかりになります。

3. 自動バックアップから復元する

1と2で直せない場合は、エックスサーバーの自動バックアップから、エラーが起きる前の状態に復元します。先ほどの注意のとおり、それ以降の変更も消えてしまうため、最後の手段として使います。

管理画面の「テーマファイルエディター」には、重大なエラーになる変更を保存しようとすると、保存を取り消す仕組みがあります。ただし、すべての書き間違いを防げるわけではありません。また、ファイルマネージャなどで直接ファイルを書き換えた場合は、この仕組みは働きません。

よくある質問・エラー対処

Q. 子テーマに切り替えたら、デザインの一部が元に戻ってしまいました

→ 親テーマの「追加CSS」に書いていたCSSが、子テーマでは読み込まれていない可能性があります。「外観」→「テーマ」で一時的に親テーマのSWELLを有効にし、「追加CSS」の内容をコピーしてから、子テーマに戻して貼り付けてください。


Q. 子テーマもアップデートが必要ですか?

→ SWELLの子テーマには自動更新の仕組みはありません。子テーマには自分で書いたカスタマイズが入るので、アップデートで上書きされないことが、むしろ子テーマを使う理由です。アップデートするのは親テーマのSWELLだけです。


Q. バックアップ用のプラグインも入れたほうがいいですか?

→ エックスサーバーの自動バックアップがあれば、テーマの書き換えに備える目的では十分です。ただし、保存されるのは過去14日分だけなので、もっと前の状態を長く残しておきたい場合は、ファイルマネージャでのダウンロードやバックアップ用のプラグインを検討してください。

おわりに(まとめ)

まとめ

PHPを書き換える前に、子テーマとバックアップを準備しておけば、失敗しても落ち着いて元に戻せます。

  • ✅ functions.phpの書き間違い1つで、サイトも管理画面も「重大なエラー」になる
  • ✅ SWELLの子テーマは、会員サイトからダウンロードしてインストール・有効化する
  • ✅ 子テーマに切り替えても、SWELLの設定とメニューの位置は引き継がれる
  • ✅ 「追加CSS」は引き継がれないので、切り替え前にコピーしておく
  • ✅ エックスサーバーは、1日1回・過去14日分を自動でバックアップしている
  • ✅ 書き換える前に、元の内容を自分でも控えておく
  • ✅ エラーが出たら「直前の変更を戻す→リカバリーモード→自動バックアップ」の順に対処する

次回は、自分のパソコンの中にWordPressを作り、本番サイトに影響なく試せるローカル環境を準備します。

次回は、ローカル環境(Local)の作り方について解説予定です。

この記事が、少しでも誰かのお役に立てれば幸いです。

関連記事

当サイトの記事で使用したVBAなどのサンプルをDLできます

この記事のサンプルはありません!

ダウンロードページへは下のカードをクリックすればジャンプできます。
よろしければご利用ください!


【CSS】テキスト関連プロパティについて基本解説|Webの基礎


よかったらシェアしてね!
  • URLをコピーしました!
目次