WooCommerce には、投稿やページ内にコンテンツを挿入するために使用できるショートコードがいくつか含まれています。

WooCommerce ブロックは、WooCommerce サイトで投稿やページに製品を表示する最も簡単で柔軟な方法となりました。 利用可能なすべての WooCommerce ブロックの詳細については、こちらをご覧ください。

ショートコードの使い方 ページトップへ

使用場所 ページトップへ

ショートコードはWordPressのページと投稿で使用することができます。 ブロックエディタを使っている場合は、ショートコードブロックがあるので、そこにショートコードを貼り付けます。

クラシックエディタを使っている場合は、ページまたは投稿にショートコードを貼り付けることができます。

アーギュメント(または引数) トップに戻る

以下のショートコードのいくつかは、「アーギュメント」に言及します。 これらは、ショートコードをより具体的にするための方法です。 例えば、ショートコードにid="99"を追加すると、ID99の商品に対してカートに追加するボタンを作成することができます。

Page Shortcodes

WooCommerce は、最初の 3 つのショートコードがサイトのどこかになければ正しく機能しません。

注意: WooCommerce Blocks プラグインで利用可能な新しいカートおよびチェックアウト ブロックをテストできるようになりました!

– カート ページを表示
– チェックアウト ページを表示
– ユーザー アカウント ページを表示
– 注文追跡フォームを表示

ほとんどの場合、これらのショートコードはオンボーディング ウィザードによって自動的にページに追加されるので、手動で使用する必要はありません。

カート トップに戻る

カート ページで使用されるカート ショートコードは、カート コンテンツと、クーポン コードおよびその他のカート関連のインターフェイスを表示します。

Args: none


チェックアウト トップに戻る

チェックアウトページで使用され、チェックアウトショートコードはチェックアウト処理を表示します。

Args: none


マイアカウントトップに戻る

顧客が過去の注文を閲覧したり情報をアップデートできるマイアカウントのセクションを表示します。 表示する注文の数を指定することができます。 デフォルトでは、15に設定されています(すべての注文を表示するには-1を使用します)

Args:

array( 'current_user' => '' )

現在のユーザーの引数は、get_user_by( 'id', get_current_user_id() )を使用して自動的に設定されています。

注文追跡フォーム トップに戻る

ユーザーが注文の詳細を入力することで注文の状況を確認できます。

Args: none


製品 トップに戻る

注:バージョン 3.6 から、WooCommerce Core にはいくつかの製品ブロックが含まれています。 これらはショートコードよりも設定が簡単なので、WordPress のブロックエディタを使用している場合は、まず WooCommerce Blocks についての詳細を読むとよいでしょう。

ショートコードは最も堅牢なショートコードの 1 つで、WooCommerce の以前のバージョンで使用されていた他のさまざまな文字列を置き換えることができます。

ショートコードは、投稿ID、SKU、カテゴリ、属性で商品を表示することができ、ページネーション、ランダムソート、商品タグをサポートしており、WooCommerce 3.2以下のバージョンで必要となるなどの複数のショートコードに取って代わられます。 以下の例を確認してください。

利用可能な商品属性 トップに戻る

ショートコードと組み合わせて利用できる属性は以下のとおりです。 これらは、ナビゲーションが簡単になるように、主な機能のセクションに分割されています。

