Drupal8 Viewsで「関連記事」のブロックを作る方法 Part.1

阿部 正幸
アイキャッチ画像

ある記事のページを表示したときに、その記事の関連コンテンツを表示するブロックを Views で作ってみたいと思います。

Viewsとは

Viewsとは、Drupal7まではモジュールとして利用されていましたが、Drupal8からはコアに取り込まれた機能です。
Viewsを使うと、Drupalに保存されたコンテンツや、ユーザーデータなど様々な条件で抽出することができます。抽出するデータや、条件はDrupalのUIから全て操作することができます。

細かい条件を組み合わせることで、カテゴリー記事一覧、新着記事一覧、ユーザー一覧など、簡単に作成することができます。Drupalを使う上で一番重要な機能と言えるでしょう。

仕様

今回は例として「記事」コンテンツタイプを使用します。

設定フィールド

  • 「タグ」(field_tags)フィールド
  • 「サムネイル」(field_thumbnail)フィールド

コンテンツ同士の関連付けには「タグ」(field_tags)フィールドを使い、「関連記事」のブロックでは同じタグを持つ記事が表示されるようにします。

この際、共通で持つタグが多い記事ほど関連性が高いとみなし、その多い順(関連性の高い順)に並べて表示するようにしたいと思います。

設定方法

  1. ビューを作成します。管理 > サイト構築 > ビューズ から「+ ビューを追加」ボタンをクリック。

    「+ ビューを追加」ボタンの位置
     
  2. 下記の通り設定を行い、「保存して編集」をクリックします。

    ビューの名前:関連記事
    システム内部名称:related_contents
    ビューの設定:「表示」Content、「タイプ指定」:Article
    ブロックを作成:チェック

    ビューの作成画面
     
  3. ビューの編集画面です。右側の「高度」のところを開き、コンテキスチュアルフィルター追加します。

    コンテキスチュアルフィルター追加ボタンの位置
     
  4. 設定画面で、カテゴリーを「Content」でフィルタリングし、「タクソノミータームIDを含む」を追加します。

    「Content」カテゴリーと「タクソノミータームIDを含む」の位置
     
  5. 「タクソノミータームIDを含む」の詳細設定画面です、下記の通り設定します。

    フィルターが利用可能でない時:「デフォルト値を設定」にチェックを入れる
    Type:URL から取得するタクソノミーターム ID
    タームページからデフォルトのフィルターを読みみ:チェックを外す
    Load default filter from node page, that's good for related taxonomy blocks:にチェックを入れる
    複数の値の取り扱い:いずれかのアイテムを共有するアイテムに絞り込むを選択

    「タクソノミータームIDを含む」の詳細設定画面
     
  6. 少しスクロールし「フィルター値が利用可能あるいはデフォルトが与えられている時」の設定をします。

    検証の条件を指定:チェックを入れ
    バリデーターに:タクソノミータームIDを選択
    ボキャブラリー:関連付けに使用するボキャブラリー(今回の例では「タグ」)にチェックを入れる
    複数の引数:「, (カンマ)あるいは + (プラス)で区切られたひとつ以上のID」にチェックを入れる

    「フィルター値が利用可能あるいはデフォルトが与えられている時」の設定画面
     
  7. さらにスクロールして「MORE」を開き、「複数の値を許可する」にチェックを入れ、Apply ボタンを押して設定を保存します。

    「複数の値を許可する」の位置
     

こちらで、表示中のページのコンテンツと同じタームを持つコンテンツがリストされるようになりました。しかし、このままでは表示中の同コンテンツ自身もリストに表示されてします。

少し記事が⻑くなってきましたので、次回の記事で、抽出した条件に対して、表示中のコンテンツを除外する方法、関連記事ブロックに 表示する内容の選択などをご紹介いたします。

次の記事 [ Drupal8 Viewsで「関連記事」のブロックを作る方法 Part.2 ]

阿部 正幸/ 代表取締役

Drupal歴15年、ウェブマーケティング、インフラ構築、AP開発が守備範囲です。
キャッチボールと日本酒が好きです。天気の良い日に、誰かキャッチボールして、立呑に付き合ってください。
好きなDrupalモジュールはIMCEです。

阿部 正幸 の書いた記事一覧

  • Facebook

最新の関連記事

Ranking

Category

Tag

Contact お問い合わせ

Drupalでの開発・運用、サーバー構築、Webサイト構築全般、制作費用などに関してお気軽にご相談ください。