「取扱商品一覧ページを簡単につくりたい」
「商品の入れ替えが多いので、簡単に差し替えられる商品一覧ページをつくりたい」
画像は3つ、4つと横に並んだ商品一覧ページ。
整然と並ぶとスマートですし、何よりお客様に一度に見てもらえるメリットがあります。
https://ladies-sample.shop-pro.jp/
ただ、商品一覧ページをつくるときは、今後の更新作業が問題になりがちです。
Webデザイナーさんに現状の商品一覧ページをつくってもらうのは簡単なことですが、商品が入れ替わるたびに修正を頼むとコストがかさみます。
特に食品や雑貨、アパレルなど。季節で商品がガラッと変わるものは一回の更新で一度に入れ替えることができるページをつくっておきたいですね。
WordPressでつくられたWebサイトであれば、プラグインひとつで商品一覧ページをつくることができます。プラグイン「Content Views」を活用すると、固定ページやエントリー記事内に、ショートコード1つを載せるだけでキレイに写真が並んだ一覧ページがつくれます。
一覧ページは、一気にWebサイトを垢抜けたデザインに見せてくれます。なんとなく上から下に情報が流れるだけの”ブログっぽい”サイトから、法人・ネットショップらしいデザインになります。
この記事では、固定ページに商品一覧ページをつくっていく過程をレポートいたします。
◯最終ビジュアル
https://umebuta.com/product
スマートフォンやタブレットから見てもきれいに並びます。
画像からはそれぞれの記事／ページへリンクしています。
とても簡単ですので、ぜひ以下の通りに作業をしてみてください。
１．「Content Views」をインストール
プラグイン「Content Views」は、WordPress公式プラグインです。
エラーやセキュリティ面の心配もなく、安心して利用できます。
WordPress管理画面より、「Content Views」を検索し、有効化してください。
サイドバーに「Content Views」のメニューが出れば成功です。
２．「Content Views」の設定・手順
次に一覧にするリストの新規作成をします。
いくつもつくることができるので、季節ごとにピックアップする商品が異なる場合などはそれぞれでつくっておくと便利です。コードを張り替えるだけで表示する商品を入れ替えることができます。
①新規追加ボタンを押す
②タイトルを入力し、投稿ページ/固定ページのどちらを含めるかを選択
タイトルは作成者側が区別のために使うので、わかりやすい名前にしてOK。日本語も大丈夫です。
投稿／固定の選び方は、一覧に含めたいページがどちらのタイプでつくられているかで選び方が変わります。記事投稿（entry）でつくられていれば”投稿”を、固定ページ（page）でつくられていれば”固定”を選びます。
ここまでで基本設定は終わりです。
③一覧の中身設定
その一覧の中にどのページを含めるか、設定していきます。
※投稿もしくは固定ページの全てのページを含めるのであれば、この③の設定は不要です。
・Include only：一覧に表示させたいページのID
・Exclude：一覧から省きたいページのID
このどちらかを入力します。一覧にたくさん表示させるのであれば、省きたいページを入れたほうが楽ですし、逆なら表示させたいページを入れてピックアップさせます。
ページIDは、該当ページを管理画面で開くと、URLバーに表示されます。
ページIDを調べるときは、URLバーからメモを取ります。
数字と数字の間にはコンマ（,）を入れていきます。
このID設定が面倒なのですが、費用を払ってプロ版にすると解消されます。
プロ版は、1つのカテゴリやタグに含まれる記事をすべてピックアップして一覧表示にする機能があります。（以下の項目で説明します）
プロ版にしなくても、ページIDの設定だけ少し面倒ですが、きれいな一覧ページをつくることは可能です。ページ数がそれほど多くなければ、無料版で十分です。
２．「Content Views」でつくったリストをページに載せる
つくったリストを表示させるため、コードをコピーします。
このコードを表示させたいページのその部分に貼るだけで、さきほどつくったリストがページに表示されます。
↓↓
きれいに並びました！
商品を一覧で見せたいという目的であれば、デザインもこのままで十分だと思います。
３．「Content Views」のプロ版について
このプラグインで悩むところは、ページIDの設定を毎回手動でするのか？というところです。一度設定してしまえば大した手間ではないので、無料版のままでも十分です。
もし予算があって、人手が足りない場合は、プロ版の導入をご検討ください。
カテゴリやタグで絞りこめるので、リストに掲載する商品や画像の選択がすごく楽になると思います。
４．まとめ
このプラグインは商品一覧ページだけでなく、ブログや作品のポートフォリオなどにも活用できます。制作側としても過去に書いて埋もれてしまっているページの情報整理がしやすくなります。
コードを貼るだけなのでいくつもリストをおくと便利です。
ちなみにプロ版は1サイト限定のIDであれば、年間39ドルです。月々400円程度の出費ですので、リストの利用が多くなってきたら課金してもいいかもしれません。