Display Product Attributes

  • limit – 表示する製品の数。 デフォルトは、製品を一覧表示する場合は-1(すべて表示)、カテゴリの場合は-1(すべて表示)です。
  • columns – 表示する列の数です。 デフォルトは 4 です。
  • paginate – ページ分割をトグルします。 limit と組み合わせて使用する。 デフォルトはfalseで、trueに設定するとページネーションが行われます。 .
  • orderby – 入力されたオプションで表示された製品を並べ替えます。 1つ以上のオプションを渡すには、両方のスラッグをスペースを空けて追加します。 利用可能なオプションは以下の通りです。
    • date – 商品が公開された日付.
    • id – 商品の投稿ID.
    • menu_order – メニュー順(設定されている場合).
    • popularity – 購入した数.
      • – 購入した数.date – 商品が公開された日.
      • rand – ページロード時に商品をランダムに並べる(特定の順序を保存する可能性があるため、キャッシュを使用しているサイトでは機能しない場合があります)。
      • rating – 商品の平均評価
      • title – 商品の題名rand – 商品名。 これはデフォルトのorderbyモードです。
    • skus – 商品 SKU のカンマ区切りリスト.
    • category – カテゴリ スラッグのカンマ区切りリスト.
    • tag – タグ スラグ のカンマ区切りリスト.
    • order – 商品の順序が昇順 (ASC) か降順 (DESC) か、orderby で設定した方法に従って指定されます.昇順に指定された商品は、 で設定した方法で昇順と降順を行います。 デフォルトは ASC です。
    • class – HTML ラッパークラスを追加し、カスタム CSS で特定の出力を変更できるようにします。
    • on_sale – セール中の商品を取得するようにしました。 best_sellingtop_rated とは併用しないでください。
    • best_selling – ベストセラー商品を取得します。 on_sale または top_rated.
    • top_rated との併用はできません – トップレートの商品を検索します。 on_sale または best_selling とは併用できません。

    コンテンツ製品属性

    • attribute – 指定した属性スラッグを使用して製品を取得します。
    • termsattribute で使用する属性用語のカンマ区切りリスト。
    • terms_operator – 属性用語を比較する演算子です。 利用可能なオプションは次のとおりです:
      • AND – 選択したすべての属性の製品を表示します。
      • IN – 選択した属性を持つ製品を表示します。 これはデフォルトの terms_operator 値です。
      • NOT IN – 選択した属性に含まれない製品を表示します。
    • tag_operator – タグを比較する演算子です。 利用可能なオプションは次のとおりです:
      • AND – 選択したすべてのタグの製品を表示します。
      • IN – 選択したタグを持つ製品を表示します。
      • NOT IN – 選択したタグに含まれない商品を表示します。
    • visibility – 選択した可視性に基づいて、商品を表示します。 利用可能なオプションは次のとおりです:
      • visible – ショップと検索結果に表示される商品です。
      • catalog – ショップでのみ表示され、検索結果では表示されない商品。
      • search – ショップではなく、検索結果でのみ表示される商品。
      • hidden – ショップと検索の両方で隠され、直接URLでのみアクセスできる商品です。
      • featured – 注目商品としてマークされている商品。
      • category – 指定したカテゴリースラグを使って商品を取得します。
      • tag – 指定したタグスラグを使って商品を取得します。
      • cat_operator – カテゴリー用語を比較する演算子です。 利用可能なオプションは次のとおりです:
        • AND – 選択したすべてのカテゴリに属する製品を表示します。
        • IN – 選択したカテゴリに属する製品を表示します。
        • NOT IN – 選択したカテゴリにない商品を表示します。
        • ids – ポストIDをカンマ区切りにしたリストに基づいて商品を表示します。
        • skus – SKUのカンマ区切りリストに基づいて製品を表示します。

        製品が表示されない場合は、「カタログ表示」で「非表示」に設定されていないことを確認します。

        商品IDを見つけるには、商品画面に行き、商品にカーソルを合わせると、以下のようにIDが表示されます。

        Special Product Attributes

        これらの属性と上記の「コンテンツ属性」は競合して表示しない恐れがあるので使用することが出来ません。 以下の特殊属性のうち1つだけを使用する必要があります。

        • best_selling – ベストセラーの製品を表示します。 true に設定されている必要があります。
        • on_sale – 売れ筋の商品を表示します。 true.

        商品シナリオの例 ページトップへ

        以下のシナリオでは、アパレルショップを例として説明します。

        Scenario 1 – Random Sale Items

        セール中の商品をランダムに4つ表示したい。

        
        

        このショートコードでは、4列(1行となる)で、セール中の人気商品を表示すると説明しています。 また、CSS クラス quick-sale を追加し、テーマで変更できます。

        Scenario 2 – Featured Products

        私は、特集商品を表示したい、1 列に 2 つ、最大 4 つの商品。

        
        

        このショートコードは最大 4 つの製品が 2 列にロードされ、これらは特集されていなければならないと言います。 明示されていませんが、タイトル (A から Z) でソートするなどのデフォルトを使用します。

        Scenario 3 – Best Selling Products

        ベストセラー商品3つを1列に表示したいのですが、どうすればよいですか?

        
        

        Scenario 4 – Newest Products

        新しい製品を最初に表示したい – 1行にわたって4つの製品を表示します。 これを実現するために、orderとorderbyコマンドとともに、Post ID(これは商品ページが作成されたときに生成されます)を使用します。 フロントエンドから投稿 ID を見ることができないので、ID# は画像の上に重ねて表示されています。

        
        

        シナリオ 5 – 特定のカテゴリー

        パーカーとシャツだけを表示し、アクセサリーは表示しないようにしたいのですが。 私は 4 つの 2 行を使用します。

        
        

        あるいは、これらのカテゴリにない製品だけを表示したいです。 cat_operatorNOT IN に変更するだけです。

        
        

        なお、制限を 8 にしていても、その条件に合う商品は4つしかないので、4つの商品が表示されます。

        シナリオ 6 – 属性の表示

        各洋服アイテムは、適切な季節に応じて「春夏」または「秋冬」のいずれかの属性を持ち、一部のアクセサリは1年中着用できるため両方が表示されています。 この例では、1行に3つの商品を並べ、「春夏」アイテムをすべて表示させたいと思います。 その属性スラッグは season で、属性は warmcold です。 また、新しい商品から古い商品へと並べ替えたいのですが。

        
        

        あるいは、寒い季節の商品だけを表示したい場合は、terms_operator:

        
        

        なお、NOT INを使用すると、「春/夏」と「秋/冬」にある両方の製品を除外することに注意してください。 これらの共有アクセサリを含む、寒冷地に適したすべてのギアを表示したい場合は、用語を warm から cold に変更します。

        Scenario 7 – タグ “hoodie”

        
        

        カスタム メタ フィールドによる製品の並べ替え トップに戻る

        Note: 弊社のサポート方針ではカスタム化に対するサポートを行っておりませんのでご了承ください。 コード/テンプレートや潜在的な競合の解決に精通していない場合は、WooExpertにお問い合わせください。

        製品ショートコードを使用する場合、上記の定義済みの値で製品を並べ替えることを選択することができます。 また、以下のコードを使用して、カスタムメタフィールドで商品を並べ替えることもできます(この例では、価格で商品を並べ替えています):

        add_filter( 'woocommerce_shortcode_products_query', 'woocommerce_shortcode_products_orderby' );function woocommerce_shortcode_products_orderby( $args ) { $standard_array = array('menu_order','title','date','rand','id'); if( isset( $args ) && !in_array( $args, $standard_array ) ) { $args = $args; $args = 'meta_value_num'; } return $args;}

        このスニペットをテーマフォルダの functions.php に配置し、meta_key を編集してカスタマイズする必要があります。

        商品カテゴリ トップに戻る

        これら 2 つのショートコードで、商品カテゴリをどのページにも表示できます。

        • – 指定した商品カテゴリの商品を表示します。
        • – すべての商品カテゴリを表示します。

        Available Product Category attributes Back to top

        • ids – 特定のカテゴリ ID を指定してリストアップします。
        • category で使用されます – カテゴリID、名前、スラッグのいずれかを指定できます。
        • limit – 表示するカテゴリの数
        • columns – 表示する列の数です。 デフォルトは4
        • hide_empty – デフォルトは “1 “で、空のカテゴリを隠します。 0」に設定すると空のカテゴリを表示します
        • parent – すべての子カテゴリを表示したい場合は、特定のカテゴリIDを設定します。
        • orderby – デフォルトは「名前」による順序ですが、「id」、「slug」、または「menu_order」に設定することが可能です。 もし指定したidで並べたい場合は、orderby="include"
        • orderorderbyで設定した方法で、カテゴリの順序が昇順 (ASC) か降順 (DESC) かを指定します。 デフォルトは ASC です。

        商品カテゴリシナリオの例 ページトップへ

        Scenario 8 – Show Top Level Categories Only

        ページ上でトップレベルのカテゴリだけを表示してサブカテゴリを除外したいと想像してください、それは次のショートコードで可能になります。

        
        

        商品ページ トップに戻る

        IDまたはSKUで単一の商品ページを完全に表示します。

        Args:

        array( 'limit' => '12', 'columns' => '4', 'orderby' => 'title' )

        limit 引数 トップに戻る

        注意: ‘limit’ ショートコード引数は、1ページに表示される商品の数を決定します。 ショートコードにページネーションは付きません。

        Add to Cart Back to top

        単一商品の価格とカートへの追加ボタンをID別に表示します。

        Args:

        array( 'id' => '99', 'style' => 'border:4px solid #ccc; padding: 12px;', 'sku' => 'FOO' 'show_price' => 'TRUE' 'class' => 'CSS-CLASS' 'quantity' => '1'; )
        
        

        Add to Cart URL Back to top

        単一商品のカートへの追加ボタンにID別に表示するURLを指定します。

        Args:

        array( 'id' => '99', 'sku' => 'FOO' )
        
        

        WooCommerceでないページでWooCommerce通知を表示する トップページへ戻る

        により、WooCommerceではないページで、(「商品がカートに追加されました」など)の通知を表示することができます。 9268>

        Troubleshooting Shortcodes Back to top

        ショートコードを正しく貼り付けたのに表示がおかしい場合は、ショートコードを <pre> タグで挟んで埋め込んでいないことを確認してください。 これはよくある問題です。 これらのタグを削除するには、ページを編集し、[テキスト] タブをクリックします。

        もう一つのよくある問題は、まっすぐな引用符 (") が巻き線引用符 (") として表示されてしまうということです。 ショートコードを正しく動作させるには、ストレートのクォーテーションマークが必要です。

コメントを残す

メールアドレスが公開されることはありません。