動的商品表示のためのWooCommerce商品ショートコードをマスターする

Eコマースの世界は柔軟性が不可欠です。成功するオンラインストアは、瞬時に商品を変更、適応、強調表示できる必要があります。多くのストアオーナーは開発者が必要だと考えがちですが、実際にはWooCommerce に組み込まれた強力なツール、WooCommerce商品ショートコードを使えば簡単に実現できます。このシンプルながら多機能なツールを使えば、コードを一行も書かずに商品を表示したり、カスタムグリッドを作成したり、動的なページを構築したりできます。

この包括的なガイドでは、[products]ショートコードの使い方をマスターする方法を解説します。このショートコードの属性を使いこなし、あらゆるページ、投稿、ウィジェットエリアに魅力的なカスタム商品表示を作成する方法を学びます。ホームページに商品をいくつか追加したい初心者の方から、複雑でフィルタリング可能なランディングページを作成したい上級者まで、この記事はあらゆる方に役立つリファレンスです。

基礎編：WooCommerceの必須ショートコード一覧

[products]ショートコードについて詳しく説明する前に、ショートコードとは何か、そして WordPress におけるその役割について理解しておきましょう。ショートコードとは、 [shortcode]のように角括弧で囲まれた小さなコードのことです。WordPress は、ページが表示される際に、このショートコードをプレースホルダーとして動的なコンテンツや機能に置き換えます。ショートコードは、クラシックエディター、 Gutenberg ブロック、Elementor などのページビルダーなど、テキストを追加できる場所ならどこでも使用できます。

ここでは[products]ショートコードに焦点を当てていますが、WooCommerceには、ストアの必須ページ向けの完全なWooCommerceショートコードリストが付属しています。これらのショートコードは通常、WooCommerceのセットアップ時に自動的に作成されるページに配置されます。

• [woocommerce_cart] – カートページのコンテンツを表示します。
• [woocommerce_checkout] – チェックアウトフォームを表示します。
• [woocommerce_my_account] – 顧客のアカウントダッシュボードを表示します。
• [woocommerce_order_tracking] – 顧客が注文を追跡するためのフォームを提供します。

[products]ショートコードは、最も汎用性が高いです。メインのショップページ以外のページや投稿に商品を表示するための鍵となります。基本的な構造はシンプルに[products]です。このショートコードだけでも、最新の商品がグリッド表示されます。しかし、真の威力は、その豊富な属性にあります。

さらに詳しく： シームレスなオンライン販売のためのWPショッピングカートの設定方法

[products]ショートコードの構造

WooCommerce商品ショートコードの真の柔軟性は、その属性にあります。属性とは、角括弧内に追加するパラメータで、表示される商品とその外観を制御します。ショートコードに具体的な指示を与えるコマンドと考えることができます。.

最もよく使われる属性を簡単にご紹介します。これはWooCommerce製品に必須のショートコードリストです。.

属性	関数	可能な値
制限	表示する製品の数を設定します。.	任意の正の整数（例： 8, 12)
列	グリッド内の列数を設定します。.	1 に 6
注文者	製品の並べ替え方法を指定します。.	日付、 タイトル、 ID、 人気度、 評価、 ランド
注文	並べ替えの順序を設定します。.	ASC （昇順）または DESC （降順）
ID	ID 別に特定の製品を表示します。.	カンマ区切りの製品IDリスト（例： "1,2,3")
SKU	SKU 別に特定の製品を表示します。.	カンマ区切りの製品SKUリスト（例： 「hoodie-01,tee-02」）
カテゴリ	製品カテゴリのスラッグまたは ID でフィルタリングします。.	カンマ区切りのカテゴリスラッグのリスト（例： 「clothing,accessories」）
販売中	現在販売中の商品を表示します。.	真実
可視性	製品の可視性によってフィルタリングします。.	表示、 カタログ、 検索、 注目
ページ付け	製品リストのページ区切りを有効にします。.	真実
クラス	グリッドにカスタム CSS クラスを追加します。.	任意のCSSクラス名（例： 「my-custom-grid」）

属性値を囲む際は、必ずストレートクォート（ " ）を使用してください。よくある間違いは、カーリークォートを使用することです。カーリークォートを使用すると、ショートコードが正しく動作しなくなります。

こちらもご覧ください： WooCommerceの商品がショップページに表示されない場合の対処法：簡単な解決策

