WooCommerce用 WordPress テーマFlatsomeデモをインストールする

2

Flatsomeは WooCommerce用 WordPress テーマとして、現在週間販売ランキング5位を占めている人気のテーマの一つです。

WordPress Flatsomeテーマ

WordPressでショッピングモールを運営する場合、Flatsomeのような WooCommerce 専用のテーマを使用するか Avada, Enfold などの多目的テーマを使用することができます。

過去ブラックフライデー期間Flatsomeが35ドルの割引販売されてFlatsome、 Salient などいくつかのテーマを購入しました。 昨日Flatsomeを設置しました。

WordPress Flatsomeテーマのインストール

まず、Envato Marketからテーマのインストールファイルをダウンロードする必要があります。

WordPress テーマをダウンロード

Downloadページで、テーマの ダウンロード ドロップダウンメニューからダウンロードすることができます。 All files&documentationを選択すると、インストールファイルとマニュアル(documentation)を含め、すべてのファイルをダウンロードすることができます。 Installable WordPress file onlyを選択してダウンロードすると、インストールファイルのみをダウンロードします。 Flatsomeは、インストール手順の実行中チャイルドテーマ(子テーマ)をインストールするオプションがありますので、 Installable WordPress file onlyを選択してダウンロードしてもされます。

WordPress 管理者ページで ルックス>テーマ>新しく追加をクリックして、「テーマアップロード"ボタンをクリックして、ダウンロードしたテーマのインストールファイルをアップロードしてインストールします。

WordPress Flatsomeテーマのインストール

Welcome画面が表示されます。 インストールするために3〜5分と案内しています。 下段の 行こう!をクリックします。

WordPress Flatsomeテーマのインストール

Activate Theme(テーマ認証) ページが表示されます。 Purchase codeを入力すると、自動テーマの更新が可能でサポートを受けることができます。 私は一時的ドメインにインストールしたので、今はコードを登録せずに このステップを飛ばすを選択しました。 Avada などの一部のテーマの場合、ライセンス認証をしなければデモをインストールすることができませんが、Flatsomeはデモコンテンツのインストールが可能です。 ライセンス認証をするには、 "活性化します"をクリックします。

Flatsome WooCommerce用 WordPress テーマのインストール - チャイルドテーマ

第二段階としてチャイルドテーマ(子テーマ、サブテーマ)をインストールする画面が表示されます。 この手順は必須ではないので このステップを飛ばすを選択して、スキップすることもできます。 チャイルドテーマを作成するには Create and Use Child Themeをクリックします。

Flatsomeテーマをインストールする - 必要なプラグインのインストール

今基本プラグインをインストールする画面が表示されます。 次のようなプラグインがインストールされます。

  • お問い合わせフォーム7
  • Nextend Social Login
  • Unlimited Sidebars Woosidebars
  • WooCommerce(WooCommerce)
  • YITH WooCommerce Whishlist

上の画面では、Contact Form 7が既にインストールされているので Activation required(アクティブ化が必要)が表示されています。 持続するをクリックすると、プラグインがインストールされます。 Nextend Social Loginは、インストールの途中でAjax errorメッセージが表示されたが、インストール後に見てみると、通常インストールされていますね。

Flatsomeテーマのインストール - デモコンテンツのインストール

以下は、デモコンテンツをインストールする手順です。 インストールしたいデモコンテンツをチェックした後、 持続するをクリックします。

WordPress WooCommerce 専用のテーマ -  Flatsomeインストール

次のステップでは、ロゴを指定して、フロントページとして使用するデザインを選択します。 Select Presetで事前に作成されたページを前面ページに選択するようにします。 現在、全17のデザインが提供されます。

ちなみにデモページに画像は含まれていません。 デザインを選択して、実際のサイトを見ると、画像がない状態でサイトが表示されます。 ダミー画像は、実際の画像に置き換える必要があります。

Flatsomeテーマのインストール

Help and Supportページが表示されます。 その後、 Agree and Continueをクリックします。

Flatsomeテーマのインストール完了

これでインストールが完了しました。 Setup WooCommerceをクリックして、 WooCommerceを設定したり、 View your new websiteをクリックしてサイトを見ることができます。

Flatsomeテーマのインストール完了 - フロントページ

サイトを訪問すると、選択したフロントページが表示されます。 ただし、画像は含まれていないので、画像は表示されません。

FlatsomeはUX Builderというページビルダーが使用されます。

UX Builderページビルダー

UX Builderで編集をクリックしてページを編集することができます。

WordPress Flatsomeページビルダー

他のページビルダーとは少し違って感じられるが、慣れれば使い方は似ているようです。

Flatsomeページを編集する

新しいElementを追加するために、プラス(+)アイコンをクリックすると、上の図のように左にレイアウトやコンテンツを追加できるように表示されます。

WordPress 伝言板>設定>読むデモを変更することができます。

Flatsomeデモページを変更する

ホームページを表示>静的なページで、目的のデモを選択して、フロントページに設定します。

おわりに

以上で WordPress ショッピングモールに多く使用されている Flatsomeテーマのインストールプロセスを説明しました。

UX Builderというページビルダーを使用しているFlatsomeは WooCommerceに特化した多目的反応型 WooCommerce テーマ(Multi-Purpose Responsive WooCommerce Theme)です。 Avada など多目的テーマでもショッピングモール関連のデモを提供していますが、数が数個ませんが、Flatsomeは、さまざまなショッピングモール関連のデモページを提供しています。

メモ:

2のコメント

  1. 常に WordPressの良い情報よく見ていきます。
    現在、数時間さえあれば2018年過ぎて行きますね。来年もいつも元気でおられることすべてがうまく願います。
    新年あけましておめでとうございます。!

    • 2018年の最後の日ですね。

      一年よく仕上げし、新年には、計画しているすべてのことが達成されることを願っています。

      イカルス様も新年あけましておめでとうございます。

コメントを残す

あなたのコメントを入力してください!
あなたの名前をここに入力してください