WooCommerce ストアで Gutenberg ブロックを使用するためのガイド

WordPress に Gutenberg エディターが導入されたことで、WordPress のアイデンティティが大幅に変更されました。 メディアを追加する機能と、オプションでさまざまなニーズに対応するプラグインを備えたコア コンテンツ管理システムから、常に提供される柔軟性に妥協することなく、リッチでメディア中心の WYSIWYG エディターおよび Web ページ ビルダーになりました。 実際、Gutenberg が提供するブロックにより、ページを自由に構築する柔軟性が向上します。

Gutenberg が以前のエディター (TinyMCE エディターとも呼ばれます) より優れている点は、WordPress Web サイトや WooCommerce に機能を追加する方法を知るために、コーディング方法や WordPress の構造を理解する必要がないことです。お店。 ただし、古い WordPress エディターに慣れている場合は、WordPress の寄稿者によってクラシック エディターとして知られるこの無料のプラグインをいつでもインストールできます。これにより、Gutenberg を完全に無効にするか、古いエディターと Gutenberg を切り替えることができます。 . Gutenberg は、ユーザーが Gutenberg 内でクラシック エディター機能を使用するためのクラシック エディター ブロックも提供します。 話がうますぎる？ この投稿、または WooCommerce ストアで Gutenberg ブロックを使用するためのガイドに飛び込みましょう!

Gutenberg ブロックは、どの WordPress ページからでもアクセスできます。 WordPress 内で新しいページを追加したり、既存のページを編集したりすると、画面の左上のコンテンツ領域にカーソルを合わせると「+」記号が表示されます。

Gutenberg がさまざまな用途のために提供するさまざまな種類のブロックがあります。

ブロックを使用してさまざまなページを作成できますが、WooCommerce の管理者またはストア マネージャーは、ホーム ページまたはショップ ページに最も集中する必要があります。 したがって、このチュートリアルの目的のために、売り上げを伸ばすように設計されたストアのホームページを作成しましょう! これには、 WooCommerce ブロックを最も多く使用します。 これらのブロックは、以前 Automattic による機能プラグインの一部であり、WooCommerce バージョン 3.5 にマージされました。

WooCommerce ブロックには、主にページに商品を表示することに関連するさまざまな機能または「ブロック」が含まれており、ストアの構築に使用できます。 以下は、WooCommerce ブロックで利用可能なブロックのリストです。

• カテゴリ別製品
• 最新の製品
• 注目の製品
• ベストセラー製品
• 販売中の商品
• 厳選商品
• トップ評価の製品
• 属性別商品

ホームページの上部に注目の製品を追加することから始めましょう。 これは、ユーザー/聴衆に強調したい製品であれば何でもかまいません。

「ストアメンバーシップ」という商品を追加しました。 商品が追加されるとすぐに、その画像、説明、価格が表示されます。 右側のサイドバーのオプションを使用して、これらを非表示にすることができます。 「今すぐ購入」ボタンも追加されます。 色、テキスト、およびそれが指す URL はすべて編集可能な属性です。

オーバーレイ カラーは、この場合のおすすめ商品として選択した商品画像の色と不透明度を設定できる興味深い機能です。

この画像に CSS クラスを追加することもできます。 同様に、[今すぐ購入] ボタンも編集できます。

次に、ストアの新着商品とベストセラーを追加して、新規訪問者とリピーターの両方がこのページから何かを得ることができるようにします。

このために、最初に Common Blocks の下にある Heading と呼ばれるブロックを追加します。

「New Arrivals」などの適切な見出しが追加されたら、先に進み、同じブロックにそれぞれのブロックを追加できます。 両方の目的で、 Best Selling ProductsおよびNewest Productsとして知られる WooCommerce ブロックを使用します。 これらのブロックは、再び WooCommerce ブロックの下にあります。 Newest Productsブロックを追加しましょう。

Newest Products ブロックが、WooCommerce ストアから最近追加された製品を取得していることがわかります。 表示する行と列の数を設定することで、このブロックに好きなだけ製品を表示することを選択したり、右側のサイドバーのオプションを使用してカテゴリ別に製品をフィルタリングしたりできます。

このようにして、新着商品のおすすめ商品行の後に別の行を追加しました。

次に、ベストセラー商品を同様の方法で追加しましょう (見出しブロックを追加した後):

新規およびリピーターの訪問者用にこれらの行を作成したので、販売中の製品を表示する行も追加して、より多くの売上を引き付けましょう。 WooCommerce Blocks の下のOn Saleブロックを使用してこれを行います (Heading ブロックを使用して見出しを追加した後)。

要件に基づいて WooCommerce ブロックの下に追加できるブロックは他にもたくさんあります。 それでは、すべての商品をショップページに追加しましょう。 このために、 Products by Categoryブロックを選択できます。

多くの場合、これらのブロックはすべてブロックの最も使用されているカテゴリの下にもありますが、このチュートリアルでは、割り当てられているカテゴリからこれらのブロックを選択しました。 すべての見出しを、販売ページ、ベストセラー ページなどのそれぞれのページにリンクして、顧客がそのセクションの製品の完全なリストを表示できるようにすることができます。

Shop/Home ページに、Browse Store というボタンを追加して、Shop ページにリンクします。

ボタンを追加するには、レイアウト要素ブロックの中から選択する必要があります。

このボタンをショップページにリンクします。

同様に、「Best Sellers」ブロック、「On Sale」ブロックなど、作成した他のすべてのブロックの下にボタンを作成し、これらすべてに対して個別のページを作成し、ボタンをそれぞれのページにリンクすることができます。

別々のタイプの製品 (ベストセラーまたはセール製品) 用に別々のページを作成するには、これらの特定のタイプの製品をそれぞれのページに表示するショートコードを使用できます。 この投稿では、さまざまなショートコードを使用して、ホームページ (または任意のページ) にさまざまなカテゴリの製品を表示する方法について説明しました。

これは、最終的に私たちのページがどのように見えるかです:

次に、[カスタマイズ] (ページのプレビュー時にフロントエンドで) をクリックするだけで、それをフロント ページにできます。 これは、Gutenberg を使用して WooCommerce ストアの魅力的なフロント ページを簡単に作成する方法です。 Gutenberg が提供するさまざまなブロックを探索して実験し、その機能を最大限に活用してください!