Better Login
Drupalのデフォルトのログイン、登録、パスワード回復、パスワードリセットページを、WordPressにインスパイアされたクリーンなテンプレートに置き換えるテーマモジュールです。
betterlogin
インストール
composer require 'drupal/betterlogin:^2.0'
概要
Better Loginは、Drupalのユーザー認証フォームのスタイリングという一般的な課題を解決するために設計された軽量なテーマモジュールです。設定なしで、ログイン、登録、パスワード回復、パスワードリセットページにクリーンで最小限かつプロフェッショナルな外観を提供します。
WordPressのログインフォームデザインにインスパイアされたこのモジュールは、デフォルトのDrupalユーザーフォームページを完全に置き換える専用のページテンプレートを使用します。インストール直後からモジュールが動作し、すべてのユーザー認証ページに即座に視覚的な改善を提供します。
各認証ページには、サイトロゴ、フォームタイトル、関連するフォームコンテンツ、および他の認証ページへの便利なナビゲーションリンクが表示されます。テンプレートは簡単にカスタマイズできるように設計されており、テーマでオーバーライドするか、提供されているCSSを修正してサイトのブランディングに合わせることができます。
Features
- ユーザー認証ページ用の4つの専用ページテンプレートを提供：ログイン、登録、パスワード回復、パスワードリセット
- 各認証フォームの上にサイトロゴを目立つように表示
- 汎用的な「ユーザーアカウント」タイトルの代わりに意味のあるページタイトルを設定（例：「ログイン」、「登録」、「パスワードをお忘れですか？」、「パスワードのリセット」）
- ユーザー名/メールフィールドにオートフォーカスを追加し、即座に入力可能に
- よりクリーンな外観のためにデフォルトのフォームフィールド説明を削除
- 認証ページ間のナビゲーションリンクを提供（ログイン、登録、パスワードを忘れた場合、サイトに戻る）
- ユーザー登録権限に基づいて登録リンクを条件付きで表示
- よりクリーンなインターフェースのためにユーザーページからデフォルトのDrupalローカルタスクタブを削除
- 中央揃えのフォームボックスデザインを備えたレスポンシブCSSスタイリングを含む
- クエリパラメータ付きでユーザーページにアクセスする匿名ユーザーのリダイレクトを処理
- 設定不要でインストール直後から動作
Use Cases
ユーザー認証ページの迅速な視覚的改善
カスタムテーマに時間をかけずに、Drupalのデフォルトログインページを即座に視覚的にアップグレードしたいサイト構築者向け。モジュールをインストールするだけで、すべてのユーザー認証ページがサイトロゴと改善されたタイポグラフィを備えたクリーンでプロフェッショナルな外観になります。
カスタム認証ページデザインの出発点
カスタム認証ページデザインのしっかりとした基盤が欲しいテーマ開発者向け。モジュールの/templatesディレクトリから4つのテンプレートファイルをテーマにコピーし、HTML構造をカスタマイズして独自のCSSを追加し、サイトのデザイン言語に合わせることができます。
WordPressスタイルのログイン体験
WordPressから移行する組織や、ユーザーがWordPressのログイン体験に慣れている場合向け。ロゴと最小限の要素による中央揃えのフォームデザインは、WordPressのログインページと同様のユーザー体験を提供します。
公開サイトのユーザー体験向上
ログインページと登録ページが頻繁にアクセスされる公開登録サイト向け。ログイン、登録、パスワード回復間の明確なナビゲーションを備えたクリーンなデザインにより、ユーザーの混乱を軽減し、コンバージョン率を向上させます。
Tips
- テンプレートをカスタマイズするには、モジュールの/templatesディレクトリからテーマの/templatesディレクトリにコピーし、必要に応じて修正してください
- CSSは#auth_boxラッパーIDを使用しています - モジュールを修正せずにテーマでカスタムスタイルを追加するには、このセレクタを使用してください
- 各テンプレートには#auth_box要素に固有のクラス（login、password、register、reset）があり、ページ固有のスタイリングに使用できます
- モジュールは異なる認証ページの適切なキャッシュを確保するために「route」キャッシュコンテキストを追加します
- ブラウザ間で一貫したスタイリングを確保するために、テーマのCSSリセット/正規化を追加することを検討してください
Technical Details
Hooks 5
hook_help
管理ヘルプページでモジュールのヘルプテキストを提供し、モジュールが4つのテンプレートを使用することとカスタマイズ方法を説明します。
hook_form_alter
ユーザー認証フォームを修正し、ユーザー名フィールドにオートフォーカスを追加し、フィールド説明を削除し、betterlogin CSSライブラリを添付します。
hook_theme
カスタムプリプロセス関数を持つユーザー認証ページ用の4つのページテンプレートテーマフックを登録します。
hook_local_tasks_alter
よりクリーンなインターフェースを提供するために、ユーザーページからデフォルトのDrupalローカルタスクタブ（ログイン、登録、パスワードリセット）を削除します。
hook_preprocess_html
各認証ページにカスタムページタイトルを設定：「ログイン」、「パスワードをお忘れですか？」、「登録」、「パスワードのリセット」。
Troubleshooting 5
すべてのDrupal Cacheをクリア（drush cr）し、モジュールが正しく有効化されていることを確認してください。カスタムテーマを使用している場合は、テーマがページテンプレートをオーバーライドしていないか確認し、必要に応じて調整してください。
テーマの外観設定でロゴが設定されていることを確認してください。モジュールはtheme_get_setting('logo.url')を使用してロゴパスを取得します。
登録リンクはユーザー登録が許可されている場合にのみ表示されます。/admin/config/people/accountsでアカウント設定を確認し、登録が有効になっていることを確認してください。
モジュールのCSSがテーマのスタイルと競合している可能性があります。テーマでCSSの詳細度を上げるか、モジュールのCSSをコピーしてテーマのスタイリングアプローチに合わせて修正してください。
モジュールのテンプレートは完全なフォームを含む{{ page.content }}をレンダリングします。フィールドが表示されない場合は、モジュールではなくユーザーアカウントフィールドの設定を確認してください。