WooCommerce、Divi、SiteGroundで素晴らしいオンラインショップを作成する方法(2020年XNUMX月)

74万以上のサイトが、ブログをホストしたり、製品を販売したり、世界中の人々に毎日の感動を書き込んだりするためにWordPressプラットフォームに依存しています。 あなたがあなたの構築を始めるとき eコマースウェブサイト あなたには確かに多くの選択肢があり、WordPressはこれに結びついています。

際立っているのはどれですか eコマースプラットフォーム 選びますか あなたの製品を販売するためにテーマをつかむつもりですか、それともゼロからサイトを構築するためにあなたが支払うことができる誰かがいますか? 一体、あなたはあなたのeコマースWebサイトを通じて何を販売することを計画していますか?

編集者注:この投稿は15年2015月XNUMX日に最初に公開され、正確性と包括性のために完全に改訂および更新されています。

オンライン販売を開始するためのフロントエンドとバックエンドの構造を探すときに、数千から数百万のWordPressテーマから選択できます。 ホスティングとほぼ同じです(ただし、 Sitegroundは or お申し込み).

最高のテーマには、迅速で簡単なeコマース管理ツールが含まれているため、商品をアップロードして、割引、特典、ボタン、商品ページなどを管理できます。 あなたのテーマは、人々があなたのサイトを訪れたときに最初に目にするものでもあります。 それは彼らをプロセスを通して導き、誰かが経験に満足しているかどうかの違いを本当に伝えます。

要するに、WordPressテーマは重要であり、 ディビ エレガントなテーマのWordPressテーマ あなたが考えるにはかなり見栄えの良いオプションです。 標準のビジネスWebサイトに使用できますが、eコマース販売と高速販売プロセスの統合も含まれます。 Divi WordPressテーマでオンラインショップを作成する方法を学びましょう。

最初にドメインとホスティングを取得する

💡ウェブサイト作成プロセスの最初のステップは、ホスティングアカウント、ドメイン名を取得し、サイトにWordPressをインストールすることです。 ディビ 違いはありません。 ホスティングとドメイン名を取得する方法はたくさんありますが、個人的にはSiteGroundが最も安全で信頼できるオプションのXNUMXつだと思います。 (詳細については、 SiteGroundレビュー).

本当にクールなのは、SiteGroundが特別な マネージドWooCommerceホスティング オンライン販売を開始するために必要なほとんどすべてのサービスパッケージ。 パッケージ内では、 スタートアッププラン 初心者向け、 GrowBigプラン ビジネスを成長させるため、または GoGeek 確立されたWooCommerceストア用。

これらはいずれも、リーズナブルな価格でWooCommerceサイトを最適化するための高度な機能を提供します。

とはいえ、Divi WooCommerceストアに強くお勧めする別のホスティングサービスは、 お申し込み。 ここの機能はSiteGroundの機能と一致しませんが、WordPress eコマースパッケージを介してWooCommerceに重点を置いたホスティングを利用できます。 プランはDivi WooCommerceストアを快適に処理できますが、残念ながら、マネージドサービスを利用できません。

👉 では、わかりやすくするために、SiteGroundに進みましょう。

どのように始めますか?

に行きます SiteGroundマネージドWooCommerceホスティング ページで理想的なプランを選択し、 計画を取得します。

私の意見では、 GoGeekプラン 高度なeコマース機能を備えた無制限のWooCommerce Webサイトをサポートするため、最も適切なオプションのようです。 より強力なサーバー機能の他に、優先サポート、WordPressステージング、オンデマンドバックアップ、スーパーチャッチャーリソース、さらには無料のサイト転送やCloudflare CDNなど、充実した機能を利用できます。

👉 また、リソースの許容量に関する限り、この計画は以下に対応します。

  • 6 GBのメールボックス
  • 1 GBデータベースストレージ
  • SSDストレージ
  • 従量制データ転送
  • 30GBのストレージスペース
  • 毎月最大100,000回の訪問

心に留めておきます このサービスは月額$ 11.95から始まります、そしてそれはBlueHostホスティングアカウントに通常のWordPressサイトをインストールする方法と非常に似ています。

