2023年12月にデザインカードプラグインを利用して簡単にサイトデザインを変更することができるようになりました。
デザインカードの種類は公式サイトから確認できます。
→ AFFINGER6公式サイト（デザインカードサンプルページ）
AFFINGER６でデザイン変更するには既に「デザイン済みデータ（テンプレート）」を利用する方法がありました。
「デザイン済みデータ」を利用するには少し手間がかかります。
それに比べてデザインカードプラグインを利用すると簡単にデザイン変更を行うことができます。
「デザイン済みデータ」の設定方法に関しては別記事で詳しく解説していますので、そちらを参考にしてみてください。
この記事では実際にデザインカードプラグインを利用してみて、設定する方法を初心者向けに詳しく解説しています。
デザインカードプラグインを利用に関しては公式サイトの注意事項を確認の上ご利用ください。
デザインカードプラグインを利用に伴う如何なる不具合に対して当サイトは一切責任を負うことはできませんので、予めご了承ください。
デザインカードプラグイン利用前の準備
まず、デザインカードプラグインを利用するには以下のバージョン以上の環境が必要になります。
必要に応じてアップデートをしてください。
- WordPress6.4.1 / PHP 7.4
- AFFINGER ver20231203
- Gutenbergプラグイン ver2.7.2
サイトのバックアップを取る
ここで言うバックアップとは次の３つの設定のバックアップを取るということです。
- カスタマイザー
- ウィジェット
- AFFINGER管理
AFFINGER６ではこの３つの設定項目によってサイトデザインを構成しています。
デザインカードプラグインを利用するとその設定が上書きされるので、バックアップを取っておかないと元に戻せないわけです。
デザインカードプラグインをサイト作成の初期段階で利用するのなら問題ないですが、ある程度カスタマイズしていた方はバックアップは取っておいた方がいいです。
バックアップを取る方法を詳しく説明しますが、初期段階でバックアップを取る必要のない方は飛ばして読んで頂いて問題ありません。
カスタマイザーのバックアップ
下画像の「カスタマイズ」のデータをバックアップする為に「Customizer Export/Import」というプラグインをインストールします。
① 「Customizer Export/Import」をインストールする
「プラグイン」→「新規追加」から検索欄に「Customizer Export/Import」と入力して検索します。
「Customizer Export/Import」が表示されたら「今すぐインストール」をクリックし、続いて「有効化」をしておきます。
② カスタマイザーのバックアップをする
「Customizer Export/Import」を有効化するとカスタマイズ画面に「エクスポート/インポート」の項目が追加されます。
「エクスポート/インポート」項目の「書き出し」をクリックするとカスタマイザーの設定を保存（バックアップ）することができます。
ウィジェットのバックアップ
下画像の「ウィジェット」のデータをバックアップする為に「Widget Importer & Exporter」というプラグインをインストールします。
① 「Widget Importer & Exporter」をインストールする
「プラグイン」→「新規追加」から検索欄に「Widget Importer & Exporter」と入力して検索します。
「Widget Importer & Exporter」が表示されたら「今すぐインストール」をクリックし、続いて「有効化」をしておきます。
② ウィジェットの設定をバックアップする
「Widget Importer & Exporter」を有効後、ウィジェット画面に「インポート/エクスポート」が表示されます。
「ウィジェットのエクスポート」をクリックするとウィジェットの設定を保存（バックアップ）することができます。
AFFINGER管理のバックアップ
下画像の「AFFINGER管理」のデータをバックアップする為に「データ引継ぎプラグイン」をインストールします。
① 「データ引継ぎプラグイン」のインストール方法
「データ引継ぎプラグイン」は困ったことに無料のプラグインではなく「有料」のプラグインになります。
AFFINGERの公式サイトにて購入することができます。
| データ引継ぎプラグイン | 価格：２，９８０円（税込み） |
AFFINGER６EX（アップグレード版）を購入すると特典として「データ引継ぎプラグイン」が付いてきますので、AFFINGER６EX（アップグレード版）なら使用できるテンプレートも増えますし、この機会にAFFINGER６EX（アップグレード版）を購入するのもお勧めです。
| AFFINGER６EX（アップグレード版） | 価格：１２，０００円（税込み） |
「データ引継ぎプラグイン」「AFFINGER６EX（アップグレード版）」も公式サイトから購入可能です。
購入についての詳細はAFFINGER6（公式サイト）から確認をお願いします。
「データ引継ぎプラグイン」購入後にWordPressにインストールする手順は、「プラグイン」→「新規追加」→「プラグインのアップロード」で購入した「データ引継ぎプラグイン」の圧縮フォルダを選択すればOKです。
購入した「データ引継ぎプラグイン」の圧縮フォルダは解凍しないようにしてください。
「データ引継ぎプラグイン」のインストールが完了したら「有効化」しておきます。
「データ引継ぎプラグイン」を利用しなくてもAFFINGER管理の設定項目を手動で設定することは可能ですが、初心者の方には少しハードルが高いかもしれません。
初心者の方は「データ引継ぎプラグイン」を購入するか、バックアップを必要としないサイト作成の初期段階でデザインカードプラグインの利用をお勧めします。
② AFFINGER管理の設定をバックアップする
「データ引継ぎプラグイン」を有効化するとAFFINGER管理メニューに「データの引き継ぎ」項目が追加されます。
「データの引き継ぎ」画面の「エクスポート」をクリックするとAFFINGER管理の設定を保存（バックアップ）することができます。
デザインカードプラグインでデザイン変更する方法
- デザインカードプラグインをダウロードする
- デザインカードプラグインを有効化する
- ボタンひとつでデザイン変更
① デザインカードプラグインをダウロードする
公式ページからデザインカードプラグインのダウンロードページを開きます。
※ ダウロードページはAFFINGER6購入した方のみが閲覧可能です。
ダウロードページからセットしたいデザインカードをダウンロードします。
② デザインカードプラグインを有効化する
デザインカードプラグインをダウンロードすると圧縮フォルダが保存されます。
こんな感じの圧縮フォルダです。
圧縮フォルダは解凍しないようにしてください。
プラグインのアップロード画面からデザインカードプラグインの圧縮フォルダをインストールします。
インストールが完了したら「プラグインを有効化」をクリックして有効化します。
③ ボタンひとつでデザイン変更
デザインカードを有効化するとメニューに「AFFINGERデザインカード」の項目が追加されます。
「AFFINGERデザインカード」の「デザインをセットする」をクリックすればデザイン変更は完了です。
以上がデザインカードでサイトデザインを変更する方法になります。
デザインをセット後に設定を元に戻すことができませんので、必要に応じてバックアップを取るようにしてください。
その他、デザインカードプラグインに関しては公式サイトの注意事項をよく確認して利用するようにしてください。