商品選択をマスターする：実践的かつ高度なショートコードの使用例

それでは、WooCommerceの商品ショートコードの例を見て、効果的な使い方を学びましょう。これらの例は、 あらゆるページに動的なカスタム商品セクションを作成するのに役立ちます。

おすすめ商品の表示

WooCommerceのおすすめ商品ショートコードは、ホームページで売れ筋商品やプロモーション商品を効果的に紹介するのに最適です。このショートコードを使用するには、まずWooCommerceダッシュボードで商品を「おすすめ」に設定する必要があります。「商品」ページに移動し、商品にマウスオーバーして星のアイコンをクリックします。星が青色に変わり、商品がおすすめ商品であることを示します。.

ショートコード: [products visibility="featured"]

このショートコードは、おすすめとしてマークしたすべての商品を表示します。他の属性と組み合わせて表示内容を絞り込むこともできます。.

例： 注目の商品8点を4列のグリッドにランダムに並べ替えて表示します。 [products visibility="featured" limit="8" columns="4" orderby="rand"]

IDまたはSKUによる特定の製品

ブログ記事やランディングページなど、特定の商品を1つか2つだけ表示しなければならない場合があります。そんな時に役立つのがWooCommerce商品IDショートコードです。ids属性にカンマ区切りの商品IDリストを記述することで、商品IDを絞り込むことができます。

ショートコード: [products ids="12, 35, 78"]

覚えやすい製品 SKU を使用することもできます。.

ショートコード: [products skus="shirt-01, pants-02"]

IDとSKUの確認方法： WordPressダッシュボードで、WooCommerce → 商品に移動します。商品IDは、商品名の横にある小さな列に表示されます。また、商品タイトルにカーソルを合わせると、URLにIDが表示されます。SKUは、商品の編集ページの「商品データ」セクションにあります。

カテゴリーによるフィルタリング

WooCommerceの商品カテゴリーショートコードは、最も強力な機能の一つです。「新着Tシャツ」セクションや「アクセサリー」ページなど、特定の商品タイプ専用のセクションを作成できます。.

ショートコード： [products category="t-shirts"]

カテゴリのスラッグを確認するには、 WooCommerce → 商品 → カテゴリ。スラッグとは、カテゴリのURLに適した名前のことです。

例： 「パーカー」と「Tシャツ」のカテゴリから9つの商品を3列に表示します。 [products category="hoodies, t-shirts" limit="9" columns="3"]

セール商品やベストセラー商品の表示

販売専用のページを作成することは、優れたマーケティング戦略です。ショートコードを使えば簡単に作成できます。.

セール中商品のショートコード： [products on_sale="true"]

同様に、最もパフォーマンスの高い製品を宣伝することもできます。.

ベストセラー商品のショートコード： [products best_selling="true"]

カスタムディスプレイ用のフィルターの組み合わせ

複数の属性を組み合わせることで、真の魔法が生まれます。これにより、正確で魅力的な商品グリッドを作成できます。.

例: 「衣料品」カテゴリで最も人気のあるセール対象商品12点を4列で表示します。 [products category="clothing" on_sale="true" orderby="popularity" limit="12" columns="4"]

この詳細な制御により、顧客を引き付けるユニークなショッピング体験を生み出すことができます。.

高度な表示オプション: ページ区切り、並べ替え、カスタムスタイル

WooCommerce 製品ショートコードは製品を選択し、ページ上での製品の外観と動作を制御します。.

大規模な製品リストのページネーション

多数の商品を掲載したページでは、読み込み時間の延長やユーザーエクスペリエンスの低下を避けるため、ページ区切りが必要です。paginate属性は、この問題を完璧に解決します。

ショートコード: [products paginate="true" per_page="12"]

per_page属性はpaginate属性と連携して、各ページに表示されるアイテム数を指定します。これは、ページネーション機能を備えたWooCommerce商品ショートコードの重要な要素です。

ソートと順序付け

orderby 属性とorder属性を使用して、製品の順序を指定できます。

• orderby="price": 商品を価格順に並べ替えます。
• orderby="rating": 平均顧客評価で並べ替えます。
• orderby="popularity": 購入数で並べ替えます。
• orderby="rand": ページ読み込みごとに商品をランダムにシャッフルします。

順序 、 並べ替えの方向を指定します。order ="ASC" は昇順 (例: 低価格から高価格) を、 order="DESC" は降順 (例: 高額から低価格) を指定します。

