ShopEngineとGutenbergforWooCommerceStoreの統合

いよいよお待たせしました！ ShopEngineは、 Gutenbergブロックエディタと互換性があります。 以前は、ElementorウィンドウからのみShopEngineウィジェットにアクセスできましたね。

しかし現在、ShopEngineはそれを超えて利用可能です。 Elementorを介してShopEngineウィジェットにアクセスする以外に、GutenbergのShopEngineをWooCommerceストアで利用できます。 ただし、グーテンベルクでは、これらのウィジェットはブロックとして表示されます。

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

グーテンベルクの概要：

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

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

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

そして、これはまさに私たちがこの有益なブログに焦点を当てるものです。これからは、ShopEngineの機能のヒープがWooCommerceのGutenbergで自由に利用できるようになります。 グーテンベルクにあるShopEngineのカスタムブロックについて詳しく説明する前に、 ShopEngineをGutenbergforWooCommerceと統合した理由を説明します。

ShopEngineをGutenbergと統合する理由：

ShopEngineは当初、Elementor専用に設計されました。 つまり、WooCommerceページはElementor専用に作成できるということです。 しかし今、先に述べたように、ShopEngineはグーテンベルクと統合されてから一歩前進しました。

では、 ShopEngineをGutenberg for WooCommerceと統合した理由は何ですか？ この質問に答えるために、私はあなたにデータの断片を提示させてください-

gutenstats.blogによると、グーテンベルクはこれまでに7600万のアクティブなインストールを受け取りました。 その上、これまでにグーテンベルクで書かれた2億6,450万件の投稿。

これらのデータは、ShopEngineの範囲をグーテンベルクに拡大した理由をだれにも納得させるのに十分だと思います。 何百万人もの人々がコンテンツを開発するためにグーテンベルクを展開しており、ShopEngineが提供する魅力的な機能を見逃してほしくありません。

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

グーテンベルクは単なるコンテンツ編集者ではないという点を強調しておきます。 グーテンベルクプロジェクトは、近い将来、ブロックエディタをフルサイトの編集ツールに変えることを目指しています。

アイデアは、Gutenbergエディターを使用してWooCommerceサイトを100％デザインできるようにすることです。 これが起こった場合、グーテンベルクの需要は急増する可能性があります。 だから、WooCommerceのためにShopEngineをGutenbergと統合する価値はありますよね？

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

グーテンベルクの注目すべきShopEngineブロックのいくつか：

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

WooCommerceストアのテンプレートを作成するために選択したページタイプに応じて、Gutenbergブロックがそれに応じて表示されます。 さらに、クイックビュー、バリエーションスウォッチ、製品比較、ウィッシュリストなどのモジュールにアクセスできます。

グーテンベルクにあるWooCommerceストアのShopEngineブロックのいくつかを見てみましょう-

製品タイトル：

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

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

製品一覧：

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

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

製品説明：

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

チェックアウト支払い：

ElementorのCheckoutPaymentウィジェットと同様に、CheckoutPaymentブロックはGutenbergで機能します。 チェックアウトページのビルドテンプレートに移動すると、「チェックアウト支払い」ブロックを表示できます。 その後、WooCommerceストアの必要に応じて、チェックアウト支払いブロックを追加できます。

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

製品のアーカイブ：

アーカイブされた製品ページには、投稿されたすべての製品が1か所に含まれています。 Gutenberg for WooCommerceでアーカイブページのテンプレートを作成するには、左側のサイドバーに移動して、[アーカイブ製品]ブロックをクリックします。 在庫のすべての製品が次々に表示されます。

商品のアーカイブページには、レイアウト、コンテンツ、ページ付け、評価などの豊富なセグメントがあります。このページには、商品のタイトル、商品の画像、商品の価格、商品の説明、商品のフッターなど、さまざまな要素が含まれています。

カートテーブル：

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

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

最近見た製品：

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

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

終わらせている：

では、 ShopEngineをGutenberg for WooCommerceと統合するための私たちの動きについてどう思いますか？ WooCommerceストア用にGutenbergにShopEngineブロックをデプロイした経験について教えてください。

WooCommerceのGutenberg統合について、肯定的または否定的なフィードバックをお寄せください。 また、統合プロセスを合理化するために、皆様からの提案をいただければ幸いです。 ただし、 ShopEngineとグーテンベルクの統合に関する作業はまだ進行中です。 まもなく、プロジェクトは終了します。