商品テンプレートと商品ショートコードの使い方１ – ネットショップ管理プラグイン - WordPressのプラグイン販売サイト CMS×WP

ネットショップ管理プラグインの商品の見せ方は、商品ショートコードと商品テンプレートで変更します。商品ショートコードには数多くのオプションが用意されており、商品の表示を自由にカスタマイズできるようになっています。

ここでは、商品表示の仕組みを簡単に解説し、事例を挙げながら、商品ショートコードと商品テンプレートの使い方を解説していきたいと思います。

商品表示の仕組み

まず、商品がどのように表示されるかは、ネットショップ管理プラグインのオプション設定にある商品テンプレートで決まります。商品テンプレートはいくつでも増やすことができ、商品の詳細ページ用や商品リスト用など使い分けることができます。

商品を追加すると、投稿が自動生成されますが、その投稿欄には、[product] という商品ショートコードのみが入力されています。

[product] ショートコードには様々なオプションがありますが、何も指定していない投稿欄の [product] は、自動的にその投稿に関連付けられた商品が表示されるようになっています。そして、商品編集時に指定した商品テンプレートが自動的にセットされます。つまり、投稿欄にある [product] は、例えば、[product post_id=3 template=0] というショートコードと同じ意味、ということになります。

商品編集時に指定できる商品テンプレートの項目は、商品詳細ページ用の商品テンプレートと商品リスト用の商品アーカイブテンプレートです。商品テンプレートは、テーマの single.php などで使用され、商品アーカイブテンプレートは、archive.php、 category.php、search.php などで使用されることになります。

アドバンストモードをクリックすれば、携帯電話向けやスマートフォン向けで使用するテンプレートを分けて指定することも可能です。

オプション設定の環境設定で、デフォルト商品テンプレート、デフォルト商品アーカイブテンプレートを指定することができます。なお、デフォルト商品テンプレートを変更しても既存の商品の商品テンプレートは変更されません。新規商品登録時に適用されるのみです。もし、既存の商品の商品テンプレートをまとめて指定しなおしたい場合は、オプション設定にある商品テンプレート一括変換ツールをご利用ください。

商品一覧の表示方法

商品一覧ページを作成するには二通りの方法があります。一つは固定ページに、[product] ショートコードを利用して商品一覧を出力する方法と、もう一つは、カテゴリーやアーカイブのページをそのまま商品一覧として利用する場合です。後者の場合は、デザインを調整するためにテーマの編集が必要となります。

固定ページでの [product] ショートコードによる商品一覧

固定ページの投稿欄に、template（商品テンプレート）、posts_per_page（商品数）、category_id（カテゴリID） の3つのオプションを付加した、[product] ショートコードを入力すると商品一覧を出力することができます。

例えば、以下のようなコードです。

[product template=1 posts_per_page=4 category_id=1]

上図では、自動的にページナビゲーションが付加されています。ページナビゲーションを表示させない場合は、以下のように、pagenavi=0 を追加します。

[product template=1 posts_per_page=4 category_id=1 pagenavi=0]

その他、商品一覧の場合によく使用するオプションに、order_select（並べ替えを表示するか）、display_select（全商品または在庫ありの商品の選択リストを表示するか）、select_type（表示形式をセレクトボックスにする）、order & orderby（順序。昇順ASC、降順DESC）、などがあります。

[product template=1 posts_per_page=4 category_id=1 order_select=1 display_select=1 select_type=select orderby=product_price order=desc]

ところで、固定ページとカテゴリーのスラッグを一致させ、URLを共通にすると、カテゴリーのページよりも固定ページが優先して表示されます。上述の、固定ページでの [product] ショートコードによる商品一覧をこのカテゴリーページの代わりに固定ページで表示するようにすれば、テーマでカテゴリーページを編集しなくても固定ページをカテゴリーページとして商品一覧として出力することも可能です。

また、商品一覧を表示する [product] ショートコードはトップページなど任意の場所に好きな商品一覧を出力することができるので、ページの充実が図れると思います。

カテゴリーやアーカイブのページで商品一覧

カテゴリーやアーカイブのページで商品一覧を表示する場合、ブログのようなデザインで表示するのであれば特に何も設定する必要はありません。上述した通り、商品ごとの商品アーカイブテンプレートが適用されます。

ただ、上図のように一般的なテーマではブログを前提にしていると思いますので、タイトルやタグなど商品リストとして不要な項目が表示されてしまいます。そこで、テーマの archive.php や category.php、また、search.php などを編集して、タイトルやタグの出力をなくし、スタイルシートを調整することで、以下のように商品リストっぽくカスタマイズすることは可能です。

カテゴリーページや検索結果ページにも、並べ替えボタンを表示することは可能です。only_select を指定します。

<?php echo do_shortcode(‘[product order_select=1 display_select=1 select_type=select only_select=1]’); ?>

同様に、ページナビゲーションをプラグイン側から出力することも可能です。only_pagenavi を指定します。

<?php echo do_shortcode(‘[product option=pagenavi pagenavi=1 only_pagenavi=1]’); ?>

まとめ

少し長くなってきましたので、商品テンプレート内で設定する商品ショートコードの詳しい説明は別の記事に回したいと思います。