Drupalの管理画面で表示されるメニューバーのカスタマイズ方法

Drupalで管理画面にログインしていると、画面上部にメニューバー（ツールバー）が表示されます。
サイト上のコンテンツを追加・編集したり、設定を変更したい場合はこのメニューを使って管理画面上を移動することになります。

デフォルトのまま使っている場合も多いかもしれませんが、使わないメニューは非表示にしたり、よく使う項目を「ショートカット」に登録しておくだけで使い勝手が上がったり、設定場所を探して管理画面をさまようことも少なくなります。

CMSの使い勝手において、管理画面で迷わないことは重要なポイントになります。
今回はそんなDrupal管理画面のメニューのカスタマイズに関して紹介します。

管理画面メニューバーの概要

Drupalの管理画面に表示されるメニューバーには「黒背景」の部分と「白背景」の部分があります。

黒背景はメインとなるメニューで、管理画面では「サイトへ戻る」というトップページに移動するリンクがあります。
あとは「管理」「ショートカット」「アカウント名」の3つのメニューが並んでいて、それぞれクリックすると、白背景のメニューが表示されます。

メニュー	概要
管理	基本となる管理画面の各ページへの一覧が表示される。デフォルトの状態で必要な項目はひと通り揃っている
ショートカット	よく使う管理画面ページへのリンクを、アカウントごとに登録できる
{アカウント名}	プロフィール（アカウント）に関するメニュー

そしてこの白背景のメニューに表示されているリンク1つ1つの項目を、Drupalでは「メニューリンク」と呼びます。

縦表示への切り替え

「管理」メニューを開いて右の方にある「左矢印」アイコンをクリックすると、サイドバーが表示されて項目が縦に表示されるように切り替わります（画面幅が狭くなった場合は自動的に縦表示に切り替わります）。

縦表示の場合は階層化されたメニューも表示できるようになります。
たとえば、横表示の場合は「コンテンツ」をクリックするとコンテンツ一覧に移動しますが、縦表示の場合は「コンテンツ」の右に矢印アイコンが表示されます。

そのアイコンをクリックすると、さらに子メニューが表示されます。
単純に見た目が変わるだけではなく、2階層目以降を表示させたい場合は縦表示に切り替える必要があることを覚えておきましょう。

ショートカットの編集方法

「ショートカット」はアカウントごとに自分で追加していくメニューです。
「管理」は全アカウント共通のものですが、ショートカットは個人の設定なので、自分がよく使うページを追加していくことでページ移動をラクにできます。

編集方法は下記の2パターンです。

• 追加したいページの星アイコンをクリックして追加する方法
• ショートカットリンクの一覧ページで編集する方法

1. 追加したいページの星アイコンをクリックして追加する方法

Drupalの管理画面には見出し横に星アイコンがあります。
これをクリックして黄色い状態にすると、ショートカットに追加されます。

追加したいページですぐに登録できますし、もう一度クリックすればショートカットから削除できます。

2. ショートカットリンクの一覧ページで編集する方法

星アイコンをクリックして変更するやり方だと、ショートカットの並び換えができません。
ショートカットを開くと右側に［ショートカットを編集］というリンクがあるので、それをクリックします。

「リンクの一覧」ページに移動するので、ここでドラッグアンドドロップをしてショートカットの並び換えができたり、「ショートカットを追加」から好きなリンクを追加したり、「編集」ボタンから名前やリンクの編集ができます。

ちなみに「行のウェイトを表示する」をクリックすると、並び換えをドラッグアンドドロップではなく、数字を選択して小さい順に並び換えができます。

ショートカットセット機能

「リンクの一覧」ページの［セット名を編集］タブをクリックすると「ショートカットセットを編集」ページに移動して、ショートカットセットの名前を編集できます。

ショートカットセットとは、ショートカットのリンクをまとめたグループのことで、このページの「ショートカットタブ」リンクをクリックするか、メニューバーの［アカウント名］→［プロフィールを編集］の［ショートカット］タブをクリックして表示できるページで選択できます。

いくつかショートカットセットを用意しておけば、ここでショートカットセットを切り替えて簡単にショートカットの内容を一括で切り替えられます。

「コンテンツを追加したり翻訳対応をするときのショートカットセット」と「サイトの設定を見直すときのショートカットセット」を用意しておいて、普段は前者を使用してサイトメンテナンス時に後者に切り替えるような使い方ができます。

「管理」メニューの編集方法

「管理」メニューは全アカウント共通のメニューです。
デフォルトの状態ですでに必要なメニューは揃っているので、使わないメニューを非表示にしたり、より深い階層だけどよく使うページのリンクを追加して使い勝手をよくすることになります。

