前項ではビュー機能を使いカテゴリーリストのページを作成する例をまとめましたが、今回はカテゴリーリストを任意のページに配置するカテゴリーのブロックを作成する例をまとめていきます。
『目次』
- Top --- Drupalの特徴である、情報を多元的に扱い自由に並べることが出来る、View機能のブロックを構築し実装する過程をまとめています。
- #01 当サイトで使用しているビュー機能 --- 実際にView機能で作成したブロックの活用例をまとめています。
- #02 設定例 --- View機能でブロックを作成するための設定についてまとめています。
- #03 設定の補足 --- Viewで作成した『ページ』と『ブロック』の違いと使用例について補足しています。
ページ下部の簡易ナビゲーションバーの番号をクリックすると記事内を移動出来ます。記事の読み返しなどにご利用ください。
この具体例が、トップページに配置している新着情報と、各記事下部に配置している関連記事になります。
ビュー機能の概要をおさらいすると、記事やページなどの公開するコンテンツを条件でリスト化して表示する機能になります。
前記事ではナビゲーションメニューのカテゴリーリストのページを作成する例についてまとめています。
DrupalとWebに関わる記事 > 全ての記事
このカテゴリーリストのページを作成出来る機能がビュー機能になります。ビュー機能はページだけでなくブロックも作成出来ますので、作成したブロックを指定したページ内に配置する事でサイト内に自由にリスト化した記事やページの告知を行う事が出来ます。
今回は、記事内に表示する関連記事のブロックをビュー機能で作成して行きます。
関連記事の表示例
Introduction.
今回は各記事下部に配置した関連記事のブロックを例に記事をまとめて行きます。関連記事とは一例を挙げるとDrupalについて書いた記事に、他の関連する記事のリンクを配置する機能となります。
関連記事といっても当サイトは開設したばかりで記事数も少ないので、カテゴリー分けは大きく2つのテーマになっています。
- DrupalとWebに関わる記事 > Creation
- Life Styleの記事 > Life Style
DrupalやAWSなどの記事をまとめているCreationは、コンテンツタイプをCreationとして、DrupalやAWSなどの記事を書いています。ここにタクソノミーでCreationというタームを配置して、このCreationというタームで記事をまとめています。このCreationのタームを使いDrupalや、AWSなどの記事をカテゴリーリストとしてまとめページとして生成しているのが、前回説明した、ビュー機能のページ生成の記事になります。
このCreationのコンテンツタイプで作成したDrupalの記事に、Creationのコンテンツタイプで作成した同様のカテゴリーであるCreationの他の記事をリスト化して記事内に配置することで、関連する記事を探しやすくします。
Creationの他の記事のリスト化したブロックを作成し、記事内に関連記事として配置して行きます。
この関連記事のブロックをビュー機能を使い生成して行きます。
関連記事のブロックの内容は以下になります。
ページを使うかブロックを使うかを選択
- 指定した条件でブロックを作成する // ブロックを作成するを選択する
指定された抽出条件
- タクソノミー // ボキャブラリー > タグ // ターム > Cration.
表示形式
- グリッド
表示する記事内の情報:フィールド
- タイトル
- 記事本文
- タクソノミー
- 投稿日時
掲載順序
- ランダム
表示件数
- 3件
- 続きへのリンクはなし
DrupalやWeb構築に関連した記事であるCreaionのページ下部に、関連記事として他のDrupalやWeb構築について書いた記事をリスト化して表示します。表示方法は、記事ページの下部に配置しますのでランダムで3件表示とします。
1. 当サイトで使用しているビュー機能
ビュー機能で作成した関連記事のブロックの使用方法は以下のようになっています。
コンテンツタイプ別にページ末尾に設置した関連記事 > ビューのブロック作成機能
- 記事末尾の Related articles. > 当記事末尾にも表示されています。 / Creation.記事全てで表示されます。
ここでは触れませんが、今回作成する関連記事は以下の4つのコンテンツタイプで表示しています。
- DrupalとWebに関わる記事. // 今回作成したCreation-Bottom.ブロックをページ末尾に表示
- Life Styleの記事. // 別途作成したLife Style-Bottom.ブロックをページ末尾に表示
- Web Creation Article. // 別途作成したEn-Creation-Bottom.ブロックをページ末尾に表示
- Life Style Article. // 別途作成したEn-Life Style-Bottom.ブロックをページ末尾に表示
今回の記事は
DrupalとWebに関わる記事. // 今回作成したCreation-Bottom.ブロックをページ末尾に表示
をどのようにビュー機能で設定しているかをまとめて行きます。
プロセスは
- ブロックの作成
- 抽出条件や抽出後の表示などの処理を決定
- 表示形態の整形とブロックとして呼び出せる為の設定
- 追加の設定
- 設定内容の確認
で行っています。
1-1. Block.
記事内に表示する関連記事のブロックをビュー機能で作成して行きます。
Home > 管理 > サイト構築 > ビュー を開きます。
ビューのリストが表示されます。このTop画面は新規作成と既存のビューの編集と有効化/無効化、複製と削除が行えます。
+ビューを追加をクリックすると、新規のビューが作成出来ます。
Block Setting.
Home > 管理 > サイト構築 > ビュー > ビューを追加 の画面が表示されます。
ビューの基本情報
ビューの名前 : 管理上の名前になります
説明 :
ビューの設定 // デフォルトのままで大丈夫です。
表示 : コンテンツ タイプ指定 : コンテンツタイプを指定 タグ付 : 空白 並び順 :新しい順
ページの設定
ページを作成する :チェック // 後で設定可能なのでどちらでも可
ブロックの設定
ブロックを作成 :チェック // 後で設定可能なのでどちらでも可 // 今回ブロックを作成するのでこちらを選択所定の内容を入力して > 保存して編集をクリックするとビューの設定画面が開きます。
Home > 管理 > サイト構築 > ビュー > View で作成したビューの設定が行えます。
2. 設定例
当サイトのDrupalとWebに関わる記事のカテゴリーリストの設定を見て行きます。
ビューの設定画面を開きます。
Home > 管理 > サイト構築 > ビュー > View > Creation Bottom (コンテンツ)
管理画面は設定項目が目的別にセクション分けされているので以下のセクションに分けて説明します。
- Top Block
- Left Block
- Center Block
- Right Block
- Footer Block
以下に実際に設定した項目をまとめています。
Viewの設定画面
2-1. Top Block.
ページやブロックの追加、必要に応じて翻訳の設定を行います。
ブロック名をCreation-Bottom.としています。 タイプはコンテンツとして作成しています。
Top Block Setting.
Creation-Bottom. (コンテンツ)
編集 / ビューを翻訳
ディスプレイ
Block +追加 ----- ビューの名前/ 説明の編集 >
表示名 : Block ----- Blockを複製 >2-2. Left Block.
主な設定はこの左ブロックで行っています。タイトルや表示形式の選択、表示させる項目をフィールドにして該当するフィールドの選択を行い抽出条件にタクソノミーと指定するタームで表示するコンテンツのフィルタリングを行い、指定の条件で並べ替えを設定します。
表示形式をグリッドとしています。グリッドにはスタイルシートのクラスを設定しています※スタイルシートについては別記事でまとめて行きます。
表示フィールドは、タイトル、本文(要約)、全てのタクソノミーターム、フィルターの条件は掲載コンテンツとタクソノミータームCreation.を指定し、表示される記事の並びをランダムとしています。
Left Block Setting.
タイトル
タイトル : Creation-Bottom. // タイトルをCreation-Bottom.にしています。
フォーマット
フォーマット:グリッド | 設定 // 表示形式をグリッドにしています。
表示:フィールド | 設定 // グリッドに表示されるのは以下のフィールドになります。
フィールド ----- 追加 // 上記のグリッドに表示させるフィールド
コンテンツ: タイトル
コンテンツ: Body (記事内容)
コンテンツ: Post (投稿日)
コンテンツ: すべてのタクソノミーターム
フィルターの条件 ----- 追加
コンテンツ: 掲載 (= はい) // コンテンツのリストを生成します。掲載/公開されているコンテンツを表示します。
コンテンツ: タクソノミータームを含む (= Creation) | 設定 // 指定条件がタクソノミーで設定したCreationのタームを含むコンテンツのみを表示します。
並び替え基準 ----- 追加
グローバル: ランダム (昇順) // リストに表示させる記事をランダムで選び並び順をが新しい順にします。2-3. Center block.
ブロック名やヘッダー、フッター、リストの表示条件をここで設定します。
ブロックなのでページャーを3件としています。
Center Block Setting.
ブロックの設定
ブロック名:Creation-Bottom_block
ブロック・カテゴリー:リスト (Views)
設定を許可:ページ毎の件数
アクセス:権限 | 公開されたコンテンツを読む // 公開しているのでコンテンツ掲載の権限と同様
ヘッダー ----- 追加
グローバル: テキストエリア (グローバル: テキストエリア) // 説明を兼ねたヘッダーを設定しています。
> Related articles.
> DrupalやWebサイト構築の関連記事になります。宜しければご覧ください。
フッター ----- 追加 // 当面フッターは必要ないのですが補足などが必要になったら使用します。
結果が返されなかった場合の動作 ----- 追加 // デフォルトのまま。
ページャー
ページャーを使用:ミニ | ミニページャー、 3 件ずつ // 記事末尾に表示する関連記事なので3件としています。
続きへのリンク:いいえ // フルでページ化していてページ番号が表示されるので利用していません。
言語
レンダリング言語:ビューの行のコンテンツ言語 // このページは日本語になっています。2-4. Right Block.
基本設定では行えない設定をここで設定します。 // 今回の設定はありません。
Right Block Setting.
^ 高度 //この設定はデフォルトのままです。
Relationships ----- 追加
コンテクスチュアルフィルター ----- 追加
外部設置フォーム
外部設置フォームをブロックで提供:いいえ
外部設置フォームのスタイル:基本 | 設定
その他
システム内部名称:page_1
管理用コメント:なし
AJAXを利用:いいえ
サマリーの添付を隠す:いいえ
コンテンツ上のリンク:表示
アグリゲーションを使用:いいえ
クエリーの設定:設定
キャッシュ:タグベース
CSSクラス:なし2-5. Footer Block.
設定を行った項目の保存や内容確認のプレビューを見ることが出来ます。
Footer Block Setting.
保存 / キャンセル // 設定内容を保存します。
プレビュー ----- 自動プレビュー // 設定を変更すると以下にプレビューが表示されます。
コンテクスチュアルフィルターでプレビュー: // プレビューの表示条件
プレビューの更新 // 設定を変更した場合以下に表示されるプレビューを更新して確認
タイトル ----- Creation-Bottom. // 設定したタイトル名
パス ----- このディスプレイにはパスがありません。 // ページではなくブロックなのでパスはありません。
// 以下にプレビュー内容が表示されます。
タイトル
> Creation-Bottom.
ヘッダー // Center Blockで設定したヘッダー
> Related articles.
> DrupalやWebサイト構築の関連記事になります。宜しければご覧ください。
コンテンツ
> 設置したリストがランダム表示以上の形で設定しています。
3. 設定の補足
設定項目は前記事 #C20 Drupal ビュー機能-1 ページ で作成した内容と大差はありません。
Top Blockは、ページかブロックかの選択や追加を行い、Left Blockは抽出条件や抽出後の表示などの処理を決定し、Center Blockでページとして整形し、Right Blockで追加の設定を行い、Footer Blockで確認します。
ビューの設定を上記のプロセスで整理すると
- ブロックの作成 > Top Blockの設定
- 抽出条件や抽出後の表示などの処理を決定 > Left Blockの設定
- ページとして表示するブロックの整形 > Center Blockの設定
- 追加の設定 > Right Blockの設定 // 今回設定はしていません。
- 設定内容の確認 > Footer Blockで確認
を行っています。
カテゴリーリストのページとの違いは、カテゴリーリストが単一のページとして成り立っていることに対して、今回作成した関連記事のブロックは、表示させたい記事やページで任意に表示させる事が出来ます。
コンテンツタイプの記事で簡単に説明したとおりブロックはURLを持っていません。作成したブロックはエンティティとして扱われています。この作成したブロックをどこに配置するかを設定する機能としてブロックレイアウトの機能を使って行きます。
ブロックレイアウトで、配置をするセクションを指定すると、補完機能で作成したブロックが呼び出されます。ここに今回作成したCreationの関連記事のブロック Creation-Bottom. が呼び出されますので選択を行いセクションの表示を設定します。表示させたい記事を選択することで、指定の記事に作成した関連記事を表示出来ます。
ブロックレイアウトの設定は記事が長くなってしまいますので別記事でまとめて行きます。
- リスト化し表示するもの > コンテンツ > Drupal関連の記事
- 抽出条件 > タクソノミー > ターム > Creation.
- Drupal関連の記事に全てCreation.のタームがタグとして設定されています。
この3つの条件で関連記事のブロックを作成しています
関連記事のブロックを作成するビューの設定例を記事としてまとめています。設定項目は多そうに感じますが内容はシンプルです。
- DrupalとWebに関わる記事を作成するコンテンツタイプCreationで記事を作成
- コンテンツタイプCreationに設定してあるボキャブラリー > タグに設定したタームCreationを設置
- ビューの機能で、Creationを設置したページをリスト化してブロックとして生成
- ブロックレイアウトで、表示する記事と配置場所の設定
今回の記事では、ブロックレイアウトの設定まで説明出来ていませんが、作成した関連記事のブロックをブロックレイアウトの設定で関連する記事に配置する事で、記事内に表示する事が可能となります。
次項はブロックレイアウトの説明をしていければと考えています。
Conclude.
作成した記事のカテゴリー分けを行い、リスト化して表示するカテゴリーリストのページとブロックを生成するビュー機能についてまとめてみました。ページとしての使用とブロックとしての使用をそれぞれ#C20、#C21と2つの記事を分けて説明しています。実際にサイトで利用している設定の例を交えた記事になっていますが、概要説明であり、表示するスタイル設定など実践的な項目まで説明出来ていません。
Drupalの概念やルールを理解する必要性について、当サイトの記事内でも良く触れますが、現時点での私が書く記事がDrupalの概念とルールを理解する為の記事内容になっています。
コンテンツ > サイト構築 > タクソノミー > ビュー と記事を進めています。ここにブロックレイアウトの理解が出来ると、Drupalで記事を書き、カテゴリーでまとめたWebサイトの基本的な形を作成する事が出来ます。この概念とルールを一通り進めた段階で、具体的なサイト構築をもう少し実践的な形で説明出来ればと考えています。
ヘッダーのメインナビゲーションメニューやサイドメニュー、フッター、記事内にビューで作成したブロックなどを自由にレイアウトし配置出来るブロックレイアウトについてまとめます。