Wixでトップページに新着情報欄を作る方法

Wixでトップページに新着情報欄を作りたい時、CMSを使う方法はよく見かけます。

ただ、私が以前触った時は「一覧は作れても、記事本文は写真1枚＋文章だけの簡易的なものしか作れないのかな」と思っていました。

でも今回あらためて触ってみると、リッチコンテンツ を使えば、CMSでもブログみたいに自由に記事を書けることが分かりました。

そこで今回は、

• トップページに新着情報欄を置きたい

• ボタンを押したら各記事ページへ飛ぶようにしたい

• 記事本文はブログのような感覚で書きたい

という形を作る流れをまとめます。

今回の進め方

今回は、cmsを使うのが初めての人にも理解しやすいようにプリセットから土台を作って調整していく方法で進めました。

また、Wix CMSを開くと分かるのですが

サンドボックスコレクション と ライブコレクション があるので、今回はまずサンドボックス側で作業し、最後に 「コンテンツを同期」 でライブに反映する形にしています。

慣れている方なら最初からライブコレクションを使っても大丈夫ですが、今回は流れを確認しながら進めたいので敢えて前述した流れで進めていきます。

1. プリセットから土台を作る

まずはCMSのプリセットから、一覧ページと記事ページの土台を作ります。

今回は、一覧と詳細ページの流れが見えやすい アイテムリスト系のカスタムプリセット から始めました。

2. コレクションの項目を確認する

プリセットで作ると、最初からいくつか項目が入っています。

• Title＝記事タイトル

• Image＝イメージ画像

• アイテム（Item）＝記事ページ※削除できません

• アイテム（List）＝記事一覧ページ※削除できません

•  Item Page Text ＝記事のテキスト欄

  
  

今回やりたいのはブログみたいに書ける記事本文だったので、デフォルトの Item Page Text を削除して、リッチコンテンツを入れるようにしていきます。

3. Item Page Textを削除する

まずItem Page Text のフィールドを削除します。

警告が出ますがそのまま進めてOKです。

削除した時点では、記事本文を入れる項目がない状態になっています。

4. 本文用にRich Contentを追加する

次に、本文用の項目を新しく作ります。

ブログみたいに書きたいのでリッチコンテンツを選択します。

表示確認のために、テスト用の記事を1件入れました。

ブログを書く時みたいに見出しをつけたり、画像を任意の場所に挿入したりurlも貼れます！

5. 動的アイテムページを整える

次に、各記事の詳細ページになる動的アイテムページを整えます。

タイトル用のテキストを Title に接続された状態かと思いますので、

今回サブタイトルの接続先を 公開日 に変更しました。

タイトルや日付のような普通のテキスト項目は、既存のテキスト要素を使い回すだけでOKです。

表示させる必要のない項目は削除しましょう。

6. Rich Contentを記事ページに表示させる

Rich Content フィールドを作っただけでは、この時点では記事ページには表示されていません。

左の「＋」から Rich Content パーツを追加して、それを接続する必要があります。

左の ＋ から Rich Content パーツを追加します。

• 追加したパーツを選択する

• Connect to CMS を押す

• さっき作った本文用の Rich Contentフィールド に接続する。

※分かりやすいようにフィールドの名前を「本文」にしました。

これでさっき入れた記事本文がちゃんとページに表示されるようになります。

7. トップページにリピーターを置く

次にいよいよ本題のトップページに新着情報欄を作っていきます。

今回は、空のリピーターを使って、その中に必要な要素を置く形にしました。

パーツの追加→リスト→空のリピーター（３行）

置くもの

• 日付表示用テキスト

• タイトル表示用ボタン

今回は、押したら記事へ飛ぶ仕組みを作りやすいように、タイトル部分はボタンで作っています。

8. リピーターにデータセットを接続する

ここは、先にリピーター本体をつなぐ流れの方が分かりやすかったです。

• リピーター本体を選択する

• Connect to CMS を押す

• データセットを追加する

• 今使っているコレクションを選ぶ

この時点で、リピーター全体がコレクションとつながった状態になります。

【接続】のところにボタンとテキストとリピーターに置いた要素が表示されているかと思いますので、それぞれを表示させたいフィールドを選択して接続させます。

今回タイトルを押したら該当記事ページへ飛ぶようにしたいので、【クリック時の動作を選択】でアイテム (Item)を選択します。

9. 表示件数と並び順を選択

データセット設定から細々した設定をしていきます。

今回トップページには常に2件だけ表示させたかったので

【読み込みごとのアイテム数】を 2 にしました。

次に並び替えの部分を設定します。

CMS と同じ順序にすればダッシュボードと同じ並びになります。

新しく並び方を設定したい場合は【+新しい並び替えを追加】から作成してください。

例

• フィールドを 公開日 にする

• 順番を Descending（降順） にする

10. 最後にコンテンツを同期する

今回はサンドボックス側で作業していたのでこのままでは実際には表示されません。

最後にライブへ反映します。

• 右上の 「コンテンツを同期」 を押す

• サンドボックスのコンテンツをライブデータに同期させる

• 公開サイト側で表示を確認する

これで公開した時にちゃんと表示されるようになります。

テキストサイズなどのレイアウトを調整すればお知らせ欄の完成です！

まとめ

CMSを使う良さは、ブログとは別で新着情報を管理できることだと思います。

お知らせだけを一覧で整理したり、トップページに最新情報を表示したり、記事ページへつなげたりと、役割を分けて管理しやすいのが便利です。

またCMSは最初は複雑に感じますが、

• コレクション

• 動的ページ

• データセット

• リピーターとの接続

  
  

といったCMSの基本的な仕組み分かると、新着情報欄だけでなく、実績一覧やメニュー紹介など、別のコンテンツにも応用しやすくなるのでぜひ作ってみてくださいね。