WooCommerce ストア向け ShopEngine と Gutenberg の統合

ついに、待ちは終わりました！ ShopEngine に対応しました あなたと一緒に Gutenberg ブロックエディター。以前は、Elementor ウィンドウからのみ ShopEngine ウィジェットにアクセスできました。

しかし、今では ShopEngine がそれを超えて利用できるようになりました。 Elementor を介して ShopEngine ウィジェットにアクセスする以外に、以下を利用できます。 WooCommerce ストア用の Gutenberg の ShopEngine。ただし、Gutenberg では、これらのウィジェットはブロックとして表示されます。

実際のところ、Elementor ウィジェットと Gutenberg ブロックの機能は同じです。では、違いはどこにあるのでしょうか？違いはアプリケーションにあります。 Elementor ウィジェットの場合、出力を表示するには、指定された領域にウィジェットをドラッグ アンド ドロップする必要がありました。ただし、Gutenberg ブロックの場合は、ブロックをクリックするだけで作業は完了します。

グーテンベルクの概要:

WordPress ユーザーとして、この用語に精通している必要があります。 グーテンベルク。これは WordPress コンテンツ エディター、または WordPress ブロック エディターとしても知られています。現在、Gutenberg はその使いやすさから、WordPress ユーザーの間で最も人気のある WordPress エディターです。多くの WordPress Gutenberg プラグイン サードパーティの開発者からも入手できます。

以前は、人々は別の WordPress エディターである「クラシック エディター」を使用することに慣れていました。 Gutenberg の出現以来、人々はクラシック エディターと比較してブロック エディターを受け入れるようになりました。の専門分野 Gutenberg はブロックベースのコンテンツです.

段落、画像、ボタンのいずれであっても、これらの要素はそれぞれブロックです。クラシック エディターとは異なり、このブロックベースのコンテンツ エディターでは、コンテンツをより詳細に制御できます。このブロック エディターの最も優れた点は、サードパーティの開発者がカスタム ブロックを埋め込めることです。

今後、ShopEngine の多数の機能が Gutenberg for WooCommerce で自由に利用できるようになるため、これがまさにこの有益なブログで焦点を当てる内容です。詳しく説明する前に ShopEngine の Gutenberg のカスタム ブロック、なぜ私たちがそうするのかを説明しましょう WooCommerce 用に ShopEngine と Gutenberg を統合.

ShopEngine を Gutenberg と統合する理由:

ShopEngine は当初、Elementor 専用に設計されました。つまり、Elementor 専用に WooCommerce ページを構築できるということです。しかし、先ほど述べたように、ShopEngine は Gutenberg と統合されて一歩前進しました。

それで、私たちを作ったのは何ですか WooCommerce 用に ShopEngine と Gutenberg を統合する?この質問に答えるために、いくつかのデータを紹介しましょう。

によると グーテン統計.ブログ, Gutenbergはこれまでに7,600万件のアクティブインストールを受けています。それに加えて、現在までに Gutenberg を使用して書かれた投稿は 2 億 6,450 万件あります。

これらのデータは、なぜ ShopEngine の範囲を Gutenberg まで拡張したのかを誰もが納得させるのに十分だと思います。何百万人もの人々がコンテンツ開発のために Gutenberg を導入しています。私たちは彼らに魅力的な機能を見逃してほしくないのです。 ShopEngine の機能 オファーします。

ShopEngine と Gutenberg を統合するその他の理由:

一つ強調しておきますが、 Gutenberg は単なるコンテンツエディターではありません。 Gutenberg プロジェクトは、ブロックエディターを フルサイト編集ツール 近い将来に。

そのアイデアは、Gutenberg エディターを使用して WooCommerce サイトの 100% をデザインできるようにすることです。そうなれば、Gutenbergの需要は急増することになるだろう。ということは、WooCommerce のために ShopEngine と Gutenberg を統合する価値はありますよね?

• Gutenberg を使用すると、コンテンツを埋め込むためにショートコードを使用する必要はありません。代わりに、ブロックをデプロイして必要なページ要素を追加できます。
• Gutenberg には互換性の問題がないため、開発者は Gutenberg のサポートをプラグインに簡単に組み込むことができます。
• Gutenberg は軽量のコードを出力し、高速読み込みツールでもあります。

Gutenberg の注目すべき ShopEngine ブロックのいくつか:

ShopEngine のブロックについて説明する前に、ShopEngine には次の機能が付属していることを明確にしておきます。 65以上のウィジェット, 13 個以上のモジュール, そして 無数のテンプレート Elementor ユーザー向けの WooCommerce ショップ ページ用。 ShopEngine と Gutenberg for WooCommerce を統合した後、以下にアクセスできるようになりました。 Gutenberg の 45 以上の ShopEngine ブロック.

