 |
概要 | モバイルの Log In ボタンを、モーダルを開く統合された Sign Up / Log In ボタンに置き換えます |
 |
リポジトリ | https://github.com/Lillinator/discourse-combined-auth-button |
 |
インストールガイド | テーマまたはテーマコンポーネントのインストール方法 |
このテーマコンポーネントをインストール
概要
このテーマコンポーネントは、サインアップボタンとログインボタンを 1 つのボタンに統合し、ドロップダウンオプションを追加します。これにより、ヘッダースペースをすっきりさせ、ユーザーエクスペリエンス（特にモバイルユーザー向け）を向上させます。
特に、Discourse のデフォルトのモバイルフォーラム表示では、サインアップボタンが非表示になり、既存のログインボタンのみが表示されます。これは、Discourse フォーラムへの新規訪問者（匿名ビュー）にとって混乱を招き、直感的ではありません。さらに、デフォルトのモバイル表示のログインボタンはログインページにリンクし、そのページ内にサインアップページへのリンクが含まれています。これは、モバイル端末を利用する新規ユーザーにとって不要な摩擦を生み出します。
コンポーネントなしのデフォルトのモバイル表示:
このシンプルな Discourse テーマコンポーネントは、既存の Log In ボタンを、より明確なラベル（デフォルトは Sign Up / Log In）を持つ統合ボタンに置き換えます。クリックまたはタップすると、サインアップページまたはログインページへのリンクを含むドロップダウンメニューまたはモバイルモーダルが開きます。ヘッダースペースを確保するために統合ボタンのアイコンを非表示にするオプションを提供する管理設定や、アイコンやテキスト文字列を変更してすべてのボタンラベルをカスタマイズするための設定もあります。
デフォルト設定のモバイルボタンとモーダル:
デフォルト設定のデスクトップボタンとドロップダウンメニュー:
モバイル表示で統合ボタンのアイコンを非表示にしてヘッダースペースを確保する管理設定や、すべてのボタンアイコンを変更する設定があります。また、すべてのボタンラベルをカスタマイズすることもできます。
設定とテーマ翻訳
| 設定 | 説明 |
|---|---|
enable_on_desktop |
全画面サイズで統合認証ボタンを有効化 |
hide_mobile_login_button_icon |
ヘッダースペースを節約するため、モバイル表示で統合認証ボタンのアイコンを非表示 |
login_button_icon |
ログインボタン（および「モバイルログインボタンアイコンを非表示」が無効の場合の統合認証ボタン）の SVG アイコン |
signup_button_icon |
サインアップボタンの SVG アイコン |
button_labels.auth |
テーマ翻訳用の統合ボタンのテキスト文字列 |
button_labels.log_in |
テーマ翻訳用のログインボタンのテキスト文字列 |
button_labels.sign_up |
テーマ翻訳用のサインアップボタンのテキスト文字列 |
その他のスクリーンショット
注意事項
- このコンポーネントは モバイルでの左側ハンバーガーメニュー と互換性がありますが、サイトロゴを中央揃えにするとヘッダーでスペース不足の問題が発生する可能性があります。
他の Discourse 関連のプロジェクトもチェックしてください
