この記事では、ワードプレスのテーマ「WING(AFFINGER5)」に、デザイン済みデータを反映させるための手順を詳しく解説しています。
デザイン済みデータとは、完成された素敵なデザインを初心者でも簡単に反映できる、アフィンガー専用のデータのこと。
デザイン済みデータの設定は慣れれば簡単なんですけど、はじめてだとつまづくこともあると思います。
今回は、はじめてでもわかるように、デザイン済みデータを反映させるための手順を書いていきます。
デザイン済みデータは全部で10種類
通常のアフィンガー5用







アフィンガー5EX用



今回は、超シンプルなサイトがつくりたかったので、「NOTE.2020」のデザインを反映させたいと思います。

デザイン済みデータの準備
デザイン済みデータをダウンロードする
まずは、下記URLからデザイン配布ページへ行きます。
⇒https://on-store.net/design-sample-affinger5/
利用規約の同意にチェックをいれ、「※承諾事項を了承の上、ダウンロードする」をクリック。ファイルを任意の場所にダウンロードします。

▼

ファイルは圧縮されているので、フォルダ内で解凍します。

※ZIPファイルの解凍方法についてはここでは書きません。わからない方は「ZIPファイル 解凍方法」でググってください。
インポート用プラグインのインストール
デザイン済みデータをインポートするために必要なプラグインは以下の3つです。
- 「カスタマイザー」:Customizer Export/Import(無料)
- 「ウィジェット」:Widget Importer & Exporter(無料)
- 「テーマ管理」:データ引継ぎプラグイン(有料)
「Customizer Export/Import」と 2Widget Importer & Exporter」は、事前にダウンロードする必要はありません(※WordPress内から簡単にインストールできます)。「データ引継ぎプラグイン」は、アフィンガー専用の有料プラグインです(購入、ダウンロードが必要です)。
プラグインのインストール手順
左メニューの、①「プラグイン」⇒ ②「新規追加」をクリック

右上のある検索窓に、プラグイン名を入力する。

①「Customizer Export/Import」と入力すると、プラグインが表示されるので、②「今すぐインストール」をクリック。

インストールが完了したら「有効化」をクリックし、プラグインを有効化する。

「Widget Importer & Exporter」も同じ手順で、「インストール」~「有効化」まで完了させます。

データ引継ぎプラグイン
データ引継ぎプラグインのみ有料(2,980 円)です。
※データ引継ぎプラグインを使用し、アフィンガーの管理設定を引き継ぐことで、デザイン済みデータをそのまま使うことができます。テーマ管理の設定はけっこうめんどくさいので、これから複数のサイトを展開していく予定なら買っておいたほうがいいです! 逆に「とりあえずじっくりテーマを弄りたい」という方は必要ありません。
データ引継ぎプラグインは「STINGER STORE」から購入できます。
インストールの手順
左メニューの「プラグイン」⇒「新規追加」をクリック。
「プラグインのアップロード」をクリック。

①「ファイルを選択」をクリックし、データ引継ぎプラグインのZIPファイル(st-migrator.zip)を選択。
②「今すぐインストール」をクリックする。

「プラグインを有効化」をすればインストール完了です。

デザイン済みデータのインポート手順
カスタマイザー用データをインポートする
外観をカスタマイズする設定のデータをインポートします。
基本エリア設定、メニューのカラー設定、各テキストとhタグ(見出し)、オプションカラー……など
左メニューの、「①:外観」⇒ 「②:カスタマイズ」をクリック。

左メニューの一番下にある「エクスポート / インポート」を開く。

「インポート」の下にある「ファイルを選択」をクリックし、デザイン済みデータを保存した場所を開く。

「カスタマイザー用」フォルダ内にある、①「.dat」ファイルを選択し、②「開く」をクリック。


「画像ファイルをダウンロードしてインポートしますか?」 にチェックを入れ、「インポート」をクリックすれば完了です。

※インポートに「失敗」したとき
デザイン済みデータを複数ダウンロードしていた場合、違うデザインのデータを間違ってインストールしてしまうことがあります。
そんなときは、以下の手順で引き継いだカスタマイザーのデータをリセットしましょう。
左メニューの「全体カラー設定」を開く。

一番下にある「リセット」をクリックすると、インポートに失敗したデザインデータがクリアされます。

ウィジェット用データをインポートする
ウィジェットの設定データをインポートします。
検索、管理者紹介、サイドバーメニュー、カテゴリー……など
左メニューの「ツール」⇒「Widget Importer & Exporter」をクリック。

ファイル(「ウィジェット用」のwieファイル)を選択し、「ウィジェットをインポート」をクリックする。

インポート結果が表示されればインポート完了です。

テーマ管理の設定をインポート
左メニューの「AFFINGER 管理」⇒「データの引継ぎ」をクリック。
※データ引継ぎプラグインをインストール ⇒ 有効化すると、「AFFINGER 管理」に「データの引継ぎ」が追加されています。

①「ファイルを選択」をクリックし、保存しているテーマ管理用データファイル(theme.json)を選択。
②「インポート」をクリックすれば完了です。

まとめ
僕はいつも、デザイン済みデータをベースにデザインを変更して、自分好みにしています。
そのほうがキレイにカスタマイズできるし、ムダな時間を短縮できるからです。
一からカスタマイズするのは楽しいんですけど、変に拘りだすとめちゃくちゃ時間がかかります。で、わけがわからなくなってくるんですよね……(^^;
僕の目的は、ワードプレスのテーマを弄りまくってデザインを追求することではないので、はじめからキレイなデザインを簡単に設定できるのは非常にありがたいです♪
AFFINGER5 のデザイン済みデータを利用する際は参考にしてください(*^^*)
アフィンガー5をまだ購入してない方はこちらからどうぞ。