Drupal8のメニュー項目エクストラモジュールの使用方法
公開: 2022-02-16メガメニューはもはやデザイントレンドではありませんが、ニュースやeコマースに関連するほとんどのWebサイトの重要な部分です。
Drupal8のMenuItem Extrasモジュールは、サイトビルダーがメニュー項目にフィールドを追加できるようにすることで、Drupalのデフォルトのメニューシステムを改善します。 そうすれば、いくつかの簡単な手順でメガメニューを作成することができます。
このモジュールの使用方法については、以下をご覧ください。 はじめましょう!
ステップ1:必要なモジュールをインストールする
Menu Item Extrasモジュールに加えて、Viewfieldをインストールする必要があります。 ビューフィールドは、ビューへの参照を保持し、フィールドを含むエンティティが表示されるたびにそれをレンダリングするフィールドを提供します。
- PCのターミナルアプリケーションを開きます。
- タイプ:
- 作曲家はdrupal / viewfieldを必要とします
- Composerにはdrupal / menu_item_extrasが必要です
ダウンロード後に両方のモジュールを有効にします。
- [拡張]をクリックします。
- 両方のモジュールを確認してください。
- [インストール]をクリックします。
ステップ2:分類システムを作成する
おそらく、「システム」という単語は、10個の関連する用語を含む1つの語彙のみを作成するため、あまり適切ではありません。 ただし、この例では基本を説明しているため、将来、より複雑な分類システムを使用できます。
- [構造]> [分類法]> [語彙の追加]をクリックします。
- 「トピック」という名前を入力し、[保存]をクリックします。
- [用語の追加]をクリックして、以下に詳述するすべての用語を1つずつ追加します。
- トピック
- D8
- symfony
- WP
- Magento
- CSS
- HTML
- JS
- PHP
- Python
- DevOps
- トピック
ステップ3:コンテンツタイプを作成する
このチュートリアルでは、次のフィールドを持つ2つのコンテンツタイプを使用します。
- サービス
- サービスイメージ/イメージ/許可される値の数:1
- イントロテキスト/テキスト(フォーマット済み)/許容値数:1
- 説明/デフォルトフィールド
- ブログ
- カテゴリ/分類用語/許容値数:無制限
- 説明/デフォルトフィールド
[分類]フィールドを作成するときは、必ず参照タイプ(トピック)を選択してください。
ステップ4:コンテンツを作成する
タイプServiceの3つのノードを作成します。
- チュートリアル
- ビデオ
- 本
これらのノードのそれぞれは、メガメニューの第2レベルの要素に関連付けられます。 一方、ブログタイプのノードを約10個作成し、それらに異なる用語を関連付けます。 他の用語よりも頻繁に2つの用語(例:D8、WP)を含めるようにしてください。
コンテンツ画面は、このプロセスの最後を下の画像のように多かれ少なかれ見る必要があります。
ステップ5:メニュー項目を作成する
メインメニューの最初のレベルには、次のメニュー項目があります。
- 家
- 約
- 資力
- コンタクト
各メニュー項目には、追加の(追加の)フィールドがあります。 このフィールドは、メニューの2番目のレベル、つまりメガメニューの各カードアイテムに設定されます。 このフィールドでは、各ビューブロックを表示できます。
- [構造]> [メニュー]をクリックします。
- [編集]メニューをクリックして、メインナビゲーションを編集します。
- [リンクの追加]を3回クリックして、不足している第1レベルのメニュー項目を追加します。
- メニュー項目名を入力するたびに[保存]をクリックします。
リンクテキストのみを表示するには、特別なタグを使用します。
メニューのリンクを作成して再配置したら、
- [フィールドの管理]> [フィールドの追加]をクリックして、メニュー項目にフィールドを追加します。
- タイプViewfieldのフィールドを選択します。
- 適切な名前とラベルを付けてください。
- [保存して続行]をクリックします。
- [許可される値の数]を[無制限]に設定します。
- [フィールド設定を保存]をクリックします
デフォルトのビューをこの特定のフィールドにリンクするオプションがあります。 これらのフィールドは空のままにします。
- 下にスクロールして、[設定を保存]をクリックします
- [表示の管理]をクリックします。
- メニューカードのラベルを非表示にします。
- [保存]をクリックします。
ステップ6:ビューを作成する
- [構造]> [ビュー]> [ビューの追加]をクリックします
- タイプサービスのコンテンツを表示します。
- フォーマットされていないフィールドのリストを使用してブロックを作成します。
- ブロックごとに3つのアイテムを表示することを選択します。
- [保存して編集]をクリックします。
- サービスイメージフィールドを追加します
- 画像スタイルをサムネイルに設定し、画像をコンテンツにリンクします。
- [適用]をクリックします

- イントロテキストフィールドも追加します。
- フィールドを再配置します。
- [保存]をクリックします。
- [構造]> [ビュー]> [ビューの追加]をクリックします
- タイプBlogのコンテンツを表示します。
- フォーマットされていないフィールドのリストを使用してブロックを作成します。
- ブロックごとに1つのアイテムを表示することを選択します。
- [保存して編集]をクリックします。
- フィールドCategoryを追加します。
- [フィールドの追加と構成]をクリックします。
- [複数フィールド設定]をクリックします。
- 順序なしリストを選択します。
- 表示する値の数を3に設定します。
- [適用]をクリックします。
- ソート基準を削除します
- [適用]をクリックします。
- [保存]をクリックしてビューを保存します。
ステップ7:メニュー項目にビューブロックを追加する
- [構造]> [メニュー]をクリックします
- メインナビゲーションを編集します。
- メニュー項目「リソース」を編集します。
- 手順5で作成した2つのブロックを追加します。
- [保存]をクリックします。
ステップ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;
}
このチュートリアルが気に入っていただけたでしょうか。 読んでくれてありがとう!