WordPressサイトにWooCommerceブロックを追加して、ショップページの作成や商品の一覧表示、絞り込みなどの高度なEC要素を簡単に実装できることをご存知ですか？
多くのブロックはデフォルトでWooCommerceに組み込まれていますが、WooCommerce Blocksプラグインをインストールすることで、さらに多くのブロックを使用することができます。WooCommerce Blocksは、WooCommerce向けのブロックを試験的に提供し、WooCommerceへの実装の可能性を探るために作られたプラグインです。
Kinstaをご利用の場合は、WordPressへの統合は非常に簡単で、セットアップの過程でボックスにチェック入れて、WooCommerceを組み込むだけでOKです。これにより、素早くオンラインストアを立ち上げることができます。
今回は、WooCommerceブロックを使用して、WordPressサイトにEC機能を追加する方法をご紹介していきます。
前提条件
今回ご紹介する内容は、以下を前提としています。
- WordPressにWooCommerceがインストール・有効化されている
- WordPressに関する知識を十分に持っている
WordPressサイトをまだお持ちでない場合は、MyKinstaまたはローカル開発ツールのDevKinstaでサイトを追加してください。サイトを作成したら、WooCommerceのサンプル商品をインポートします。
WooCommerce Blocks
WordPressデフォルトのブロックエディターは、バージョン5.0から導入されているGutenbergエディターです。従来のエディターをブロックベースのシステムに置き換えたもので、フロントエンドのコーディング知識を持たない人でも、視覚的に魅力的なコンテンツを構築・カスタマイズできるようになっています。
WooCommerce Blocksは、Gutenbergエディターの直感的なドラッグ＆ドロップ式インターフェースとシームレスに統合し、商品表示、カート管理、決済プロセスなどのために設計された専用ブロックを提供します。
このプラグインを統合することで、ブロックエディターの柔軟性とシンプルさを最大限に活用しながら、ECストア向けのパフォーマンスに最適化することができます。
WooCommerce Blocksの使用方法は、まず固定ページまたは投稿を開くか新規作成します。エディター上部にある「+」ボタンをクリックしてすべてのブロックを表示し、「WooCommerce」セクションに移動します。各ブロックの詳細は以下のとおりです。
- 商品検索：効率的に商品を検索するための検索バーを追加
- すべての商品：すべてのストア商品をグリッドで表示
- すべてのレビュー：すべての商品レビューを一覧で表示
- クラシック購入手続き：クラシック購入手続きのショートコードをレンダリング
- クラシックお買い物カゴ：クラシックお買い物カゴのショートコードをレンダリング
- 顧客アカウント：ユーザーのログイン/ログアウト機能を有効化
- おすすめカテゴリー：商品カテゴリーとCTAを強調表示
- おすすめ商品：商品またはバリエーションとCTAを強調表示
- アクティブなフィルター：現在有効なフィルターを表示
- 価格でフィルター：価格による商品の絞り込みを有効化
- 在庫状況で絞り込む：在庫状況による商品の絞り込みを有効化
- 属性で絞り込む：サイズや色などの属性に基づいた商品の絞り込みを有効化
- 評価で絞り込む：評価による商品の絞り込みを有効化
- 厳選商品：厳選した商品をグリッドで表示
- ミニお買い物カゴ：カートのクイックビューボタンを追加
- 店舗情報通知：WooCommerceや他の拡張機能によって生成されたユーザー向け通知を表示
- 最も売れている商品：最も売れている商品をグリッドで表示
- 商品カテゴリーリスト：すべての商品カテゴリーを一覧またはドロップダウンで表示
- カテゴリー別商品：選択したカテゴリーの商品をグリッドで表示
- 商品コレクション（ベータ）：指定したコレクションの商品を表示
- 最新商品：最新商品をグリッドで表示
- セール商品：セール中の商品をグリッドで表示
- タグ別商品：選択したタグの商品をグリッドで表示
- 評価の高い商品：評価の高い商品をグリッドで表示
- 属性別商品：選択した属性の商品をグリッドで表示
- カテゴリー別レビュー：選択したカテゴリーの商品レビューを表示
- 商品別レビュー：商品別にレビューを表示
- 単一の商品：単一の商品を表示
- お買い物カゴ：ショッピングカートを表示
- 購入手続き：顧客が注文を確定するためのフォームを表示
これらのブロックをうまく活用して、優れたECサイトを構築していきましょう。
固定ページまたは投稿に「すべての商品」ブロックを使用する
「すべての商品」ブロックを使用すると、WordPressサイト上で商品を整理されたグリッド形式で表示することができます。まずは商品グリッドブロックを追加して、カスタマイズする方法を見てみます。
- 商品を表示したい固定ページまたは投稿に移動し、「商品」のようなタイトルを割り当てます。
- 上部ナビゲーションバーにある「+」をクリックしてブロックの一覧を表示。「WooCommerce」セクションまでスクロールし、「すべての商品」を選択すると、グリッド形式で商品が表示されます。
すべての商品ブロックを使用して商品をグリット形式で表示 - このブロックを編集するには、右側のパネルを使用します。「設定」アイコン（上部ナビゲーションバーの右から2番目のアイコン）をクリックすると、設定パネルを展開することができます。
すべての商品ブロックを設定パネルで編集 設定パネルでは、グリッドのレイアウト、コンテンツ、スタイルを編集できます。
- レイアウト設定─カラム（列）数と行数を変更可能。たとえば両方を2に設定するとバランスの取れた外観になる。
- コンテンツ設定─並び替えのドロップダウンメニューを表示または非表示にできる。
- 高度な設定─必要に応じて、より高度なスタイリングのためにCSSクラスを追加できる。
- 設定を終えたら、ページをプレビューし、すべての要素が正常に表示されていることを確認します。最後に「公開」をクリックすれば完了です。表示状態は（一般）公開、非公開、パスワード保護から任意のものを選択できます。
商品を2×2のグリッド形式で表示し、ナビゲーションバーを反映した例
「おすすめ商品」ブロックを追加する
「おすすめ商品」ブロックを使用すると、固定ページや投稿で商品を強調表示することができます。商品を選択して表示設定を調整し、コンテンツに追加することで、売り出したい特定の商品をアピールすることができます。
「おすすめ商品」ブロックを追加するには、以下の手順に従ってください。
- 商品を紹介したい固定ページまたは投稿に移動します。商品グリッドをすでに設定していて、おすすめの商品を一番上に表示させる場合は、その場所にスペースを作ると「+」が出現します。
または、その場所にすでに別のブロックがある場合は、そのブロックを選択しツールバーの右にある3つの点をクリックすると、ドロップダウンが表示されます。「前に追加」または「後に追加」を選択してください。
「おすすめ商品」ブロックを「すべての商品」ブロックの前に追加 - 上部のナビゲーションバーにある「+」を選択すると、すべてのブロックが表示され、「おすすめ商品」を検索することができます。
「おすすめ商品」ブロックで売り出したい商品を選択 - 表示したい商品を選択して、「完了」をクリック。
- 「おすすめ商品」ブロックの外観を変更するには、先ほどと同じ「設定」アイコンをクリックし、設定パネルを展開します。以下のような要素を編集することができます。
- 商品説明と価格の表示/非表示
- メディア（画像や動画）の表示方法とサイズ調整
- 商品画像のaltテキスト
- カラーオーバーレイ設定
- 不透明度設定
「おすすめ商品」ブロックの設定 - 必要な設定を終えたら、ページを公開するか、（すでに公開されている場合は）更新します。その後、ブロックが設定通りに表示されているかを確認してください。
商品グリッドの上に注目商品のニット帽が表示される例
絞り込みブロックを追加する
絞り込みブロックを使用すると、買い物客が特定の条件に基づいて商品を絞り込めるようになり、好みや条件に合った商品をすばやく見つけることができます。
- ブロックを追加したい固定ページまたは投稿に移動（今回は先のステップと同様に商品ページを使用）。
- フィルタを追加する場所を選択します。
- 上部のナビゲーションバーから「+」をクリックし、すべてのブロックを表示。「WooCommerce」セクションまでスクロールすると、価格、在庫、属性、評価による商品の絞り込みブロックが表示されます。まずは、「価格でフィルター」を追加してみましょう。
「商品でフィルター」ブロックの追加
このブロックを選択すると、ユーザーが希望する価格帯に基づいて商品を絞り込むことができる価格帯バー（以下参照）を追加することができます。また同様に、右側の設定パネルからカスタマイズ可能です。
「属性で絞り込む」ブロックの追加
「属性で絞り込む」ブロックも便利です。
色やサイズなどの特定の属性を選択し、それに応じた設定を行います。また、「商品数を表示」をオンにして、各色の商品数を表示することもできます。
設定後は本番サイトのページを確認し、絞り込み要素を実際に触ってテストしてみてください。
絞り込み要素を追加することで、さまざまな条件に基づいて簡単に商品検索を行うことができるため、顧客の満足度向上につながります。お目当ての商品が見つけやすくなることで、シームレスなショッピング体験を顧客に提供できます。
お買い物カゴと購入手続きページ
オンラインストアのカートと決済ページは、スムーズなユーザージャーニーのために直感的かつ機能的でなければなりません。優れたユーザー体験を構築するには、カートの商品を効率的に管理し、スムーズな決済プロセスを提供することが重要です。
WooCommerceをインストールすると、適切なブロックを使用したお買い物カゴページと購入手続きページがデフォルトで生成されます。ユーザーは商品を買い物カゴに追加後、ナビゲーションバーからアクセスすることができます。
買い物カゴの内容を確認したら、購入手続きに進むボタンをクリックし、必要な情報を入力して注文を確定します。
独自のショップページを作成する
WooCommerceブロックをいくつかご紹介したところで、続いては以下のブロックを組み合わせて、ユーザーフレンドリーなショップページを作成してみます。
- 商品検索
- 価格でフィルター
- 商品カテゴリーリスト
- おすすめの商品
- すべての商品
まずは固定ページを新規作成し、以下の手順で進めていきます。
- ページタイトルに「Shop」と入力します。
ショップページの編集画面 - 先ほどと同じ手順でブロックを追加し、「商品検索」ブロックを追加。設定はそのままにしておきます。
「商品検索」ブロックの追加 - 「商品カテゴリーリスト」ブロックを追加します。
「商品カテゴリーリスト」ブロックを追加 設定パネルで「表示スタイル」を「ドロップダウン」に変更します。
「商品カテゴリーリスト」ブロックの設定を編集 - 「価格でフィルター」ブロックを追加します。このブロックの設定はそのままにしておきます。
- 「おすすめ商品」ブロックを追加し、商品を選択。先ほど取り上げた「おすすめ商品」ブロックと同じ設定を適用します。
おすすめ商品（キャップ）と設定 - 「すべての商品」ブロックを追加します。
「すべての商品」ブロックの追加 「カラム」と「行」の値をそれぞれ2に設定し、「並び替えドロップダウンを表示」をオフにします。
「すべての商品」ブロックの設定を編集 - ページを公開し、実際のページを確認します。
公開したショップページをプレビュー 
公開したショップページをプレビュー
ブロックのパフォーマンスを監視・分析する
Kinstaでは、WooCommerceブロックを使用したページの堅牢なパフォーマンス監視および分析機能を提供しています。
Kinsta APM
Kinstaのアプリケーションパフォーマンス監視（APM）ツールは、WooCommerceブロックを含むページのパフォーマンスを監視します。プロセスワーカー、MySQLデータベースクエリなど、重要な指標をタイムスタンプ付きで取得し、WooCommerceのトランザクションを追跡・分析することができます。
ページに関連するインタラクションの時間や頻度、潜在的なボトルネックなどを把握し、的確にトラブルシューティングを行うことで、パフォーマンスを最適化することができます。
MyKinstaの分析機能
WooCommerceブロックがユーザーのエンゲージメントと売上に与える影響を評価するには、多角的な分析が必要です。MyKinstaにはWordPressサイト向けに優れた分析機能が内蔵されており、ユーザーエクスペリエンス、ひいては売上に直接影響する様々なパフォーマンス指標に関するインサイトを取得することができます。
- 「リソース」セクションには、総訪問数、ディスク使用量、および帯域幅の使用量が表示され、サイトのトラフィックとリソースの使用状況を定量的に把握可能です。
- 「パフォーマンス」セクションでは、PHP+MySQLの平均応答時間やAJAXの使用状況などの指標を確認できます。WooCommerce Blocksを使用したページの応答性とインタラクティブ性の追跡に役立ちます。
- 「レスポンス」セクションでは、レスポンスコードおよびエラーの内訳が表示されます。ユーザーのインタラクションと潜在的な障害をよりよく把握することができます。
- 「CDN使用状況」「キャッシュ」「位置情報とIP」セクションでは、それぞれコンテンツデリバリネットワーク（CDN）の使用状況、キャッシュ効率、地理的なインサイトを追跡することができます。これらの情報は、ユーザーの行動、場所、パフォーマンスデータに基づいてサイトを改良するのに有用です。
これらの指標を継続的に監視することで、潜在的なボトルネックを特定し、WooCommerce Blocksを用いてページを最適化し、シームレスで魅力的なユーザーエクスペリエンスを提供することができます。
関連して、WooCommerceストアを高速化する18のヒントもご覧ください。オンラインストアはスピードが命。読み込みの遅いサイトはユーザーの不満や売上の損失につながります。
まとめ
商品グリッドやおすすめ商品の追加から、絞り込みブロックの実装まで、WooCommerceブロックの活用方法をご紹介しました。また、買い物客にシームレスなショッピング体験を提供するのに欠かせないカートと決済ページについてもご説明しました。
WooCommerceブロックをうまく活用することで、直感的で視覚に訴えるレイアウトを構築することができます。ユーザーの立場に立って必要な機能や要素を検討し、ブロックを選択、設定してみてください。
KinstaのWordPress専用マネージドホスティングを利用すれば、WooCommerceストアのパフォーマンスと信頼性を劇的に高めることができます。最適化されたサーバー構成、堅牢なセキュリティ強化策、シームレスなスケーラビリティにより、最高のパフォーマンスを実現します。
商品表示、絞り込み、またはお買い物カゴなどの機能の実装にWooCommerceブロックを使用するかどうかにかかわらず、Kinstaのホスティングインフラストラクチャは、ユーザーに卓越したショッピング体験を提供するために欠かせない速度と安定性を保証します。
WooCommerceブロックを使用していますか？お気に入りのブロックはありますか？以下のコメント欄でぜひお聞かせください。
コメントを残す