当サイトはAFFINGER4を使っていましたが、AFFINGER5を手に入れてから、なかなかテーマ変更をせずに放置してきました。
変更作業ってめんどくさいうえに、デザインが壊れたり、それを修正するとなると結構なエネルギーが必要なんですよね。
しかも、うまくいかなくて修正に手間取ったりしたら、その間の運営に支障がでちゃいます。
できるだけ安全に新しいテーマの適用ができるように、今回当サイトで行った方法を紹介します。
AFFINGER5に限ったことではないので、別のテーマを使用している人にも参考になればと思います。
今回のテーマ変更作業のイメージ
テーマ変更の事前準備
当然ですが、事前に「AFFINGER5」を入手しておいてくださいね。
テスト環境にワードプレスを用意する
ここでいうテスト環境とは、どんな環境でも良いのでテーマ変更したいサイトとは別の場所にワードプレスをインストールしたサイトを用意することです。
テスト環境は、別のドメインを持っていれば、そのドメインでも良いし、レンタルサーバー会社から提供されているサブドメインでもかまいません。
より安全にテーマ変更したいなら、同じサーバー内にワードプレスの環境を用意するようにしましょう。
また、用意するワードプレスの環境はできれば、まっさらなきれいな状態がベストです。
プラグイン「All-in-One WP Migration」をインストール
データのバックアップや移行データの作成には、「All-in-One WP Migration」というプラグインを使います。
このプラグインは、ビックリするほど便利なもので、データベースを含むワードプレスの環境を丸ごと1ファイルにバックアップしてくれるプラグインです。
しかも、バックアップデータを作成するときに、文字列を置換した状態でデータを作成することができます。
これを利用すれば、URLの違う環境でも一瞬でデータを移すことができます。
例えば、今までサブドメインで運用していたブログを独自ドメインへ移し替えるということも簡単にできます。
単なるバックアップソフトとしても便利なので、かなりおすすめのプラグインです。
この「All-in-One WP Migration」を「テーマ変更元」と「テスト環境」のどちらのワードプレスにもインストールしておきます。
すべてのソフトウェアのバージョンを統一
予期しないトラブルにならないよう、「テーマ変更元」と「テスト環境」のワードプレスとAll-in-One WP Migrationのバージョンを最新のものにしておきましょう。
テーマ変更元サイトのバックアップと移行用データ作成
「ここからテーマ変更元での作業」
テーマ変更元サイトのバックアップ
作業前に、必ずテーマ変更元サイトのバックアップを取りましょう。
左メニューから[All-in-One WP Migration]-[エクスポート]をクリックし、バックアップ先として[ファイル]をクリックします。
All-in-One WP Migrationでは、クラウドサービス内への保存にも対応していますが、ここではローカルPCにデータを保存しています。
バックアップが完了したら、データをダウンロードして保存します。
これから、何度か[バックアップ⇒リストア]をするので、ダウンロードした拡張子「.wpress」のファイル名を必ずわかりやすい名前に変更しておいてください。
一時的にテスト環境に移すためのデータ作成
今回の作業ではURLの変更を伴う作業なので、ミスをしないようにURLを確認しておきましょう。
【テスト環境のURL】http://example.com/
バックアップ時と同じく、左メニューから[All-in-One WP Migration]-[エクスポート]をクリックします。
「検索<text>…」の部分をクリックして展開し、テーマ変更元URLをテスト環境URLへ置換するように指示します。
「/」などの入力ミスに注意してください。
バックアップ先として[ファイル]をクリックします。
バックアップが完了したら、データをダウンロードして保存します。
先ほどと同じく、必ずわかりやすい名前に変更しておいてください。
テスト環境の設定
「ここからテスト環境での作業」
テーマ変更元データのインポート
先ほど、URLを置換指示したバックアップデータをテスト環境にインポートします。
左メニューから[All-in-One WP Migration]-[インポート]をクリックします。続けて、インポートするデータをドラッグ＆ドロップします。
インポートが開始するので、正常に完了したら[CLOSE]をクリックします。
ワードプレスへの再ログイン
インポートが完了して、次の作業に入ろうとすると、再ログインを求められます。
このとき、テスト環境はテーマ変更元のクローンになっているので、ワードプレスへログインするにはテーマ変更元のアカウントでログインすることになります。
テスト環境の記事をノーインデックスに変更
一時的にですが、全く同じサイトができてしまうことになるので、重複コンテンツを避けるため、テスト環境では全てのページをノーインデックスに変更しておきます。
左メニューの[設定]-[表示設定]から[検索エンジンがサイトをインデックスしないようにする]にチェックを入れます。
AFFINGER5のインストール
AFFINGER5本体（変更したいテーマ）と関連するプラグインをインストールしていきます。
- AFFINGER5本体
- 子テーマ
- クレジット削除プラグイン
- テーマアップデーター
AFFINGER5に対応している最新のものを使用しましょう。 - すごいもくじ（初回特典プラグイン）
AFFINGER4利用時のものでも問題なく動作しました。最新のものがある場合はそちらをインストールします。
コンテンツの修正
CSSの移行
AFFINGER4からAFFINGER5への変更の場合、CSSのクラスは同じクラス名が使用されていることがほとんどなので、AFFINGER4のときのstyle.cssの内容を使うことができます。
しかし、AFFINGER4の子テーマのstyle.cssをそのまま上書きして使用はできません。
子テーマの最初にある画像の部分が親テーマを指定しています。
だから、AFFINGER4のstyle.cssをそのまま上書きはできないため、AFFINGER5の子テーマのstyle.cssの上の画像より下の部分に、AFFINGER4で使用していたCSSをコピーして保存します。
functions.phpの移行
functions.phpもstyle.cssと同じく、そのまま上書きするのではなく、AFFINGER4で使用していたコードを次の画像の内容の下にコピーして保存します。
オリジナルPHPファイルやJSファイルのコピー
変更前に使用していたオリジナルのPHPファイルとJSファイルはそのままコピーして使用します。
※ このとき、パスに変更がないように子テーマ内のフォルダ階層も同じようにしておく必要があります。
パーマリンク設定とキャッシュの削除
AFFINGER5管理画面でも案内のあるとおり、「キャッシュの削除」と「パーマリンクの更新」をしないとデザインが崩れてしまうことがあるようです。
作業方法は、キャッシュプラグインなどを使用している場合には、設定からキャッシュを削除します。
ブラウザキャッシュを利用している場合は、各ブラウザの操作方法に従ってキャッシュを削除してください。（chromeなら「Ctrl+F5」）
パーマリンクの更新は、パーマリンク設定から「更新」をクリックするだけです。
テーマカスタマイザー設定
「テーマカスタマイザー」や「AFFINGER5管理」から、あなたの気に入った見出しやロゴ画像などのカスタマイズを完成させてしまいましょう。
※ AFFINGER4からAFFINGER5への変更の場合、アナリティクスやサーチコンソールの設定やヘッダー部に記載したコードも引き継がれています。
逆に、tableタグのカラー設定などは引き継がれていませんでしたので、各設定を確認してみてください。
テーマ変更元へのリストア用データの作成
ここまでで、AFFINGER5（変更後テーマ）でのカスタマイズが完了してるかどうか、実際にブラウザからテスト環境サイトにアクセスして、表示や動作が正常なことを確認します。
思い通りのサイトになっていることが確認できれば、テーマ変更前の環境にリストアするためのデータを作成します。
左メニューから[All-in-One WP Migration]-[エクスポート]をクリックします。
「検索<text>…」の部分をクリックして展開し、テーマ変更元URLをテスト環境URLへ置換するように指示します。
「/」などの入力ミスに注意してください。
バックアップ先として[ファイル]をクリックします。
バックアップが完了したら、データをダウンロードして保存します。
必ずわかりやすい名前に変更しておいてください。
テーマ変更元の設定
「ここからテーマ変更元での作業」
テスト環境で作成したデータのインポート
先ほど、URLを置換指示したバックアップデータをテスト環境にインポートします。
左メニューから[All-in-One WP Migration]-[インポート]をクリックします。続けて、インポートするデータをドラッグ＆ドロップします。
インポートが開始するので、正常に完了したら[CLOSE]をクリックします。
ワードプレスへの再ログイン
インポートが完了して、次の作業に入ろうとすると、再ログインを求められます。
このとき、テスト環境はテーマ変更元のクローンになっているので、ワードプレスへログインするにはテーマ変更元のアカウントでログインすることになります。
ノーインデックス設定を解除する
テーマ変更元の環境で正しく動作することが確認できれば、最後にノーインデックス設定されているのを解除します。
左メニューの[設定]-[表示設定]から[検索エンジンがサイトをインデックスしないようにする]にチェックをはずします。
これでAFFINGER5へのテーマ変更作業は完了です。
既存サイトのAFFINGER5への安全な移行手順まとめ
簡単だと言いながら、書いてみるとややこしくなってしまいました。
でも、実際にやっていることのイメージが掴んでいただければ、難しい作業はないはずです。
既存のサイトのテーマを変更するとき、どうしてもデザインや独自のカスタマイズ部分を修正する作業が発生します。
その間、既存サイトをメンテナンス状態にして作業すると、メンテナンス時間が長時間になってしまったり、本番データを直接さわることへのリスクがあります。
今回紹介した方法なら、既存のサイトへの影響を最小限にして、安全にテーマを変更することができるはずです。
AFFINGER5は本当によくできたワードプレステーマです。
是非試してみてください。