編集方法は下記の2パターンです。

• 管理画面から追加する
• YAMLファイルで追加する

1. 管理画面から追加する方法

管理画面から作成する方法がもっとも手軽です。
メニューバーの［管理］→［サイト構築］へ移動します。
［メニュー］を選択すると、サイトで使用するメニュー一覧ページが表示されます。

メニューの一覧の中から「管理」の右にある「メニューの編集」ボタンをクリックします。

管理メニューの編集画面が表示されるので、ドラッグアンドドロップでメニューリンクの並び換えができたり、「有効」のチェックを外して非表示にしたり、「リンクの追加」から好きなリンクを追加できます。

ドラッグアンドドロップ時に左右に移動させると、メニューの階層化も簡単にできます。
そしてショートカットのメニュー一覧と同じように「行のウェイトを表示する」をクリックすると、並び換えをドラッグアンドドロップではなく、数字を選択して並び換えられます。

この方法なら管理画面から編集・非表示がラクにできますし、［メニューを翻訳］タブに移動すれば翻訳設定も簡単にできます。

ちなみに、デフォルトで表示されているメニューに関してはモジュールによって提供されているのでメニュー名やリンクの編集はできません。

もしデフォルトで表示されているメニューリンクの名前を変更したい場合は、「リンクの追加」からURLを入力して名前を自由に入力して追加し、デフォルトのメニューリンクは「有効」のチェックを外して非表示にします。

2. YAMLファイルで追加する

管理画面から追加する方法だと簡単に編集できますが、逆に簡単には変更させたくないメニューがあるかもしれません。
その場合はYAMLファイルを使って追加すると非表示はできますが削除できなくなりますし、タイトルとパスの編集もできません。

ただしモジュールを作成することになるので、モジュールをアンインストールすると表示されなくなります。
そのため、本来はモジュールで追加したページへのリンクを表示させるときに使用します。

今回は試しにメニューを追加するためのカスタムモジュールを作成してみましょう。
Drupalの「modules」フォルダ配下に下記のファイルを追加します。

addmenulink
  └addmenulink.info.yml
  └addmenulink.links.menu.yml

「モジュール名.info.yml」ではモジュールの基本的な設定を行います。
名前や説明、あとは対応するDrupalのバージョン情報を入力します。

name: Add Menu Link
description: Add menu link module.
package: Custom
type: module
core_version_requirement: ^8.7.7 || ^9
version: 8.x-9.4.8

「モジュール名.links.menu.yml」の方にはYAML形式で追加したいメニューリンクの情報を入力します。
「モジュール名.メニュー名」で1メニューリンクになっていて、インデントを付けてそのメニューリンクの設定を入力していきます。

addmenulink.sampleMenuParent:
 title: 'YAMLメニュー'
menu_name: admin
description: 'YAMLで追加したメニュー'
parent: system.admin
url: internal:/admin/config/
addmenulink.sampleMenuChild:
title: 'YAML子メニュー'
menu_name: admin
description: 'YAMLで追加した子メニュー'
parent: addmenulink.sampleMenuParent
url: internal:/admin/config/system/site-information

設定できる項目は下記の通りです。

項目	設定する内容
title	管理メニューで表示させるメニューリンクの名前
description	メニューリンクの説明
menu_name	表示させるメニューの名前（管理メニューに追加したい場合は「admin」）
url	クリックしたときの遷移先で「internal:」を入力すると管理画面のURLが入る
parent	階層化したい場合に親となるメニューリンクのIDを指定する（管理画メニューの白背景部分に表示させたい場合は「system.admin」を指定する）
weight	「行のウェイトを表示する」で表示される数字を指定して、並びの指定ができる

設定ができたら保存して、［管理］→［機能拡張］から作成したモジュールをインストールします。

インストールしたら管理メニューにYAMLファイルで設定したメニューアイテムが追加されているはずです。

アイコンを左側に表示させたい場合は、classが割り振られているので疑似要素に画像を指定するだけで表示できます。

.toolbar-icon-addmenulink-samplemenuparent::before{
    content: url(画像パス);
  }

まとめ

「このページよく開いているな」と感じる場所をショートカットに登録しておくだけでもアクセスしやすくなりますし、管理メニューの中から余計な項目を非表示にしたり、全アカウント共通で使用するリンクを追加しておくと、新しくアカウントを追加したときも余計な迷いが少なくなるかもしれません。

Drupalで何かしようとしたときには必ずさわる場所なので、使い勝手は上げておいて損はありません。
ぜひ設定を見てみてはいかがでしょうか。