Drupal8のメニュー項目エクストラモジュールの使用方法

公開: 2022-02-16

メガメニューはもはやデザイントレンドではありませんが、ニュースやeコマースに関連するほとんどのWebサイトの重要な部分です。

Drupal8のMenuItem Extrasモジュールは、サイトビルダーがメニュー項目にフィールドを追加できるようにすることで、Drupalのデフォルトのメニューシステムを改善します。 そうすれば、いくつかの簡単な手順でメガメニューを作成することができます。

このモジュールの使用方法については、以下をご覧ください。 はじめましょう!

ステップ1:必要なモジュールをインストールする

Menu Item Extrasモジュールに加えて、Viewfieldをインストールする必要があります。 ビューフィールドは、ビューへの参照を保持し、フィールドを含むエンティティが表示されるたびにそれをレンダリングするフィールドを提供します。

  • PCのターミナルアプリケーションを開きます。
  • タイプ
    • 作曲家はdrupal / viewfieldを必要とします
    • Composerにはdrupal / menu_item_extrasが必要です

200414メニューアイテムエクストラ001200414メニューアイテムエクストラ001

ダウンロード後に両方のモジュールを有効にします。

  • [拡張]をクリックします。
  • 両方のモジュールを確認してください。
  • [インストール]をクリックします。

200414メニューアイテムエクストラ003


ステップ2:分類システムを作成する

おそらく、「システム」という単語は、10個の関連する用語を含む1つの語彙のみを作成するため、あまり適切ではありません。 ただし、この例では基本を説明しているため、将来、より複雑な分類システムを使用できます。

  • [構造]> [分類法]> [語彙の追加]をクリックします。
  • 「トピック」という名前を入力し、[保存]をクリックします。
  • [用語の追加]をクリックして、以下に詳述するすべての用語を1つずつ追加します。
    • トピック
      • D8
      • symfony
      • WP
      • Magento
      • CSS
      • HTML
      • JS
      • PHP
      • Python
      • DevOps

200414メニューアイテムエクストラ004


ステップ3:コンテンツタイプを作成する

このチュートリアルでは、次のフィールドを持つ2つのコンテンツタイプを使用します。

  • サービス
    • サービスイメージ/イメージ/許可される値の数:1
    • イントロテキスト/テキスト(フォーマット済み)/許容値数:1
    • 説明/デフォルトフィールド

200414メニューアイテムエクストラ005

  • ブログ
    • カテゴリ/分類用語/許容値数:無制限
    • 説明/デフォルトフィールド

200414メニューアイテムエクストラ006

[分類]フィールドを作成するときは、必ず参照タイプ(トピック)を選択してください。

200414メニューアイテムエクストラ007


ステップ4:コンテンツを作成する

タイプServiceの3つのノードを作成します。

  • チュートリアル
  • ビデオ

これらのノードのそれぞれは、メガメニューの第2レベルの要素に関連付けられます。 一方、ブログタイプのノードを約10個作成し、それらに異なる用語を関連付けます。 他の用語よりも頻繁に2つの用語(例:D8、WP)を含めるようにしてください。

200414メニューアイテムエクストラ008

コンテンツ画面は、このプロセスの最後を下の画像のように多かれ少なかれ見る必要があります。

200414メニューアイテムエクストラ009


ステップ5:メニュー項目を作成する

メインメニューの最初のレベルには、次のメニュー項目があります。

  • 資力
  • コンタクト

各メニュー項目には、追加の(追加の)フィールドがあります。 このフィールドは、メニューの2番目のレベル、つまりメガメニューの各カードアイテムに設定されます。 このフィールドでは、各ビューブロックを表示できます。

  • [構造]> [メニュー]をクリックします。
  • [編集]メニューをクリックして、メインナビゲーションを編集します。

200414メニューアイテムエクストラ010

  • [リンクの追加]を3回クリックして、不足している第1レベルのメニュー項目を追加します。
  • メニュー項目名を入力するたびに[保存]をクリックします。

リンクテキストのみを表示するには、特別なタグを使用します。

200414メニューアイテムエクストラ011

200414メニューアイテムエクストラ012

メニューのリンクを作成して再配置したら、

  • [フィールドの管理]> [フィールドの追加]をクリックして、メニュー項目にフィールドを追加します。
  • タイプViewfieldのフィールドを選択します。
  • 適切な名前とラベルを付けてください
  • [保存して続行]をクリックします。

200414メニューアイテムエクストラ013

  • [許可される値の数]を[無制限]に設定します。
  • [フィールド設定を保存]をクリックします

200414メニューアイテムエクストラ014

デフォルトのビューをこの特定のフィールドにリンクするオプションがあります。 これらのフィールドは空のままにします。

  • 下にスクロールして、[設定を保存]をクリックします
  • [表示の管理]をクリックします。

200414メニューアイテムエクストラ015

  • メニューカードのラベルを非表示にします。
  • [保存]をクリックします。