ただし、これは初心者には特別価格です。 今後の更新で34.95ドルに増えると予想されます。これは、長期にわたって得られるすべての機能を検討する場合でも、妥当な料金です。

ここで、ご希望のプランを選択したら、 Sitegroundは ドメイン登録ページに移動します。 ドメインを既に所有している場合は、15.95番目のオプションを選択し、その詳細を入力します。 それ以外の場合は、年間$ XNUMXで新しいドメイン名の登録を続行します。

次は、アカウントを作成する前に、希望のホスティングオプションを選択し、支払い情報と個人情報を入力する最終段階です。

もちろん、これらは以前に何度も扱ってきた基本的なものです。 したがって、電話番号、国、名前、電子メール、アカウントパスワードなどの入力に問題はありません。

支払い部分では、クレジットカードの詳細を入力する必要があります。 どちらでも続行できます 発見、マスターカード or ビザ

しかし、興味深いことに、 Sitegroundは WooCommerceの販売者の間で人気が高まっているにもかかわらず、PayPalはリストされていません。 しかし、ありがたいことに、間接的にではあるが、PayPalによる支払いを受け入れることができることが判明した。

したがって、これが優先モードである場合は、フィールドを空白のままにして、ライブチャットツールを介してSiteGroundの販売代理店に連絡してください。 PayPalを通じてプロセスを完了するのに役立ちます。

最後のセクションには、希望するデータセンターの場所やサブスクリプション期間など、ホスティングサービスのいくつかのオプションが含まれています。

ここで、SitegroundのサーバーとWooCommerceサイトのビジター間のデータ転送距離を最小化するために、ターゲット市場エリアに最も近いデータセンターの場所を選択します。

次に、パッケージに含めたい追加のアドオンサービスを選択します。 これで、Sitegroundアカウントを設定できます。

完了したら、アカウントにログインし、cPanelエリアに直接移動します。 デフォルトのWordPress自動インストーラーがあります。 したがって、それを選択し、WordPressログインの詳細を入力して、インストールボタンをクリックします。

ええと、WordPressのインストールプロセスはすべて自動化されているため、数秒かかることがわかります。 そして、すべてが設定された後、SiteGroundは、サイトのバックエンドで何かを変更したい場合にアクセスするための適切なドメイン名を提供します。

Diviでオンラインショップを作成する

ディビとは?

わかりました。まだ試していない場合は、すでに聞いたことがあると思います。 ディビ 通常のWooCommerceテーマではありません。 実際、エレガントなテーマで最も人気のあるWordPressテーマのXNUMXつです。 そして興味深いことに、Diviは エレガントなテーマの主力製品。

では、このテーマの何が特別なのでしょうか? そして、DiviのWooCommerceについて何か優れた点はありますか?

まあ、典型的なWordPressテーマとは異なり、Diviはより包括的なパックです。 つまり、標準のテーマ機能と、Divi WooCommerceストアに役立つ追加の機能が組み合わされています。

ディビとは

誤解しないでください。 ここではDiviのWooCommerceサポートが主な焦点ですが、テーマにはそれ以上の機能があります。 本質的に、Diviは幅広いウェブサイトレイアウトのおかげで、あらゆるタイプのサイトとシームレスに統合できます。 eコマースだけではありません。

さらに、Diviには独自の直感的なWordPressページビルダープラグインが付属しています。 これを使用して、コーディングを一切せずにDivi WooCommerceストアを自由にカスタマイズできます。

実際、Diviは初心者向けに開発されました。 したがって、学習曲線がほとんどない、きちんとしたコントロールパネルが見つかるはずです。 Diviエコシステム全体のコツをつかみ、セットアップし、DiviのWooCommerceレイアウトをカスタマイズするには、ほんの数分しかかかりません。

