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

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テーマのインストール

アクティブにしましょう 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(アクティブ化が必要)が表示されています。 Continueをクリックすると、プラグインがインストールされます。 Nextend Social Loginは、インストールの途中でAjax errorメッセージが表示されたが、インストール後に見てみると、通常インストールされていますね。

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

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

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は、さまざまなショッピングモール関連のデモページを提供しています。

メモ:


4のコメント

  1. お願いちょっと申し上げますㅜㅜ
    Bluehostを利用して、 WordPress 使用中なのに。初心者です。
    テーマを適用してテーマ画像のままを適用した後、画像を一つ一つ変更したいのですが…
    テーマは適用されますが、画像はできません...解釈すると

    代替:ダウンロードしたテンプレートファイル(shoppingcart.zip)の圧縮を解除してください。 FTPを使用して、フォルダ全体(ショッピングカート)をサーバーにアップロードした後、 http://yourdomain.com/wp-content/themes/folder(shoppingcart에 保存します。 ディレクトリ名を変更しないでください。 したがって、テンプレートファイルは、今ここになければならない。 http://yourdomain.com/wp-content/themes/shoppingcart/index.php (例えば)
    - WP 管理パネルにログインし、[表示]-[テーマ]タブをクリックします。 次に、ショッピングカートのテーマをクリックして有効にします。
    - ショッピングカート機能を楽しみたい。 Dashboard -> シェイプ -> ShopingCart オプションに移動し、カスタマイズと再生
    - テーマは無料で提供されます。

    このように出てくる一体どうしろはかㅜㅜください詳細ちょっと教えてください。

    ポイントは! テーマを適用はしたがテーマのようなデモ画像がない出てき~~~
    https://demo.themefreesia.com/shoppingcart/
    このように出なければならいㅜㅜ

    ㅜㅜ良い日々なられ成功願います。

    1. こんにちは、イジェホン様。

      このテーマをインストールしてしばらくテストしてみました。

      テーマをインストールすると、次のような画面が表示されます。

      https://www.screencast.com/t/Fs8isjQ3UQC

      즉、 https://themefreesia.com/theme-freesia-demo-import/ ページのデモファイルをダウンロードしてインストールすることができます。

      デモファイルをダウンロードして解凍してみると、readme.txtファイルが中にいます。

        Theme フリーシアデモインポーター plugins to import theme demo data with just a single click

      Theme Freesia Demo Importrプラグインを使用してデモデータをインポート(インポート)できます。

      ちなみに質問を上げるとき、英語ディレクティブを英語のまま上げてください。 Googleの翻訳や自動翻訳で翻訳すると翻訳にエラーがあることができ、内容を把握することは容易ではないことがあります。

      テーマのインストールは、インストールファイルをダウンロードした後のテーマデザイン>テーマの下で、テーマファイルをアップロードすることができます(https://www.youtube.com/watch?time_continue=173&v=fSzeHOIOYHA を参照)。

      ######追加######

      Theme Freesia Demo importプラグイン WordPress ストアから削除されたようです。 このプラグインがないので、テーマの作成者に問い合わせてください。

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

    1. 2018年の最後の日ですね。

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

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

コメントを残す

*メールアドレスは公開されません。