Studio CMS記事にカテゴリーやタグを表示する方法
Tips:Studio CMSとは
Studio CMSはブログサイトの記事やポートフォリオサイトの作品など定期的に追加・更新するコンテンツを効率的に管理できる機能です。コンテンツはCMSダッシュボードという専用の画面で管理し、そのコンテンツをどのようにWebサイトに表示するかはデザインエディタで編集します。
この記事ではCMS記事などのアイテムページに単一のカテゴリーと複数のタグの両方を表示する手順〜詳細ページへのリンク設定までをご紹介します。記事や作品、商品やイベントページへのタグ表示など様々な用途でご利用いただけます。
CMSデータの仕組みを先に理解しておくとスムーズです。詳細は、CMSコンテンツの仕組みをご覧ください。
CMSダッシュボードでコンテンツを追加する
Studio CMSのデータは4種類(モデル、アイテム、プロパティ、コレクション)です。記事、カテゴリー、タグのコンテンツデータはそれぞれモデルを作成しそれらにアイテムを追加します。
1. 記事モデルの追加
CMSダッシュボードへアクセスし、記事タイプモデルを追加します。このモデルではブログ記事を管理します。
ここにアイテムを追加します。
2. カテゴリーモデルの追加
カテゴリーを管理するためのモデルを追加します。モデルタイプはカテゴリータイプを選択します。カスタムタイプでも問題ありません。
ここにアイテムを追加します。
3. タグモデルの追加
タグを管理するモデルを追加します。モデルタイプはカスタムタイプを選択します。カテゴリータイプでも問題ありません。
ここにアイテムを追加します。
4. 記事モデルに「カテゴリー」の参照プロパティ(シングルセレクト)を追加する
記事モデルにカテゴリーモデルの情報を紐付けます。記事モデルにプロパティを追加します。
参照プロパティのカテゴリーモデルを選択します。シングルセレクトで追加します。
5. 記事モデルに「タグ」の参照プロパティ(マルチセレクト)を追加する
記事モデルにタグモデルの情報を紐付けます。記事モデルにプロパティを追加します。
参照プロパティのタグモデルを選択します。マルチセレクトで追加します。
デザインエディタでカテゴリーとタグを表示する
CMSダッシュボードで追加したコンテンツデータをWebサイト上に表示するため、エディタにデータを表示しデザインします。
1. エディタで動的ページを追加する
動的ページを追加します。モデルは記事モデルを選択します。
2. カテゴリーを表示する
テキストボックスを配置します。
画面右側のボックス設定パネルを開き、テキスト欄をクリックします。カテゴリーの Title プロパティを選択します。
2. タグを表示する
テキストボックスを配置します。
画面右側のボックス設定パネルを開き、テキスト欄をクリックします。タグプロパティ(リスト化して接続)を選択します。
タグ・カテゴリーの詳細ページへのリンクを設定する
配置したタグ・カテゴリー別の記事一覧ページを先に用意して、リンクを設定します。タグやカテゴリー別の記事一覧ページ作成方法は、カテゴリー(参照アイテム)別記事一覧ページを作成するをご覧ください。
よくある質問
Q. エディタに配置した複数タグのボックスで単体のカテゴリープロパティに変更したいですが、できません。
Q. エディタに配置した複数タグのボックスで単体のカテゴリープロパティに変更したいですが、できません。
A. リスト化されている「タグ(複数選択)」の表示内容を後から「カテゴリー(単数選択)」に変更しようとしても、プロパティ選択肢に「カテゴリー」は出てきません。変更したい場合はボックスを新規追加しプロパティを選択してください。
Tag
Category