#D26 カテゴリーリスト

カテゴリーリスト

カテゴリーリストという用語はDrupalの用語にありませんが、単独ページを一覧でまとめたページのことをここではカテゴリーリストという名称で記事に使用します。

どのようなページかは、実際に見てもらう方が早いので

Drupalの記事全てをまとめたページ > Drupalの記事
Drupalの記事からCivicThemeの記事を抜粋しまとめたページ > CivicThemeの記事

を参照いただくと理解できると思います。今回この記事をまとめたページの作り方を説明して行きます。

ビューの概念

Drupalについて調べると、良く出てくる言葉にエンティティという言葉や、ビューという言葉が出てきます。今回カテゴリーリストを作成する際、ページ内に配置するブロックと言われるエリアにこのビューの概念を使用しています。

ビューの機能を簡単に説明すると、データベースからデータを取得して様々な形で表示できる機能であり、リスト、テーブル、グリッド、スライダーなど、さまざまな表示形式をサポートしています。

ビュー機能を使用した分かりやすい例が、記事の一覧ページなどで、単一の記事が持つデータから所定の条件のデータを抽出して、指定した表示形式で表示するページを作成すると記事の一覧ページが出来上がります。

私のWEBサイトでは使用していないのですが、ログイン形式をとり複数のユーザーが利用するWEBサイト（簡単なSNSのような）を作成する場合に、所定の条件でメンバーのリストを作成するなど柔軟にサイト内のデータから目的とするページを作成できる機能です。

私がDrupalを使ってみて感銘を受けた機能の一つで、このビュー機能をうまく使いWEBサイトの情報整理を効果的に行う事で、他のシステムで構築するWEBサイトよりDrupalで構築するWEBサイトが情報整理に長けていると感じている機能となります。

CivicThemeが優れている理由に、このビューの機能を持たせたブロックが用意されていて、これを使用する事で、ビューが持つ機能の設定を一から構築する必要なく利用出来ることがあります。ビューの機能は扱うデータから関連機能、表示エリアなど多岐に渡り細かく設定することが可能ですが、今回は、CivicThemeが用意するビュー機能を持つブロックを使い説明して行きます。

ビューの構成

この記事では、設定を行なっていませんが参考までに、ビュー機能の構成をまとめておきます。

|- ビュー
|
|- リスト/設定
|
|- +ビューを追加
|
|- 有効
|
// 以下は行表示
|- ビューの名前 Automated list ※これを使用
|- システム内部名称 civictheme_automated_list
|- 説明 Default view used in the Automated list component.
|-ディスプレイ ブロック
|- 操作 編集/複製/無効/翻訳/削除
// ここまで
|
|- Content blocks
|- アラート
----以下省略----
|
|- 無効
|- アーカイブ
|- 用語集

当サイトはCivicThemeがデフォルトで用意するAutomated listを使いカテゴリーリストのページを作成しています。

ビューの編集項目

実際に使用するCivicThemeのAutomated listのビューの設定がどうなっているか見てみます。

以下はデフォルトの設定で、当サイトはそのまま使用しています。設定項目が多く、PCでみるとLeft,Center,Rightの3列構造になっています。

----[LEFT]----
|- タイトル
|---- タイトル:なし
|-フォーマット
|---- フォーマット:グリッド | 設定
|---- 表示:コンテンツ | Promo Card
|- フィールド
|---- 選択されたスタイルまたは行フォーマットはフィールドを使用していません。
|- フィルターの条件
|---- フィルター条件を追加
|- 追加のアクション一覧
|---- コンテンツ: 掲載 (= はい) | アグリゲーションの設定
|---- コンテンツ: コンテンツタイプ (表示) | アグリゲーションの設定
|---- コンテンツ: タクソノミータームを含む (表示) | アグリゲーションの設定 | 設定
|---- コンテンツ: タイトル (表示) | アグリゲーションの設定
|- 並び替え基準
|---- 並び替え基準を追加
|---- 追加のアクション一覧
|---- コンテンツ: フロントページへ掲載 (降順) | アグリゲーションの設定
|---- コンテンツ: 投稿日時 (降順) | アグリゲーションの設定