👉 したがって、最終的には、 ディビ年代:

  • WooCommerceオンラインストアを含む、あらゆるタイプのWordPress Webサイト用のカスタマイズ可能なレイアウトの配列。
  • 使いやすいページビルダー。多数のWebサイト要素とデザイン機能を提供します。
  • コーディングなしの柔軟なカスタマイズプロセス。 初心者でも、完全に機能するDivi WooCommerceストアを快適にセットアップして調整できます。
  • 簡単なWordPress統合。 Diviは、複雑な調整をせずにシームレスにインストールできる数少ない外部WordPressテーマのXNUMXつです。
  • eコマース用に最適化されたWooCommerceテンプレート。

Diviドラッグアンドドロップページビルダー

前述のように、DiviにはXNUMXつの異なるフレーバーがあります。 メンバーシップの支払い時に エレガントなテーマ、 ダッシュボードには標準のDiviテーマがあり、それにはDivi WordPress Page Builderプラグインが付属しています。

ただし、このビルダーはDiviテーマに排他的に関連付けられているわけではないことに注意してください。 それはエレガントなテーマから取得したすべての単一のテーマへの追加のプラグインとして付属しています。

つまり、Divi WordPress Page Builderは、高度なカスタマイズ機能を備えたドラッグアンドドロップエディターです。 コーディングの経験がなくても、要素、列、行、およびモジュールを移動および定義できます。 言い換えれば、それはビルダーのタイプです WooCommerce 初心者は手に入れたいと思います。

ディビ設定

しかし、間違いはありません。 Divi Page Builderは初心者を対象としていますが、経験豊富な開発者を支援するエディターでもあります。 彼らは体系的にその視覚機能をCSSコントロールと組み合わせて、Divi WooCommerce Webサイトを次のレベルに押し上げることができます。

しかし、考えてみてください Divi WooCommerceストアのすべての要素を設計する開発者は必要ありません。 視覚機能だけに頼ることができます。

そして、あなたは何を知っていますか?

ディビ レイアウトモジュールにラベルを付けて色分けすることで、プロセス全体をはるかに簡単にしようとさえしています。

そういえば、ここで注目すべきもうXNUMXつの点は、レイアウトのカスタマイズプロセスのDiviの全体的な簡素化です。 たとえば、新しいセクションを導入したい場合は、シングルクリックで実行できます。 その後、Divi WooCommerceストアのモジュールを複製、削除、および挿入すると、ボタンを数回クリックするだけで済みます。

その間、ディビの編集ウィンドウはあなたのサイトのレイアウト変更をリアルタイムで表示します。 すべての調整を視覚的に追跡し、それがDivi WooCommerceストアの全体的なOutlookデザインにどのように影響するかを確認できます。

事前設計されたDivi WooCommerceウェブサイトのレイアウト

Webサイトを最初から作成するという面倒な要求の多いプロセスからユーザーを救うために、Divi WordPressテーマには、事前に設計された多数のサイトテンプレートが付属しています。 また、同じテンプレートの異なるレイアウトオプションが必要になる場合があるため、DiviはWebサイトデザインを包括的なパックとして提供しています。 その結果、さまざまなテンプレートのレイアウトと色が得られます。

より正確に言うと、Diviはすべての単一のWebサイトパックに約7〜8種類の事前設計されたレイアウトを提供します。 それぞれが完全に構築されていることを考えると、基本的な構造を大幅に作り直すことなく、レイアウトを簡単に採用できます。 あちこちでほんの数個の微調整をします。

diviウェブサイトのレイアウト

WooCommerceオンラインストアに最適なものを見つけるには、Diviテーマのさまざまなサイトカテゴリをスクロールしてください。 または、キーワードを使用して、すべてのオプションを一度に検索します。

まあ、全体として、適切なものを特定するのに時間がかかりません ディビ オンラインストアのレイアウト。 WooCommerceと統合するだけで、魅力的なWordPress eコマースサイトをセットアップできます。

次に進むと、あなたが気づくであろう特に優れた点のXNUMXつは、Diviが見た目だけに焦点を合わせていないことです。 Diviテーマに付属するWooCommerceレイアウトも、機能性を考慮して構築されています。

したがって、チェックアウト、製品、カートなどの一般的なストアページに加えて、Diviにはデフォルトでeコマースモジュールが含まれています。 具体的には、おすすめの商品、セール商品などのセクションが表示されます。