ステップ6:ビューを作成する

  • [構造]> [ビュー]> [ビューの追加]をクリックします
  • タイプサービスのコンテンツを表示します。
  • フォーマットされていないフィールドのリストを使用してブロックを作成します。
  • ブロックごとに3つのアイテムを表示することを選択します。
  • [保存して編集]をクリックします。

200414メニューアイテムエクストラ016

  • サービスイメージフィールドを追加します
  • 画像スタイルをサムネイルに設定し、画像をコンテンツにリンクします。
  • [適用]をクリックします

200414メニューアイテムエクストラ017

  • イントロテキストフィールドも追加します。
  • フィールドを再配置します。
  • [保存]をクリックします。

200414メニューアイテムエクストラ018

  • [構造]> [ビュー]> [ビューの追加]をクリックします
  • タイプBlogのコンテンツを表示します。
  • フォーマットされていないフィールドのリストを使用してブロックを作成します。
  • ブロックごとに1つのアイテムを表示することを選択します。
  • [保存して編集]をクリックします。

Drupal8のメニュー項目エクストラモジュールの使用方法

  • フィールドCategoryを追加します。
  • [フィールドの追加と構成]をクリックします。
  • [複数フィールド設定]をクリックします。
  • 順序なしリストを選択します。
  • 表示する値の数を3に設定します。
  • [適用]をクリックします。

200414メニューアイテムエクストラ020

  • ソート基準を削除します
  • [適用]をクリックします。
  • [保存]をクリックしてビューを保存します。

ステップ7:メニュー項目にビューブロックを追加する

  • [構造]> [メニュー]をクリックします
  • メインナビゲーションを編集します。
  • メニュー項目「リソース」を編集します。
  • 手順5で作成した2つのブロックを追加します。
  • [保存]をクリックします。

200414メニューアイテムエクストラ021


ステップ8:CSSスタイル

このチュートリアルの範囲外であるため、このコードについて詳しく説明することはしません。 ただし、この記事ではDrupalビューとCSSグリッドについて詳しく調べることができます。 メガメニューをもっと練習したい場合は、この記事もご覧ください。

 #block-bartik-main-menu a,
#block-bartik-main-menu li span {
background: transparent;
text-shadow: unset;
color: whitesmoke;
}

#block-bartik-main-menu .menu-level-0 {
display: grid;
grid-template-columns: repeat(4, 1fr);
}

#block-bartik-main-menu .field--name-field-menu-card .field__items {
display: flex;
}

#block-bartik-main-menu .menu-dropdown-0 {
position: absolute;
left: 0;
top: 166px;
width: 100%;
z-index: 10;
}

#block-bartik-main-menu a,
#block-bartik-main-menu li span {
background: transparent;
text-shadow: unset;
color: whitesmoke;
}

#block-bartik-main-menu .menu-item {
display: grid;
align-content: center;
justify-content: center;
}

#block-bartik-main-menu .menu-level-0 {
display: grid;
grid-template-columns: repeat(4, 1fr);
}

#block-bartik-main-menu .menu-dropdown-0 {
position: absolute;
left: 0;
width: 100%;
padding-top: 16px;
background-color: rgba(141,139,132, 0.9);
}

.view-tutorials .view-content {
display: grid;
grid-template-columns: repeat(3, 1fr);
}

.view-tutorials .views-row {
display: grid;
justify-items: center;
}

.view-tutorials .views-row span > a {
font-size: 1.3rem
}

.view-tutorials .views-row .views-field-field-intro-text {
font-size: 1rem;
}
ポップアップで開く
#block-bartik-main-menu a,
#block-bartik-main-menu li span {
background: transparent;
text-shadow: unset;
color: whitesmoke;
}

#block-bartik-main-menu .menu-level-0 {
display: grid;
grid-template-columns: repeat(4, 1fr);
}

#block-bartik-main-menu .field--name-field-menu-card .field__items {
display: flex;
}

#block-bartik-main-menu .menu-dropdown-0 {
position: absolute;
left: 0;
top: 166px;
width: 100%;
z-index: 10;
}

#block-bartik-main-menu a,
#block-bartik-main-menu li span {
background: transparent;
text-shadow: unset;
color: whitesmoke;
}

#block-bartik-main-menu .menu-item {
display: grid;
align-content: center;
justify-content: center;
}

#block-bartik-main-menu .menu-level-0 {
display: grid;
grid-template-columns: repeat(4, 1fr);
}

#block-bartik-main-menu .menu-dropdown-0 {
position: absolute;
left: 0;
width: 100%;
padding-top: 16px;
background-color: rgba(141,139,132, 0.9);
}

.view-tutorials .view-content {
display: grid;
grid-template-columns: repeat(3, 1fr);
}

.view-tutorials .views-row {
display: grid;
justify-items: center;
}

.view-tutorials .views-row span > a {
font-size: 1.3rem
}

.view-tutorials .views-row .views-field-field-intro-text {
font-size: 1rem;
}

200414メニューアイテムエクストラ022

このチュートリアルが気に入っていただけたでしょうか。 読んでくれてありがとう!