こんにちは、Webマーケティング業務の内製化支援サービス|REBUILD WEB-MKTG-SITE を担当している宇都宮です。
Webサイトを運営する際に、Wordpressに代表されるCMS(コンテンツ管理システム)を導入するケースは多いのではないでしょうか。CMSを導入することで、ページ上に表示するコンテンツを、ブラウザでアクセス出来る管理システム上で編集できるようになります。Wixではコンテンツマネージャーを活用することでデータの登録、管理ができるようになり、データと連動した動的なページを作ることができます。今回の記事では、Wixのコンテンツマネージャーを活用して動的なページを作る方法をご紹介したいと思います。
コンテンツマネージャーとは
コンテンツマネージャーはブラウザから追加、操作できるデータベースの様なものです。コンテンツマネージャーにコレクションと呼ばれる表形式のデータを追加することができます。コレクションそのもののデータ構造や、コレクションへのデータ登録、編集といった操作はブラウザの管理ツールから行えます。
コンテンツマネージャーにコレクションを追加する
コンテンツマネージャーの追加方法はいくつかありますが、今回は Wixのエディタ上からコンテンツマネージャーを追加してみましょう。エディタを開き「追加」>「コンテンツマネージャー」>「サイトに追加」の順にクリックしましょう。
![コンテンツマネージャーの追加方法](https://static.wixstatic.com/media/d61318_e45afb2cf8d14d3e89242559366ac239~mv2.png/v1/fill/w_980,h_618,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/d61318_e45afb2cf8d14d3e89242559366ac239~mv2.png)
テンプレートが表示されるので今回は白紙のテンプレートを選択してみます。白紙のテンプレート以外にも「サービス一覧」や「ポートフォリオ」など、いくつかの便利なテンプレートも用意されています。
![白紙のテンプレートの選択](https://static.wixstatic.com/media/d61318_9268801e995440bdacb9958a3790de9d~mv2.png/v1/fill/w_980,h_611,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/d61318_9268801e995440bdacb9958a3790de9d~mv2.png)
白紙のテンプレートを選ぶと、ページタイトルを入力する画面になるのでページタイトルを入力してページを作成ボタンをクリックしましょう。
![ページタイトルの入力方法](https://static.wixstatic.com/media/d61318_2f0b1d8b01e74a24be3cfb6f3687b22e~mv2.png/v1/fill/w_980,h_613,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/d61318_2f0b1d8b01e74a24be3cfb6f3687b22e~mv2.png)
コレクションで管理する項目を設定する
コレクションが自動で生成されコレクションの一覧画面が表示されます。初期項目としてタイトル、画像、概要やシステム管理項目が登録されたコレクションが出来上がりました。コレクションで管理する項目の追加、削除や、コレクションに登録するデータもこの画面から管理することができます。
![コレクションで管理する項目の設定方法](https://static.wixstatic.com/media/d61318_d511d7891d1e40b5aa525c5dcedcb9ed~mv2.png/v1/fill/w_980,h_570,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/d61318_d511d7891d1e40b5aa525c5dcedcb9ed~mv2.png)
項目を追加する際はフィールド名、フィールドキー、フィールドタイプなどを指定します。フィールドキーは後から変更できないので注意しましょう。また、フィールドキーはプログラムコード上に記載することもあるので、英数字での設定がおすすめです。
![コレクションフィールドの設定方法](https://static.wixstatic.com/media/d61318_39967dbcd4ef4a389f5b47ece37accee~mv2.png/v1/fill/w_980,h_571,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/d61318_39967dbcd4ef4a389f5b47ece37accee~mv2.png)
フィールドタイプも豊富に用意されているようですね。管理するデータにマッチするものを選びましょう。
テキスト
リッチテキスト
画像(.jpg 、.png および .gif形式)
Boolean 型
数値
日時
URL
動画
オーディオ
メディアギャラリー
時刻
住所
参照
タグ
コレクションにデータを登録する
データの登録はコレクションの一覧上から追加することができます。表形式上で追加する場合は、表に直接データを入力します。
![コレクションにデータを登録する方法](https://static.wixstatic.com/media/d61318_bfc57dbb154a43e4b2e14fe3b173f5f1~mv2.png/v1/fill/w_980,h_570,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/d61318_bfc57dbb154a43e4b2e14fe3b173f5f1~mv2.png)
表の表示方法をリスト形式にすると、データ入力用の画面からデータを登録することができます。
![コレクションデータの入力画面を表示する方法](https://static.wixstatic.com/media/d61318_343e0ee69e7648a5923061342992aef0~mv2.png/v1/fill/w_980,h_571,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/d61318_343e0ee69e7648a5923061342992aef0~mv2.png)
データ量や入力する項目数が多い場合など、コレクションの内容に合わせて適切な入力形式を選択することができます。
![コレクションデータの詳細入力画面](https://static.wixstatic.com/media/d61318_223758a654aa48ccba4b7acab5f01fe0~mv2.png/v1/fill/w_980,h_573,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/d61318_223758a654aa48ccba4b7acab5f01fe0~mv2.png)
コレクションと連動する動的ページをWixエディタで編集する
今回ご紹介した方法でコレクションを追加すると、コレクションと連動した一覧ページと詳細ページが自動で追加されています。データの連携は既にできているので、あとはWixエディタ上でページのレイアウトを編集しましょう。
![コレクションと連動する動的ページの編集方法](https://static.wixstatic.com/media/d61318_da420b1eb20547ac960ea7a8f9106635~mv2.png/v1/fill/w_980,h_571,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/d61318_da420b1eb20547ac960ea7a8f9106635~mv2.png)
まとめ
いかがでしたでしょうか。今回の記事では「コンテンツマネージャー」の機能を使って、WixをCMSとして活用する方法をご紹介しました。最新のニュースや製品紹介など、データと連携したサイトを作りたい場合に最適の手法です。是非、チャレンジしてみてください。
シンメトリックでは、Webサイト運用の内製化支援サービス|REBUILD WEB-MKTG-SITE を提供しています。Wixサイトの制作代行から、SEO対策、回遊分析の専門家が、お客様と二人三脚でアクセスデータの分析とサイト改善のPDCAサイクルを実践するサービスです。サイトの内製化をご検討中の方は、是非、お気軽にお問い合わせください。
Comments