DiviはWooCommerceに適していますか?

すべてを考慮すると、Diviは基本的にオールインワンのWordPressテーマソリューションであるため、ますます人気が高まっています。

組み合わせて、Divi Page Builderと ディヴィテーマ オファリングは、あらゆるタイプのWordPressサイトをセットアップするために必要なほとんどすべてのものを提供します。 これには、すべてのコアeコマース機能を備えた、完全に機能するWooCommerceストアが含まれます。

👉 簡単に言うと、DiviはWooCommerceサイトで検討する価値のあるオプションです。

  • ドラッグアンドドロップのビジュアルエディターを使用して、WooCommerce Webサイトをカスタマイズできます。
  • Diviを使用すると、微調整をすべてのレイアウトのグローバル要素として保存できます。
  • それは20以上のよく設計されたビルド済みのウェブサイトレイアウトが付属しています。
  • レイアウトを簡単にエクスポートして、他のWebサイトで活用できます。
  • 複数の列、行、およびコンテンツ要素を使用してWooCommerceストアを設計できます。
  • すべてのWooCommerceレイアウトはモバイルデバイス向けに最適化されています。
  • と同じように マイクロソフトワード、 テキストコンテンツの編集は、クリックして入力するのと同じくらい簡単です。
  • サイトのカスタマイズプロセス全体がリアルタイムで追跡されるため、すべての設計変更のライブプレビューが提供されます。
  • WooCommerceレイアウトには、主要なオンラインストアページとモジュールが付属しています。

ステップ1:Diviにアクセスするためのエレガントなテーマでサインアップする

まずは エレガントテーマの製品ページ Divi WordPressテーマ用。 このページには、テーマのデモとクイックダウンロードボタンのオプションがあります。 エレガントテーマは、年間またはXNUMX回限りの支払い構造を使用してテーマを販売します。これは、複数のクライアントサイトを持つ開発者や、多数のeコマースWebサイトを運営している人々に最適です。 テーマをXNUMXつだけ購入することはできませんが、 個人プラン 年間67ドルは通常のテーマに支払う金額と同じです。サポートが不要になった場合は、毎年の支払いを停止できます。 支払いに取り掛かる前に、自由にテーマをいじってみてください。

Divi WordPressテーマ

ステップ2:WordPressサイトにDiviをインストールする

サインアップしたら、テーマのダウンロードボタンをクリックします。 これにより、テーマがコンピューター上のzipファイルとして配置されます。 WordPressサイトのバックエンドの[外観]タブに移動し、[テーマ]オプションをクリックします。

ワードプレスの新しいテーマ

ステップ3:[新規追加]ボタンをクリックします

Wordpressが新しいテーマを追加

[テーマのアップロード]ボタンをクリックします。 テーマのzipファイルを見つけてアップロードします。 プロセスを実行してテーマを完全にアクティブ化すると、サイトのフロントエンドでテーマを確認できるようになります。

Wordpressテーマのアップロード

ステップ4:WooCommerceストアをセットアップする

あなたが Diviテーマのドキュメントページ テーマで使用できるほぼすべてのツールと機能が見つかりますが、ここでは主にeコマースWebサイトの設定に焦点を当てます。 ディビのテーマ WooCommerceと完全に互換性があるため、そこからすべての製品を表示できます。

すばらしいのは、最初のSiteGroundサインアップにより、WordPress WebサイトにWooCommerceがすでにインストールされているため、インストールや設定について心配する必要がないことです。 ダッシュボードですでに利用可能になっているはずです。

ステップ5:WooCommerceに最初の製品を追加する

技術的にはすでにeコマースサイトがすべて設定されていますが、実際にいくつかの製品を追加して、フロントエンドのeコマースサイトのように見せたいと考えています。 WordPressダッシュボードに移動し、「製品」タブをクリックします WooCommerce Add Productアイテムをクリックします。

WooCommerceが新製品を追加

ステップ6

