 |
概要 | デフォルトの認証ボタンを、リンク付きのドロップダウンまたはモーダルを開く統合ボタンに置き換えます。 |
 |
リポジトリ | https://github.com/Lillinator/combined-auth-button |
 |
インストールガイド | テーマまたはテーマコンポーネントのインストール方法 |
このテーマコンポーネントをインストール
概要
このテーマコンポーネントは、サインアップボタンとログインボタンを、ドロップダウンオプション付きの1つのボタンに統合します。これにより、ヘッダー領域がすっきりし、ユーザー体験が向上します（特にモバイルユーザー向け）。
具体的には、Discourseのデフォルトのモバイルフォーラムビューでは、サインアップボタンが非表示になり、既存のログインボタンのみが表示されます。これは、Discourseフォーラムの新しい訪問者（匿名ビュー）にとって混乱を招き、直感的ではありません。さらに、デフォルトのモバイルビューのログインボタンは、サインアップページへのリンクを含むログインページにリンクしています。これにより、モバイルデバイスの新規ユーザーに不要な摩擦が生じます。
コンポーネントなしのデフォルトモバイルビュー:
このシンプルなDiscourseテーマコンポーネントは、既存の「ログイン」ボタンを、より明確なラベル（デフォルトは「サインアップ / ログイン」）を持つ統合ボタンに置き換えます。クリックまたはタップすると、サインアップまたはログインページへのリンクを含むドロップダウンメニューまたはモバイルモーダルが開きます。
コンポーネントのデフォルト設定によるモバイルボタンとモーダル:
コンポーネントのデフォルト設定によるデスクトップボタンとドロップダウンメニュー:
設定とテーマ翻訳
デスクトップでの有効化、モバイルビューでのヘッダー領域確保のために統合ボタンアイコンの非表示、およびすべてのボタンアイコンとラベルの変更を可能にする管理者設定があります。
| 設定 | 説明 |
|---|---|
enable_on_desktop |
すべてのビューポートサイズで統合認証ボタンを有効化 |
hide_mobile_combined_button_icon |
ヘッダー領域を節約するために、モバイルビューで統合認証ボタンアイコンを非表示にします。 |
combined_button_icon |
統合認証ドロップダウンボタンのSVGアイコン |
login_button_icon |
ログインボタンのSVGアイコン |
signup_button_icon |
サインアップボタンのSVGアイコン |
button_labels.auth |
テーマ翻訳用の統合ボタン文字列 |
button_labels.log_in |
テーマ翻訳用のログインボタン文字列 |
button_labels.sign_up |
テーマ翻訳用のサインアップボタン文字列 |
その他のスクリーンショット
備考
- このコンポーネントは モバイルでの左側ハンバーガーメニュー と互換性がありますが、サイトロゴを中央寄せにするとヘッダーに混雑が生じる可能性があります。
他のDiscourse関連コンテンツをチェック
