Drupalログインページのレイアウト変更

LYZONエンジニアの中尾です。
この記事では、Drupalのログインページを独自のテンプレートに差し替える方法を解説します。

はじめに

「サイトのデザインに合わせてログインページの見た目を整えたい」という要件は、実案件でもよく出てきます。
Drupalには「テンプレート候補（Theme Suggestions）」という仕組みがあり、決まった名前のテンプレートファイルをテーマ内に置くだけで標準ページを差し替えられます。モジュールを開発する必要はなく、テーマにファイルを追加するだけで済むので、初心者の方でも取り組みやすい内容です。
※本記事の内容は Drupal 10.x / 11.x で確認しています。

ログインページを上書きする仕組み

Drupalはページを表示するとき、URLなどをもとに複数のテンプレート候補を挙げます。その中でより具体的な名前のテンプレートが見つかれば、そちらを優先して使います。
ログインページ（/user/login）で使うファイル名は次のとおりです。

page--user--login.html.twig

このファイルをフロント側のテーマ内に置くと、/user/login にアクセスしたときに、標準の page.html.twig ではなく作成したテンプレートが使われます。
なお、pageテンプレートで変えられるのは、ヘッダー・フッター・リージョンの配置といったページ全体の枠組みです。ログインフォームの入力欄やボタンを変えたい場合は、別のテンプレートを用意するか、フォーム側を改修します。

実装手順

前提条件

フロント側で使用しているテーマ（デフォルトテーマ）の名前を把握していること（管理画面の「外観」で確認できます）
ファイルを編集できる環境（FTP・SSH・Gitなど）が整っていること
キャッシュクリアを実行できる権限があること

① テンプレートファイルを配置する
使用しているテーマの templates フォルダ配下に、page--user--login.html.twig を置きます。

themes/custom/{テーマ名}/templates/page--user--login.html.twig

templates 配下であれば、サブフォルダに分けて置いても問題ありません。
ファイルの中身は一から書かなくても大丈夫です。現在のテーマか、そのベーステーマの page.html.twig をコピーして元にすると、他のページとリージョン構成やクラスが揃うので手間が省けます。たとえばOliveroをベーステーマにしている場合は、core/themes/olivero/templates/layout/page.html.twig をコピーします。

② キャッシュクリアを実行する
ファイルを置いただけでは反映されないので、必ずキャッシュクリアを実行します。

drush cr

管理画面から行う場合は、「環境設定 > 開発 > パフォーマンス」を開いてキャッシュのクリアボタンを押します。
これで、/user/login にアクセスしたときに作成したテンプレートが読み込まれるようになります。

Twigデバッグモードでの確認

Twigデバッグモードを有効にすると、HTMLソース内に、使われているテンプレートと候補になっているファイル名（FILE NAME SUGGESTIONS）がコメントとして出力されます。ファイル名を確かめたいときや、反映されない原因を調べるときに便利です。
Drupal 10.1以降では、「環境設定 > 開発 > 開発設定」（/admin/config/development/settings）から有効にできます。
※デバッグモードは開発環境でのみ使い、本番環境では無効にしてください。

ほかの標準ページのカスタマイズ

今回はログインページを例にしましたが、同じ仕組みでほかの標準ページもカスタマイズできます。よく使うものは次のとおりです。

会員登録ページ（/user/register）：page--user--register.html.twig
パスワード再設定申請ページ（/user/password）：page--user--password.html.twig
ログアウト確認ページ（/user/logout/confirm）：page--user--logout--confirm.html.twig（Drupal 10.3以降）

注意点

フロント側で使用しているテーマに置いてください。管理テーマ（Claroなど）に置いても反映されません。サブテーマを使っている場合は、サブテーマ側に置いたファイルが親テーマのものより優先されます。
ファイル名のハイフンは2つ（--）です。page-user-login.html.twig のようにハイフンが1つだと認識されません。
拡張子は .html.twig です。.twig や _html.twig では認識されません。
ファイルを置いたあとは、必ずキャッシュクリアを実行してください。反映されないトラブルの多くはキャッシュが原因です。それでも反映されない場合は、Twigデバッグモードでファイル名の候補を確認してみてください。