これはあなたが記入するための新しい製品ページを表示します。 ワードプレスのページエディターと非常によく似ていますが、製品名、説明、注目画像を追加できるので、Webサイトで製品がどのように表示されるかを確認できます。

eコマースで新しい商品フィールドを追加する

ステップ7:WooCommerce機能を探索する

説明領域の下までスクロールすると、WooCommerceのあらゆる機能が見つかります。 SKU番号、在庫、価格、配送、属性などを自由に変更してください。 機能が広すぎるため、ここですべてを説明することはできませんが、 WooCommerceドキュメントページ eコマースサイトで設定できるすべてのことを理解する。

WooCommerceの機能

ステップ8:ホームページを作成する

これの要点は ホームページを作成する または、人々があなたのサイトに現れたときにあなたのすべての製品を特集する通常のページ。 したがって、WordPressダッシュボードの左側にある[ページ]> [新規追加]に移動する必要があります。

ワードプレスの新しいページ

ステップ9:Diviページのタイトルを追加する

ページのタイトルを作成します。 上部の[ページビルダーを使用]ボタンをクリックし、[モジュールの挿入]領域をタップして、全幅のヘッダーを含めます。 全幅ヘッダーを選択する必要はありませんが、このチュートリアルではこれを使用します。

ページビルダーワードプレス

ステップ10

[全幅ヘッダー]ボタンをクリックします。

ヘッダーを追加する

ステップ11

サイトのタイトル、小見出しのテキスト、テキストの色の詳細を入力します。 主に自分の参照用である管理ラベルを変更することもできます。 完了したら、[保存]ボタンをクリックします。

ヘッダーのカスタマイズ

ステップ12

全幅ヘッダーモジュールの左側にあるXNUMXつのバーをタップして、その他の設定を変更します。

WordPress woocommerceセットアップ

ステップ13

ここで、ヘッダーに素敵な背景色を付けたり、会社のビデオを含めることもできます。

これらのボタンを調整してください

ステップ14

ヘッダーが完成したので、[列の挿入]領域をクリックしてeコマースモジュールを含めることができます。

Wordpress eコマースの設定

ステップ15

必要な列の数を選択し、表示される[モジュールの挿入]オプションをクリックします。 下部にある[購入]ボタンを選択します。

Wordpress eコマースの設定

ステップ16

商品の表示方法を自由に変更してください。 そのため、ページ上の12のアイテム、いくつかの列、およびそれらの注文方法とともに、最近の製品を表示することができます。 保存ボタンをクリックします。

Wordpress eコマースの設定

ステップ17:プレビューして公開する

これが完了したら、[プレビュー]または[公開]ボタンをクリックして、フロントエンドの変更を表示できます。 ご覧のように、製品はきれいに表示され、いつでも戻ってWordPressバックエンドの製品やストアフロントの設定を変更できます。 おめでとう!

の設定について質問がある場合は、 Divi WordPressテーマ下記のコメント欄にご連絡ください。

結論

そしてそれはあなたを得るのに必要なすべてです ディビ SiteooGroundホスティングアカウントを使用してWooCommerceオンラインストアを実行します。

今後は、SiteGroundがWordPressの更新や WooCommerce セキュリティ。 これが、マネージドWooCommerceホスティングソリューションと通常の共有ホスティングソリューションの根本的な違いです。 したがって、WooCommerceストアの管理に集中するために非常に必要な時間とスペースを提供します。

そして、すでに見てきたように、それはDiviテーマのそよ風になるはずです。 WordPressバックエンドからいつでもDivi WooCommerceレイアウトにアクセスして、さらにカスタマイズできます。 必要に応じて、WooCommerceストアも処理できる別のレイアウトにシフトすることで、デザイン全体を変更することもできます。 選択はあなた次第です。

Divi WordPressテーマの設定について質問がある場合は、下のコメントセクションでお知らせください。

ディビ
評価: 5.0 -によるレビュー

カタリン・ゾルジニ

私はウェブデザインのブロガーで、数週間かけて苦労してこのプロジェクトを始めました。 最高のeコマースプラットフォーム 自分のため。 私の現在をチェック トップ10のeコマースサイトビルダー.