WooCommerce ストアのテンプレートを構築するために選択したページの種類に応じて、Gutenberg ブロックが表示されます。さらに、次のようなモジュールにアクセスできるようになります。 クイックビュー、バリエーション見本、製品比較、ウィッシュリスト.

WooCommerce ストア用の Gutenberg の ShopEngine ブロックの一部を見てみましょう。

製品タイトル:

の 商品タイトル ブロックは、特定の製品の単一ページに表示されます。単一ページのタイプを選択してテンプレートを作成したら、サイドバーから製品タイトル ブロックをクリックするだけです。

その直後に、製品タイトルがページに表示されます。右側のサイドバーから、タイトル タグ、配置、色、タイポグラフィを変更できます。

製品リスト：

製品リストには、WooCommerce ストアで販売するすべての種類の製品が表示されます。 製品リスト ブロックは、シングル、ショップ、チェックアウト、カートのページを含むすべてのタイプのページに表示されます。ページの種類を選択したら、ポップアップまたはサイドバーから製品リストをクリックします。

表示する製品の製品カテゴリを必ず選択してください。右側のサイドバーから、製品リストのさまざまな要素を選択してカスタマイズできます。ページごとの商品数、タグ、販売バッジの表示/非表示、割引率などを選択できます。

製品説明：

単一ページのテンプレートを作成する場合、 製品説明 ブロックがサイドバーに表示されます。ページに製品説明を表示するには、製品説明ブロックをクリックします。説明をカスタマイズしたり、タイポグラフィー、色、配置などを変更してスタイル化することもできます。

チェックアウトのお支払い:

Elementor の Checkout Payment ウィジェットと同様に、 チェックアウト支払いブロック グーテンベルクで働いています。次に進むと、「チェックアウト支払い」ブロックが表示されます。 チェックアウト ページのテンプレートを作成する。その後、WooCommerce ストアに必要に応じてチェックアウト支払いブロックを追加できます。

コンテンツのスタイル、支払い方法、ボタンなどを変更するオプションがあります。チェックボックスの位置、ボタンの色、タイポグラフィ、境界線などを調整できます。

アーカイブ製品:

アーカイブされた製品ページには、投稿されたすべての製品が 1 か所にまとめられています。 WooCommerce 用の Gutenberg でアーカイブ ページのテンプレートを作成するには、左側のサイドバーに進み、 製品ブロックのアーカイブ。在庫の全商品が順次登場します。

アーカイブ製品ページには、レイアウト、コンテンツ、ページネーション、評価などを含む豊富なセグメントが含まれています。このページには、製品タイトル、製品画像、製品価格、製品説明、製品フッターなどの要素が多数含まれています。

カートテーブル:

カート テーブルには、製品名、価格、数量、小計、合計金額など、選択した製品のすべての詳細が表示されます。 ShopEngine の場合 カートテーブルブロックのカート テーブルを通じて、製品に関連するすべての情報を購入者に紹介できます。 WooCommerce カートページ.

コンテンツをカスタマイズし、カート テーブルのさまざまな要素をスタイル設定するには、右側のサイドバーでパラメータを取得します。製品のヘッダーとフッターの色、境界線の色、テキストの色を調整したり、タイトル、価格、数量、合計などのコンテンツ セクションを調整したりできます。

最近見た製品：

ShopEngine の場合 最近見た製品ブロック、ユーザーが最近 WooCommerce ストアで閲覧または表示した商品を紹介できます。ショップページ、商品ページ、カートページなどに最近見た商品を表示できます。

他のブロックと同様に、右側のサイドバーに最近表示した製品に関連するパラメータが表示されます。パラメータを利用して、表示する商品数の指定、販売バッジの表示/非表示、列と行の間隔の設定、商品画像の高さの調整などを行うことができます。

終わらせている：

それで、私たちの移行についてどう思いますか？ WooCommerce 用に ShopEngine と Gutenberg を統合する? WooCommerce ストア用に Gutenberg で ShopEngine ブロックをデプロイした経験についてお知らせください。

WooCommerce への Gutenberg 統合について、肯定的または否定的なフィードバックをいただければ幸いです。また、統合プロセスを合理化するために、皆様からのご提案をお待ちしております。しかし、私たちの取り組みは、 ShopEngine と Gutenberg の統合 まだ進行中です。もうすぐこのプロジェクトは完了します。