【Genesis Framework】自サイトをデモサイトと同じデザインにする方法

Genesisフレームワークにはたくさんの子テーマ存在します。

子テーマを使ったデモサイトを見るとどれもデザイン性に優れていますが、子テーマをアップロードしただけの初期状態では同じような見た目にはなりません。

本記事では自分のサイトをデモページのようなサイトデザインにカスタマイズする方法について記します。

デモサイトと同じデザインにする方法

1.デモコンテンツのインポート

デモコンテンツとは、デモページにサンプルとして表示されている記事やコメントなどの内容を指します。

すでに自分のサイトコンテンツを作成している（記事内容を執筆済みなど）場合は、デモコンテンツのインポートは不要です。

不要なサンプル記事が追加されて見づらくなるため、この項目はスキップして次項を実施してください。

  1. ダッシュボードから「ツール」→「インポート」→「WordPress」に移動
  2. WordPress Importerプラグインをインストールする。
  3. ダウンロードしてあるテーマファイルから○○○.xmlという名前のXML文書（例：brunch_demo.xml）を見つけておく
  4. プラグイン「WordPress インポートツール」を実行
  5. 「ファイルを選択」から○○○.xmlを選び、「ファイルをアップロードしてインポート」する
  6. ドロップダウンメニューから自分を選択して「インポートする投稿者」に割り当てる
  7. 「添付ファイルのダウンロードとインポート」にチェックして実行
  8. 無事実行されたら「WordPressインポーター」は不要になるので削除しておく
WordPress Importerプラグインのインストール
WordPress Importerプラグインのインストール
xmlファイルの例

2．テーマのウィジェットをインポートする

これを行うことで、一瞬でデモページのようなサイトデザインにすることができます。自動で全部のウィジェットやプラグインを、デモページと同じ領域に配置してくれます。

ウィジェットをインポートする前に、必要なプラグインがすべて揃っていることを確認しておきましょう。

例えば、brunch proでは以下のプラグインが必要でした。
子テーマの販売元のサイトに必要なプラグインの一覧があるはずです。

プラグイン機能
Widget Importer and Exporter： ウィジェットのインポートしてくれる
Genesis Enews Extended ：メルマガ配信登録のためのフォーム
Simple Social Icons ：自分のSNSプロフィールへのリンク
Genesis Simple Share ：SNSシェアボタン
WP Instagram Widget ：Instagramをウィジェットに表示
Yoast SEO Plugin：SEO用プラグイン。個人ブログには不要かも
ShortPixel image optimizer：画像最適化。EWWW Image Optimizerと違いサーバーに負担をかけない。
Regenerate Thumbnails ：サムネ用のサイズの画像を自動生成

プラグインが揃ったら「Widget Importer & Exporter」をダウンロードし、以下の手順でウィジェットをインポートします。

  1. 「ツール」→「Widget Importer & Exporter」
  2. 「ファイルの選択」から○○〇.wieファイルを選ぶ（例：brunch_widgets.wie）
  3. 「ウィジェットのインポート」→「表示」→「ウィジェット」で自分の情報ですべてのウィジェットを更新する
  4. 完了後は「Widget ImporterとExporter」を削除する
wieファイルの例

以上でデモサイトのデザインが自分のサイトに適用されているはずです。

ブログ運営,WordpressGenesis framework,カスタマイズ