----[Center]----
|- ブロックの設定
|---- ブロック名:なし
|---- ブロック・カテゴリー:リスト (Views)
|---- 設定を許可:ページ毎の件数
|---- アクセス:権限 | 公開されたコンテンツを読む
|- ヘッダー
|---- ヘッダーを追加
|---- 追加のアクション一覧
|---- グローバル: 結果サマリー (グローバル: 結果サマリー)
|- フッター
|---- フッターを追加
|---- 結果が返されなかった場合の動作
|---- 結果がないときの挙動を追加
|- 追加のアクション一覧
|---- グローバル: フィルター未処理のテキスト (グローバル: フィルター未処理のテキスト)
|- ページャー
|---- ページャーを使用:すべて | ページ分け、12 件のアイテム
|---- 続きへのリンク:いいえ
|---- ディスプレイにリンク:なし
|- 言語
|---- レンダリング言語:ビューの行のコンテンツ言語

----[Right]----
|- 高度な設定
|---- リレーションシップ
|---- リレーションシップを追加
|---- 追加のアクション一覧
|---- field_c_n_topics: Taxonomy term
|---- field_c_n_site_section: Taxonomy term
|- コンテクスチュアルフィルター
|---- コンテクスチュアルフィルターを追加
|追加のアクション一覧
|---- コンテンツ: コンテンツタイプ (Default: 固定) | アグリゲーションの設定
|---- コンテンツ: タクソノミーアイディーを持つ(階層指定あり） (Default: 固定) | アグリゲーションの設定
|---- コンテンツ: アイディー (Default: URL から取得したコンテンツ アイディー) | アグリゲーションの設定
|- 外部設置フォーム
|---- 外部設置フォームをブロックで提供:はい
|---- 外部設置フォームのスタイル:基本 | 設定
|- その他
|---- システム内部名称:block1
|---- 管理用コメント:なし
|---- AJAXを利用:いいえ
|---- サマリーの添付を隠す:いいえ
|---- コンテンツ上のリンク:表示
|---- アグリゲーションを使用:はい
|---- クエリーの設定:設定
|---- キャッシュ:タグベース
|---- CSSクラス:なし
|ビューの内容がない場合はブロックを隠す:いいえ

となっており、様々な項目を設定出来ます。

例えば、Rightの上段 > 高度な設定 > リレーションシップの項目に

|---- field_c_n_topics: Taxonomy term
|---- field_c_n_site_section: Taxonomy term

とありますが、これが前回の記事で設定した、タクソノミーのトピックとSite selectionになります。

以降で説明しますが、LEFT > 表示コンテンツ > Promo Cardやページャー > 12件という項目もここで設定されています。

以下に、Automated listを表示してみます。

Automated list

[設定項目]
Automated list
|- コンテンツ/フィールド/テーマ
[コンテンツ]
|- リスト形式 デフォルト
|- コンテンツタイプ いずれか/Page/イベント
|
|-メタデータ 
|---- トピック Drupalの記事
// 複数選択可能
|---- Site section　設定なし
// 一つのみ設定可能
|
|-制限
|---- Limit type 制限を選択
// 制限/無制限
|
|制限 4を選択
// デフォルトは12
|
|---- フィルター 特に指定なし
// Exposed filters
// タイプ/トピック/タイトルから選択
[フィールド]
|- タイトル　設定なし
|
|- コンテンツ ここにこの情報を記載
|
|- Link above　今回設定なし
|---- URL
|---- リンクテキスト
|
|-Link below　今回設定なし
|---- URL
|---- リンクテキスト
[テーマ]
|---- Light/Dark Lightを選択
|
|---- Vertical spacing Bottomを選択
|---- 背景 なし
|
|- カラム
|---- Column count 2
// カラムの列数、デフォルトは4
|
|---- アイテム Promo Cardを選択
// Promo Card/Navigation Card/Snippetから選択
|
|---- Item Theme Lightを選択
// Light/Darkから選択

上記の設定

Promo Card/２列/新着4件のみ表示/Drupalの記事で設定すると以下のように表示されます。

要約します。

今回、カテゴリーリストのページを作成というテーマで記事を書いています。

カテゴリーリストとは、特定のカテゴリーをまとめたページ
特定のカテゴリーをまとめたページを作成するのはCivicThemeが用意するAutomated listというコンポーネントを使用
Drupalで特定のカテゴリーをまとめたページを作成するにはビューという機能を使い、表示させる項目などを設定
ビュー機能の構成や設定項目を確認する。今回はCivicThemeが用意するAutomated listというコンポーネントを使用して作成するので、ビュー機能は確認のみで、設定はしない。
実際にAutomated listを使用してみる。ここではページスペースの都合上デフォルトである全記事を12ページ毎に表示させるページャー機能は使わず、表示に制限をかけ、最新の4記事のみを表示。
デザインブロックはPromo CardというCivicThemeが用意するものを使用し2列で表示する。
前記事でタクソノミーのトピックに設定した"Drupalの記事"というタームをメタデータ内で呼び出し、"Drupalの記事"をページ内のメタタグのトピックに設定したページのみを上記で設定したPromo Card > 2列 >最新の4記事のみの形でページ内に表示させます。

の流れで説明をしています。

Automated listを使いDrupalの全記事をまとめたDrupalの記事を見ていただくと、今回の記事で説明した事が理解できると思います。

上記のDrupalの記事のページは以下のような形で作成されています。

コンテンツブロックを呼び出しでページの説明文を入力
Automated listを呼び出す
デフォルトである全記事を12ページ毎に表示させるページャー機能を使用
デザインブロックはPromo CardというCivicThemeが用意するものを使用し1列で表示する。
タクソノミーのトピックに設定した"Drupalの記事"というタームをメタデータ内で呼び出し、"Drupalの記事"をページ内のメタタグのトピックに設定したページのみを上記で設定したPromo Card > 1列 >全記事を制限かけず表示 > 1ページ12記事で次ページに移動するページャー機能を使用。

で作成しています。

当サイトのカテゴリーリストは、Drupalの記事という上位コンテンツだけでなくWordPressや環境構築という関連コンテンツのタームをトピック内に作成し上記と同様メタタグ内のトピックに設定し表示させています。

今回の記事は長くなってますが、実際のカテゴリーリストの作成は、Automated listを使い作成することでAutomated listの使い方を覚えてしまうと非常に簡単に作成出来ます。構成要素にDrupalのビュー機能やタクソノミーの要素がありますが、これも理解するとそれほど難しい事ではありません。

本来、Drupalのビュー機能を使い、しっかり設定したコンポーネントを自前で作成し使用する事が学習としては効果があるので、時間を見つけて挑戦したいと考えています。

CivicThemeが優れているのは、単一ページだけでなく、ビュー機能の設定を済ませ、リストページを簡単に作成するコンポーネントを用意し、デザインも非常に優れています。

私自身がDrupalを初学で、知識が薄いながら1月程度で、このWEBサイトが形になっているのはDrupalの優れた構築機能とCivicThemeが用意するWEBサイトを作成するために用意されたパーツやインターフェースが優れている事が大きいです。

次の記事は、CivicThemeが用意するコンポーネントを説明します。

CivicThemeのコンポーネント

今回、CivicThemeのAutomated listを使いカテゴリーリストのページを作成する記事をまとめました。CivicThemeが用意するコンポーネントは非常に見やすく、デザインの統一感もありWEBサイトのデザインコンセプトを統一した形で構築してくれます。次の記事はCivicThemeが用意するコンポーネントについて説明して行きます。

Drupalの記事

関連するDrupalでWEBサイトを構築する為の環境構築の記事やDrupalについて書いた記事になります。

記事は全てナンバリングしています。Drupalを初めて使う為の準備から始まる最初の記事から読む事もできます。

最初の記事から購読

最新の記事

Drupalについて書いた最新の記事になります。

Life Styleの記事

Drupalとは関係ないのですがLife Styleの記事も書いていますのでよろしければ購読ください。

2024/09/10(火) - 12:00