WIXのCMSを活用して店舗リストやブログ一覧などを実装する
- #WIX
- #リピーター
- #初心者向け
WIXのCMS（コンテンツマネジメントシステム）は例えばブログ記事や商品一覧、スタッフ紹介、店舗リストなどを実装するときに役立つ機能です。
この記事ではCMSのコレクションをWebサイト内の要素に接続して、コンテンツの中身に反映させる基本的なやり方をご紹介します。
目次
WIXのCMSについて
WIXにはCMS（コンテンツマネジメントシステム）という便利な機能があります。CMSは簡単にいうと、たくさんの情報を一括で管理して、Webサイトの任意の箇所へ反映できる仕組みのことです。
たとえば
- 飲食店のメニューをCMSで管理して、おすすめメニューだけをサイトへ表示させる
- スタッフの情報をCMSにまとめて、顔写真とプロフィールを一覧表示する
- ブログ記事をカテゴリごとに一覧表示する
などのシーンで使うことができます。
CMSをうまく活用すると更新作業もラクになるので、ぜひ積極的にWebサイト制作に取り入れていきたいですね。
CMSとリピーターを使って店舗リストを実装する
以前「架空の店舗リストの体裁を整える」というテーマで記事を書きました。
今回はこちらの架空店舗リストをもとにして、WIXエディタで店舗リストページを制作してみたいと思います！
CSV形式の店舗リストを用意する
WIXのCMSではコレクションという形で情報を一括管理します。コレクション内のアイテムは一つずつ手打ちすることももちろんできますが、CSVファイルをインポートして使うことも可能です。
今回の店舗リストはカテゴリ別に分けて表示したいので、インポートするCSVファイルもカテゴリ別に分けていきます。
（Googleスプレッドシートからカテゴリ別にCSVファイルを出力する方法については以下の記事で紹介しています！）
ちなみに、CSVファイルを分けるのが面倒くさい！という方（私です…）は、次の記事もぜひご一読ください。こちらではWIXの開発モードを使ってカテゴリ別店舗リストを一発で出す方法を解説しています。
CMSのコレクションを作成する
さて、インポートするCSVファイルの方は準備が整いました。今度はWIXエディター側の準備を進めましょう！
まずはサイトにCMSを追加します。
サイドバーの「CMS」→「サイトに追加」を選択します。
次に「コレクションを作成」をクリックします。
続いてコレクションの作成方法を選択します。「ゼロから始める」を選びましょう。
すると上のような画面になります。「Title」右横の3点リーダから「編集」を選ぶと項目の名前が変えられます。
必要に応じて「フィールドを追加」して、店舗リストに必要な項目を作成していきます。
必要な項目が揃ったら、画面右上の「その他のアクション」→「アイテムをインポート」で用意したCSVファイルを読み込みます。
インポート元とインポート先の項目が正しく選択されているかを確認して「次へ」を押します。
これでCSVファイルの内容がコレクションに反映されました！ちなみに左上にあるコレクション名をダブルクリックすると、コレクションの名前を変更することができます。
他のカテゴリ分も同様にコレクションを作成し、アイテムをCSVファイルでインポートしていきます。
リピーターをCMSに接続する
最後に、ページ内の要素にCMSコレクションを接続します。
今回は、
- リピーターで店舗情報を表示
- お店のカテゴリごとにまとめる
こんな感じの構成にしました。
リピーターを選択するとメニューアイコンの右端に「CMSに接続」というアイコンがあるので、こちらをクリックします。
画面右側に出てくる「データセットを選択」から、該当カテゴリ分のコレクションを選択します。
あとはリピーター内のテキストを選択し、同じく右端のCMSアイコンから適切な接続先につなげれば自動的にコレクションの情報が反映されます！
おまけ：完成に向けた微調整
すべてのカテゴリ分を作業すれば、店舗リストの実装完了です！
こんな感じでコレクションの内容がきちんと反映されています。
店舗情報を編集する
店舗情報の修正や削除が必要になったときはコレクションの方を編集すれば、ページの情報もきちんと連動して変更されるようになっています。
試しに、カフェそよ風をカフェBreezeに変更し、パスタの丘を削除してみます。
するとページの方も自動的に情報が更新されます。便利ですね！
リピーター内アイテムの見た目を整える
あとは、このままのデザインだと店舗名の長いものだけ改行が発生して、見た目がガタガタになっていますね。
そこで、ツールバーから改行なしのアイテムの高さを、改行ありのアイテムと同じ高さに設定します。
これでリピーターの見た目も整い、めでたく店舗リストが完成しました！
まとめ
WIXのCMSは、Webサイトの修正や更新をラクにしてくれる便利な機能です。今回のような店舗リストのほかにもブログ記事一覧やスタッフ紹介、商品紹介などさまざまな場面で使えるので、CMS機能を使いこなせるようになりたいですね。
もっともっとラクに更新したい！という方はぜひ次の関連記事も参考にしてみてください。