で素晴らしいオンラインショップを作成する方法 WooCommerce, Divi と SiteGround (2023)

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

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

編集者注：この投稿は元々15年2015月XNUMX日に公開され、正確性と包括性のために完全に刷新および更新されました。

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

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

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

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

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

本当にクールなのはそれです SiteGround 専門を提供します マネージド WooCommerce ホスティング オンライン販売を開始するために必要なほとんどすべてのサービスパッケージ。 パッケージ内では、 StartUp 計画 初心者向け、 GrowBigプラン ビジネスを成長させるため、または GoGeek 確立された WooCommerce 店。

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

そうは言っても、私たちが強くお勧めする別のホスティングサービス Divi WooCommerce 店舗は お申し込み。 ここの機能はに一致していませんが SiteGroundの、あなたはまだ得る WooCommerce-WordPresseコマースパッケージを介したホスティングに焦点を当てています。 プランは快適に処理できます Divi WooCommerce ストアですが、残念ながら、マネージドサービスは利用できません。

👉 さて、わかりやすくするために、次に進みましょう SiteGround...

どのように始めますか？

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

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

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

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

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

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

ここで、ご希望のプランを選択したら、 SiteGround ドメイン登録ページに移動します。すでにドメインを所有している場合は、15.95 番目のオプションを選択して詳細を入力します。そうでない場合は、年間 XNUMX ドルで新しいドメイン名の登録に進みます。

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

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

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

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

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

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

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

次に、パッケージに含めたい追加のアドオンサービスを選択し、出来上がり！ セットアップに必要なのはこれだけです Siteground アカウント。

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

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

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

何が Divi?

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

それで、このテーマの何がそんなに特別なのですか？ そして、何か目立った点はありますか Diviさん WooCommerce?

ええと、典型的なWordPressテーマとは異なり、 Divi より包括的なパックです。 つまり、標準のテーマ機能と、便利な追加機能を組み合わせたものです。 Divi WooCommerce 店。

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

それを締めくくるには、 Divi 独自の直感的なWordPressページビルダーが付属しています plugin。 あなたはそれを自由にカスタマイズするために使用することができます Divi WooCommerce コーディングなしで保存します。

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

👉 したがって、最終的には、 Divi年代：

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

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

私たちが言ったように、 Divi XNUMXつの異なるフレーバーがあります。 会員費を支払うとき エレガントなテーマ、 あなたは標準を見つけるでしょう Divi ダッシュボードのテーマ、 Divi WordPressページビルダー plugin.

ただし、このビルダーは、 Divi テーマ。 追加で提供されます plugin エレガントなテーマから取得したすべてのテーマに。

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

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

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

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

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

そしてそれについて言えば、ここでのもう一つの注目すべき規定は Diviのレイアウトカスタマイズプロセスの全体的な簡素化。 たとえば、新しいセクションを導入する場合は、シングルクリックで十分です。 次に、モジュールの複製、削除、挿入を行います Divi WooCommerce ストアでは、ボタンを数回クリックするだけです。

一方、 Diviの編集ウィンドウには、サイトのレイアウト変更がリアルタイムで表示されます。 すべての調整を視覚的に追跡し、それが全体的な見通しの設計にどのように影響するかを確認できます。 Divi WooCommerce 保管してください。

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

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

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

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

まあ、全体として、適切なものを特定するのに時間がかかりません Divi オンラインストアのレイアウト。 あなたはそれを統合する必要があります WooCommerce、そしてあなたは魅力的なワードプレスのeコマースサイトをセットアップするための道を進んでいます。

先に進むと、特に注目すべき点のXNUMXつは、 Divi 見た目だけに焦点を当てていません。 ザ・ WooCommerce 付属のレイアウト Divi テーマも機能性を念頭に置いて作成されています。

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

Is Divi に適し WooCommerce?

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

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

👉 一言で言えば、 Divi あなたのために検討する価値のあるオプションです WooCommerce サイトの理由：

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

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

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

ステップ2：インストール Divi あなたのWordPressサイトで

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

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

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

ステップ4：セットアップ WooCommerce ストア

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

素晴らしいのは、最初の SiteGround サインアップはすでにインストールされています WooCommerce WordPress Webサイトにあるので、インストールやセットアップについて心配する必要はありません。 ダッシュボードですでに利用可能になっているはずです。

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

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

ステップ 6

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

ステップ7：探索する WooCommerce 特徴

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

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

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

ステップ9：タイトルを追加する Divi ページへ移動します。

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

ステップ 10

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

ステップ 11

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

ステップ 12

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

ステップ 13

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

ステップ 14

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

ステップ 15

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

ステップ 16

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

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

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

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

まとめ

そしてそれはあなたを得るのに必要なすべてです Divi WooCommerce オンラインストアを使用して稼働中 SiteGround ホスティングアカウント。

今後は、安心してご利用いただけます。 SiteGround WordPressのアップデートや WooCommerce セキュリティ。 それがマネージドの根本的な違いです WooCommerce ホスティングおよび通常の共有ホスティングソリューション。 したがって、それはあなたにあなたに集中するために非常に必要な時間とスペースを与えます WooCommerce 店舗管理。

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

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