例： 評価の高い順に10個の商品を表示します。 [products limit="10" orderby="rating" order="DESC"]

クラスによるカスタムスタイル

デザイナーや開発者にとって、 class 属性はWooCommerceの商品ショートコードをカスタマイズするための強力なツールです。これにより、 固有のCSSクラス できます。その結果、サイト上の他の商品グリッドに影響を与えることなく、ショートコードの出力にカスタムスタイルを適用することが可能になります。

ショートコード: [products class="hero-products"]

次に、カスタム CSS で、このクラスをターゲットにすることができます: .hero-products .product { background-color: #f5f5f5; border: 1px solid #ccc; }

互換性に関するヒント

WooCommerceの商品ショートコードは、クラシックエディター、Gutenbergブロックエディター（専用の「ショートコード」ブロックを使用）、そしてほとんどの主要なページビルダーで動作します。また、レスポンシブ設計のため、さまざまな画面サイズに合わせて自動的に調整されます。ただし、必ずデスクトップとモバイルでショートコードをテストし、正しく表示されることを確認してください。.

戦略的なユースケース：製品ショートコードを使用する場所と理由

構文を知ることは重要ですが、戦略的に使うことはまた別の話です。WooCommerce の商品ショートコードを使ってストアを改善する。

• ホームページ： 訪問者が最も重要な商品にすぐにアクセスできるよう、「新着商品」「売れ筋商品」「セール商品」などの専用セクションを作成しましょう。

• ブログ投稿： ブログ投稿内に単一の商品、または小さな商品グリッドを埋め込みます。新しいジャケットのスタイリングに関するブログ投稿を書く場合は、ショートコードを使用して、そのジャケットとその他の関連商品を投稿のすぐ下に表示します。

• カテゴリーランディングページ： 特定のカテゴリー専用のランディングページを作成できます。独自のコピーを追加し、ショートコードを使用してそのカテゴリーの商品のみを表示できます。

• マーケティング ランディング ページ: 新しいキャンペーンでは、カスタマイズされた WooCommerce 製品ショートコードを使用して、特定のタグが付いた製品や新しいコレクションの製品を紹介するランディング ページを作成し、コンバージョンを促進できます。

続きを読む： WooCommerceのチェックアウトページにチップオプションを追加する方法

トラブルシューティングと最適化のベストプラクティス

ショートコードのようなシンプルなツールでも、問題が発生することがあります。よくある問題を解決し、サイトのパフォーマンスを向上する方法をご紹介します。.

• 入力ミスの確認： 括弧の抜け、属性名の誤字、引用符の誤りなどにより、ショートコードがプレーンテキストとして表示されることがあります。コードを再確認してください。

• IDとスラッグの確認： 正しい商品ID、SKU、カテゴリースラッグを使用していることを確認してください。これらを確認する最も簡単な方法は、WordPressダッシュボードを使用することです。

• キャッシュとパフォーマンス： 1つのショートコードで表示する商品が多すぎると、サイトの速度が低下する可能性があります。limit属性 と paginate 属性 商品数を制限しましょう。 ページの読み込み時間を短縮するには、優れたキャッシュプラグインを活用しましょう。

• 高度なニーズ： 動的なフィルタリング、AJAXページネーション、その他の複雑な機能が必要な場合は、専用のプラグインが必要になる場合があります。WooCommerce Product TableやWooCommerce Product Filtersなどのツールを使用すると、ショートコードの機能を大幅に拡張できます。

結論：WooCommerceの動的商品表示ツールキット

WooCommerceの商品ショートコードは、ストアオーナーにとって画期的な製品です。ウェブサイト全体にダイナミックで魅力的、そして高度にカスタマイズされた商品ディスプレイを作成するための、シンプルでありながら強力な手段を提供します。 [products] ショートコードとその属性をマスターすることで、静的なページを魅力的なマーチャンダイジングツールへと変貌させることができます。

まずはホームページのおすすめ商品セクションなどの基本から始め、より高度な組み合わせを試して、ユニークなランディングページを作成したり、ブログコンテンツに商品を戦略的に埋め込んだりしてみましょう。このショートコードを使えば、コードを一切変更することなく、プロフェッショナルでユーザーフレンドリーなオンラインストアを作成できます。このガイドをブックマークして、今すぐより優れた商品表示を実現しましょう！

WooCommerce製品ショートコードに関するよくある質問