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