新しいWooCommerceBlocksプラグインの概要

公開: 2019-01-21

WooCommerceをインストールまたは更新すると、WooCommerceBlocksと呼ばれる新しいプラグインが含まれます。 これにより、WordPressブロックエディターに新しいブロックが追加され、WooCommerce製品をページや投稿に追加できるようになります。 この記事では、WooCommerce Blocksを見て、何ができるかを見ていきます。

WooCommerceBlocksプラグイン

WooCommerce Blocksは、グーテンベルクに7ブロックを追加するWooCommerceの新しいアドオンです。

  1. 注目商品
  2. 厳選された商品
  3. ベストセラー商品
  4. 最高評価の製品
  5. 最新の製品
  6. セール商品
  7. カテゴリ別製品

各ブロックは調整可能なグリッド内に表示され、並べ替えまたはフィルタリングが可能です。 グリッドを使用すると、レイアウトの列数を指定できます。 スライダーコントロールを調整して、1〜6列から選択します。 一部のブロックでは、行数を調整することもできます。 4は、列または行を持つすべてのブロックのデフォルトです。 ページネーションは含まれていないため、設定した数値だけが表示されます。

フィルタを使用すると、カテゴリを選択できます。 一部には並べ替え機能が含まれており、新しさ、価格、評価、売上、タイトル、またはメニューの順序で並べ替えることができます。

ブロックには、カスタムCSSフィールドを備えた標準のGutenbergAdvancedタブも含まれています。

製品ブロックをアクティブ化する

WooCommerceを更新またはアクティブ化すると、プラグインリストに新しいプラグインが表示されます。 ここに表示されない場合は、プラグインの下の[新規追加]タブでWooCommerceブロックを検索できます。

プラグインリストで、またはWordPressダッシュボードの上部にあるボタンをクリックしてブロックをアクティブ化できます。

WooCommerceブロックの使用

WooCommerceという新しいタブが、グーテンベルクエディター内の使用可能なブロックのリストに追加されます。 このタブの中には、7つのWooCommerceブロックのセットがあります。 各ブロックには、それらの機能に一致するアイコンが付いているため、一目でそれらを認識できます。

ブロックをページに追加すると、シンボルがページに表示され、クリックしてすばやく追加できます。

各ブロックを見てみましょう。

注目商品

注目の製品では、リストから1つの製品を選択して表示できます。 テキストの配置、オーバーレイの編集、および画像の編集を行うことができます。 また、追加のCSSクラスフィールドもあります。

このブロックには、すべてのWooCommerceブロックの中で最も多くのカスタマイズがあります。 上部のテキストボタンでテキストの向きを設定します。 [編集]をクリックすると、オーバーレイのカスタマイズが開きます。 ここでは、製品の選択、説明の表示、価格の表示、オーバーレイの色の選択、および不透明度の設定を行うことができます。

使用する色を選択するか、マルチカラーの円をクリックしてカスタム色を選択できます。 ここでは、16進コードやRGBコードを入力したり、スライダーとカラーピッカーで色を調整したりできます。 オーバーレイ調整が好きです。 テキストまたはボタンを調整するには、CSSを使用する必要があります。

厳選された商品

厳選された製品では、表示する製品を選択できます。 ブロック自体または右側の列から検索できます。 列数を1〜6の範囲で設定します。 新しさ、価格、評価、販売、タイトル、またはメニューの順序で注文します。

製品を選択すると、グリッド内のレイアウトに製品が追加されます。

ベストセラー商品

ベストセラー商品では、ブロックから何も選択できませんが、右側の設定ですべてのカスタマイズを行うことができます。 ここでは、列と行の数を選択し（それぞれ、1〜6から選択）、カテゴリでフィルタリングし、CSSを調整できます。

この例では、6列、2行、および衣料品カテゴリを選択しました。

最高評価の製品

ブロックを選択すると、Top RatedProductsも製品を追加します。 設定には、1〜6列と行の標準レイアウト、カテゴリによるフィルター、およびCSSを含めることができます。 これはデフォルト設定を示しています。

最新の製品

ブロックを選択すると、最新の製品も自動的に製品を追加します。 設定には、標準レイアウト、カテゴリフィルター、およびCSSが含まれます。 この例では、5列と3行を選択しました。 すべてのカテゴリを含むカテゴリフィルタをデフォルトのままにしました。

セール商品

販売中の製品は、販売中のすべての製品を自動的にロードします。 また、列と行のレイアウトオプション、製品フィルター、およびCSSも含まれています。 これはOrderByオプションを追加するので、新しさ、価格、評価、売上、タイトル、またはメニューの順序で注文できます。 この例では、列を2に、行を4に設定しました。製品カテゴリはデフォルトのままにしました。

カテゴリ別製品

カテゴリ別製品を使用すると、ブロック内のカテゴリを選択でき、選択肢を絞り込むのに役立つセレクターが含まれています。 私の例では、オプションは1つしかありませんでした（選択したカテゴリ）。 また、レイアウトオプション、カテゴリの選択、順序、およびCSS設定も含まれています。

この例では、カテゴリを選択し、列を4に、行を2に設定し、製品をアルファベット順に並べました。

WooCommerceブロックを含むページの例

フロントエンドの各ブロックを見てみましょう。 それらを識別するためのラベルを追加しました。 それぞれに異なる列数を設定しましたが、画像が手に負えなくなるのを防ぐために、すべてに1行あります。 これらのブロックを使用して、カテゴリごとにストアページを簡単に作成できます。

たとえば、アクセサリを紹介するためだけにページを作成しました。 表紙の画像とタイトルを追加し、Products byCategoryブロックを3列6行で表示するように設定しました。

素敵なデザインのすっきりとしたページを作成します。もちろん、アクセサリカテゴリの製品のみを表示します。 これは、すべてのタイプの製品ページを作成するために使用できます。

これは、厳選されたブロックとテキストブロックを2列に追加する短いCTAです。

ページはシンプルですが、機能的です。

このページでは、ブログ投稿のレイアウト内にベストセラー製品を追加しました。 4列1行に設定し、カテゴリとして衣料品を選択しました。

投稿は素晴らしく見えます。 公開する前に、おそらく製品のスペースとラベルを追加し、テキストにパディングを追加するかもしれませんが、その可能性は簡単にわかります。

これには、2列のレイアウトを追加し、テキストブロックと2列2行のBest SellingProductsブロックを追加しました。

終わりの考え

WooCommerceBlocksは興味深いプラグインです。 ブロックは使いやすく、いくつかの便利なカテゴリ、レイアウト、およびフィルタリングツールを提供します。 列と行のレイアウトスライダーが好きです。 テキスト、ボタン、ホバーオーバーレイなどを調整する場合は、CSSを使用する必要がありますが、少なくともカスタムCSSはオプションです。 ブロックは、販売ページを作成したり、コンテンツ内に製品を追加したりするのに最適です。

さらにいくつかのスタイリング機能（特にボタン、テキスト、ホバーオーバーレイ用）が欲しいのですが。 私はDiviと同じようにカスタマイズしたいと思っていました（Diviは私を台無しにしたと思います）。 CSSを使用する人を助けるCSSクラスフィールドが含まれています。 多くのカスタマイズがなくても、ブロックを使用するのが好きでした。 グーテンベルクのページや投稿にWooCommerce製品を含めたい場合は、WooCommerceBlocksを試す価値があります。

我々はあなたから聞きたい。 WooCommerceブロックを試しましたか？ コメントであなたの経験について教えてください。

Jomic /shutterstock.com経由の注目の画像