ブログ

旧WordPressテーマ(COLORS)からAffinger5に変更するまでの手順まとめ

2021年7月6日

AyumuMichino

2021年から、当ブログのテーマをAffiner5に変更しました。

※2021年7月以降、Affinger6が正式リリースされ、旧バージョンの5は販売停止となりました。

管理人

Affinger6でも作業の流れに変わりはありません。

最初に利用したDigiPressさんテーマ「COLORS」から5年ほど経っての変更です。
作業する前から何となく「大変だよなー……」と想像してはいましたが、想像以上に大変でした。

これからまとめる手順では、WordPressのバックアップ・復元プラグインとローカルのWordPress環境を使って、手作業をなるべく少なくすることを目標にしています。

テーマ移行までの簡単な流れ

スポンサーリンク
  1. 本番環境のデータベースのバックアップを取る
  2. ローカル環境でメニュー・ウィジェット・カスタマイザーのバックアップを取る
  3. 必要プラグインをインストール
  4. テーマをインストール
  5. 3つのバックアップから復元・調節
  6. Affinger5設定を、ローカルブログを見ながら手動で復元

事前準備

ローカル環境(使用しているPC)にWordPressを構築して、本番環境のつもりでデザインなどの設定をしておきましょう。

カスタマイザーやウィジェットなどの設定をバックアップして、本番環境に復元させるために必要となります。

バックアップを取るデータは、主に以下の3つです。

  • ウィジェット
  • カスタマイザー
  • メニュー
管理人

メニューについては、補足事項があります。

手動で設定してももちろんOKですが、特にカスタマイザーは設定項目がたくさんあるので、「うわあああぁぁあ!(発狂)」という気持ちになること請け合いです←

PCにWordPress構築なんて難しそう……と思うかもしれませんが大丈夫、とっても簡単です。

関連記事
WindowsでもMacでもできる!WordPress運営するならローカル環境は絶対あった方がいいよ

続きを見る

メニューのバックアップ・復元についての補足

結論を書くと、テーマの移行前と移行後で大きな変更がなければ、手動で作業をした方がいいです。

これから紹介する方法で、メニューのバックアップ・復元を行う場合、復元の際に注意する点が2つあります。

  1. ナビゲーションラベルに設定しているHTMLタグはすべて消える
  2. 復元は「上書き保存」ではなく「追記」のような状態になる

ナビゲーションラベルに設定しているHTMLタグはすべて消える

当サイトでは、こんな風に設定しているメニューがいくつもありますが……

復元するとこの通り。
こうなると結局手動で設定し直さないといけないので、逆に面倒かもしれません😅
※下のタグありメニューは、比較のために敢えて残しています。

復元は「上書き保存」ではなく「追記」のような状態になる

すでに設定しているメニューと復元したメニューが混在してしまうということです。

これが復元を実行する前のメニューです。

復元を実行した後です。見事に共存していますw
復元前に、元からあるメニューを一旦すべて削除すれば大丈夫です。

1)本番環境のデータベースのバックアップを取る

エラーが出て直せないなどの問題があった時、作業前の状態に戻すために必要です。
私は、プラグインのUpdraftPlusを使いました。

手順については、以下の記事をご覧ください。
全く同じ流れで作業をしています。

参考リンク:本番環境のデータベースやファイルのバックアップ(WindowsでもMacでもできる!WordPress運営するならローカル環境は絶対あった方がいいよ)

2)ローカル環境のウィジェット、カスタマイザー、メニューのバックアップを取る

プラグインを使ってバックアップを取ります。

ウィジェットのバックアップ

Widget Importer & Exporterプラグインを使います。

ウィジェットページに行くと、右上にインポート/エクスポートボタンが増えていますのでそれをクリックします。

次のページでウィジェットのエクスポートボタンをクリックします。
.wie形式のファイルで保存されます。

カスタマイザーのバックアップ

Customizer Export/Importプラグインを使います。

外観カスタマイズページに行き、左メニューの一番下にあるエクスポート / インポートをクリックします。

次のページで書き出しボタンをクリックします。
.dat形式のファイルで保存されます。

追加CSSは、手動でバックアップを取っておくことをおすすめします。
プラグインでは復元できない可能性があります。

メニューのバックアップ

WPS Menu Exporterプラグインを使います。

エクスポートページに行くと、「エクスポートする内容を選択」項目内にナビゲーションメニューの項目が追加されています。
これを選択して、エクスポートファイルをダウンロードボタンをクリックします。

.xml形式のファイルで保存されます。

3)必要プラグインとAffinger5を本番環境にインストール&有効化

プラグインは、上で紹介した3つのバックアップ・復元プラグインのうち、WPS Menu Exporterプラグイン(メニューのバックアッププラグイン)以外を本番環境にインストールします。
メニューの復元は、WordPress標準のインポート機能を使うためです。

4)バックアップから復元する

スポンサーリンク

ウィジェットのインポート

作業前の注意

すでに設定しているウィジェットは復元後も残るので、一旦まっさらな状態にしてから作業する方がいいと思います。

ウィジェットのインポートと同様に、インポート/エクスポートページに移動します。

.wieファイルを選択して、ウィジェットをインポートボタンをクリックします。

もしインポートに失敗する場合は、以下の方法を試してみてください。

  1. copy and pasteテキストをクリック
  2. 出てきたフォームに、.wieファイルの中身を直接コピペして、ウィジェットをインポートボタンをクリック

.wieファイルは、メモ帳などのテキストエディタで普通に開けます。

カスタマイザーのインポート

カスタマイザーのインポートと同様に、エクスポート / インポートをクリックします。

.datファイルを選択して、インポートボタンをクリックします。

ポイント

画像ファイルをダウンロードしてインポートしますか? についてですが、おそらく、カスタマイザーで設定できるヘッダー画像などを指していると思います。

ですが、バックアップ元がローカル環境なので、チェックを入れても意味がありません。1

残念ですが、手動で設定しましょう。

メニューのインポート

ツールのインポートインポーターの実行とすすみます。

.xmlファイルを選択して、ファイルをアップロードしてインポートボタンをクリックします。

5)Affinger5設定を手動で復元

公式で、有料のデータ引き継ぎプラグインというものがあります。

これを使わず、ローカル環境のAffinger設定画面を見ながらひとつひとつ復元していく、というだけです😅
ものすごく原始的ですが、一言一句違わず復元できるというメリットがあります。無理やりですがw

スポンサーリンク

まとめ

制作元の異なるテーマへの移行というのは、作業前でも大変さはある程度想像していましたが、やっぱり大変でした😅

でも、カスタマイザーやウィジェットなどのバックアップ・復元ツールを知れたのはかなり大きいです。
特にカスタマイザーはほんと、設定が多岐に渡りすぎていますから。。

この記事ではAffinger5に限定していますが、他テーマに移行する際でも使える方法だと思いますので、少しでも参考になれば幸いです😊

  1. 実際に試してみましたが、インポートされていませんでした

-ブログ
-