画像を並べた商品カタログを WordPress のグリッドブロックで作る
対馬 俊彦プラグインなしで作る画像を並べた商品カタログ
WordPress 本体がアップデートにより機能強化されて、WordPress だけでできることが増えています。この記事では、プラグインを使わずに WordPress の標準機能だけで、コードを書かずに、以下のような画像を並べた商品カタログを作るやり方を紹介しています。
※WordPress 7.0 以降のバージョンをお使いのことが前提になっています。
上記のようなレイアウトのコンテンツを作るとき、ちょっと前までは カラムブロック を使っていましたが、この記事では グリッドブロック を使うやり方を紹介しています。
グリッドブロックを使うことにより、カラムブロックではできなかった以下の特徴の ② と ③ を実現しています。
商品カタログの特徴
- 画像をクリックすると個々の商品（料理）のページが表示されます。
- 画面幅が大きい PC では4カラムで、スマホでは2カラムで表示されるレスポンシブ対応のレイアウトです。このページを画面幅を変えて表示して確認してみてください。これ、いままではコードを書かないとできなかったことなんです。
- 編集画面でドラッグアンドドロップによりかんたんに商品の並び順を入れ替えることができます。これも WordPress に最近追加された機能です。
- ノーコードで（CSS を使わずに）作ってあります。
商品カタログの作り方
① グリッドブロックを追加
カタログを置きたい場所にグリッドブロックを追加します。
② グリッドブロックのレイアウト
グリッドブロックのレイアウトを以下のように設定します。
（この部分はお好みで調整してください）
| 最大幅 | 4 |
| 最小列幅 | 180px |
| ブロックの間隔 | XS |
③ 画像を追加
＋ をクリックして画像を追加して、画像の解像度を 中 に設定します。
④ キャプションを追加
[キャプションを追加] をクリックして、画像の下に商品名を入力します。
⑤ リンクを設定
[リンク] をクリックして、商品の詳細ページへのリンクを設定します。
⑥ 画像にドロップシャドウを設定
画像のドロップシャドウを設定します。
（この部分はお好みで調整してください）
ここまでの作業で商品ひとつ分が完成しましたので、この画像を複製して商品を増やしていきます。
⑦ 画像を複製
⑧ 追加した画像の設定
複製してできたブロックの画像を置換して、キャプションを書き換え、商品の詳細ページへのリンクを設定します。
そして、残りの商品を⑦・⑧の手順で追加していけば完成です。
ギャラリーブロックを使うやり方もあります
WordPress のギャラリーブロックを使って商品カタログを作ることもできます。
こちら↓がギャラリーブロックを使って作った作例です。
ギャラリーブロックを使う場合、気になる点があります。
- 商品の数によっては画像の大きさが揃わなくなる
- 画面幅によって画像の大きさが激しく変化する
上記の気になる点を解消するには、以下の記事で紹介している CSS を書く必要があります。
ギャラリーブロックの画像の大きさを揃える - WordPress 7.0 対応最新版 | WordPress のオンラインレッスンとサポート | パソコン教室くりっく
編集画面でも同じ大きさで表示されるので、気持ちよく作業ができます。画面幅によって画像の大きさが極端に変わらないようにしています。
WordPress のオンラインレッスンとサポート | パソコン教室くりっく 
投稿者プロフィール
- 魚沼情報サービス・ベクトル公式テクニカルパートナー
-
【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。
Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。
遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。
オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。
デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。
ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。
メールでのお問い合わせはこちら
