コメントWooCommerce(ウーコマース)では、画像付きの商品リストを表示させるショートコードが標準で用意されています。今回はそのショートコードについて、よく使いそうなものを中心に紹介・解説します。ショップのトップページのデザインにも使えるので覚えておくと便利です。Categories:商品カテゴリー(複数)のリストショートコードとは?簡単に言うと、”少しのパラメータ設定で(自分でプログラムすることなく)様々な便利機能を呼び出すことができる、おまじないのようなもの”です。これはWordPressの機能です。WordPressの固定ページや投稿などの編集可能な場所にショートコードを貼り付けるだけで、記事リストや画像ギャラリーを表示させることができます。WordPressの機能「ショートコード」について知らない方はこちらの記事が参考になると思います。WordPressのショートコードとは?(Hivelocity)WooCommerceのショートコードの使い方ここではWooCommerceで用意されているショートコードの中で商品表示に関連するものについて説明します。columns="4"]登録が新しい順に商品リストを表示します。Products※次項以降については、基本的に表示例は載せていません。(商品リストの並び順や絞り込み条件が変わるだけでデザインはすべて同じです。)[パラメータ]※使用例の値はすべてデフォルト値です。パラメータを指定しない場合はこの値が使用されます。商品の表示数を指定します。※per_pageという名称ですが、これは単に表示数を指定することのみに使用されます。WooCommerceのショートコードはページネーションに対応していないので、どんなに表示数が多くてもショートコードを設置したページ内にすべて表示されます。1行あたりの表示数を指定します。商品リストのソートキーを指定します。使用例:orderby=”date”[orderbyに使用できる値]date(登録日)、title(商品名)、modified(更新日)、rand(ランダム)などが使用可能です。こちらで使用可能な値について詳しく解説されています。ソート方法(昇順/降順)を指定します。使用例:order=”desc”[orderに使用できる値]desc:降順asc:昇順(逆の順番になります。この場合、商品登録が古い順になります。columns="4"]おすすめ商品のリストを表示します。おすすめ商品は、WordPress管理画面>「商品」で任意の商品に星マークを付ける(白抜きの星マークをクリックして星マークの内側に色が着いた状態にする)ことで設定できます。Productsと同じです。per_page="12"]セール中の商品のリストを表示します。Productsと同じですが、orderby、orderのデフォルト値が異なります。商品の表示数を指定します。1行あたりの表示数を指定します。商品リストのソートキーを指定します。ソート方法(昇順/降順)を指定します。per_page="12"]売上個数順に商品をリスト表示します。(WooCommerce内の受注データを元にしています。)[パラメータ]per_page、columnsのみです。Productsと同じです。per_page="12"]レビューの平均評価が高い順に商品をリスト表示します。Productsと同じですが、orderby、orderのデフォルト値が異なります。商品の表示数を指定します。1行あたりの表示数を指定します。商品リストのソートキーを指定します。ソート方法(昇順/降順)を指定します。ID又はSKUを指定して商品を表示します。IDの調べ方]2つの調べ方があります。WordPress管理画面>「商品」で一覧表示されている商品にマウスポインタを合わせると、ID:○○○と表示されます。商品登録(編集)画面を表示している時にWEBブラウザのアドレスバーに表示されるURLの末尾に、post=○○○という部分があります。[SKUの調べ方]商品登録(編集)画面の「商品データ」欄の「一般」タブにSKUの項目があります。