Wix StudioでもWix Editorでも、私がいつも苦労するのがCMSの接続。一番苦手なところでした。でもWixを使っている以上、CMSとはいつか必ず向き合わなければいけない時が来る・・・！
というか、このCMSを扱えるようになるだけでサイト制作の効率はグッと上がりますし避けて通れない道です。
ということでWixStudioでのCMS接続やり方の備忘録です。
WixStudioでCMSを接続する方法
今回はニュース記事をCMSで管理する方法の備忘録ですが、ニュース記事に限らず商品紹介ページだったりあらゆるジャンルで同じやり方でできます。
①サイトにプリセットを追加
これがサイト内でCMSに入力した情報が表示される場所となる。
プリセットから好きなデザインをセレクトしても良いし、編集画面から「空のセクション」を追加して自分で１からデザインすることも可能。
当然ですがこの時CMSに入力する項目と同じ項目をプリセット内にも設定する必要がある。
ニュース記事なら「タイトル」「サブタイトル」「日付」「画像」「もっと見るボタン」など。
②コレクションを作成
CMSマークを開き、「コレクションを作成」をクリック。
コレクションを作成するときに、AIやCSVからインポートという方法もありますが、最初は白紙テンプレートで作っていくのが良いと思います。
③項目の入力
エクセルのような画面が出てくるので「＋ボタン」で表示させたい項目を一つずつ入力していく。
この場合はニュース記事なのでタイトル、サブタイトル、画像、日付、リッチテキストの５つの項目で作っています。
画像左上に「news」と記載がありますが、このCMSの名前を自由に設定できます。今回はニュース記事なのでnewsにしています。
リッチテキストというのは長文を入力できるもの。ブログや記事などはこのリッチテキストが便利です。
似たようなもので「リッチコンテンツ」というものがありますがここでリッチコンテンツを選んでしまうとうまくいきませんでした。リッチコンテンツの使い道はまたいつかの機会に。
④CMSで入力した項目をサイト内の表示させたい場所に接続
例えば「日付」を選択して鎖マークをクリック。画面右側の編集画面でも鎖マークを選び、
データセットの選択→テキストの接続先も「日付」を選択。
これでCMSの日付とサイト内の日付の表示が連動しました。
（データセットに初めて接続するときは、データセットの作成ボタンを押します。CMSの名前と同じ名前でデータセットを作ると管理しやすいです。）
同様に記事のタイトル、サブタイトル、もっと見るボタンなども接続すれば完了です！
指定の記事を【表示・非表示】する方法
CMSの中に入っているデータで「この記事だけ非表示にしたい！」なんていうこともできます。
①「その他のアクション」→コレクションの設定を選択。
②「アイテムの表示設定をコントロールする」をONに
すると、下記のように表示、非表示が選択できるようになります！
今日はこの辺で。
CMSは他にもいろいろアレンジが可能で、１つの記事には書き切れないくらいです。
１つのCMS管理で、サイト内の別々のページにそれぞれ表示させるという「情報の出し分け」などもできるので、それはまた次の記事でご紹介します！
CMS接続に慣れて、サイト制作の効率化をしましょう！
私もまだまだ知らない機能が盛り沢山なので、発見次第、備忘録増やしていきますよ🎵
misolo_design
Hiromi Saita
Comments