ログインフォームブロックを使用すると、完全に機能するWordPressログインフォームをSeedProdの任意のページに直接追加できます。このブロックは、カスタムログインページ、メンバーポータル、アクセス制限エリアを、デフォルトのWordPressログインページに依存せずに構築するのに理想的です。
このブロックには、ユーザー名とパスワードフィールド、ログインボタン、「ログイン情報を記憶する」チェックボックス、パスワード紛失リンクが含まれており、フィールドのスタイル、タイポグラフィ、色をコードなしで完全にカスタマイズできます。
ページにログインフォームブロックを追加する
SeedProdページにログインフォームブロックを追加するには、次の手順に従ってください。
ステップ1：ブロックを追加する
デザイン > ブロックの下で、ログインフォームブロックをページの目的のセクションにドラッグアンドドロップします。
ステップ2：コンテンツ設定を構成する
追加したら、ログインフォームブロックをクリックして設定を開きます。コンテンツタブは、フィールド、ボタン、成功時のアクション、追加オプションの4つのセクションに分かれています。
フィールド：
- ユーザーフィールドのラベル：ユーザー名またはメール入力フィールドの上に表示されるラベルテキストをカスタマイズします。
- ユーザーフィールドのプレースホルダー：ユーザー名またはメール入力フィールドが空の場合に、フィールド内に表示されるプレースホルダーテキストを設定します。
- パスワードフィールドのラベル：パスワード入力フィールドの上に表示されるラベルテキストをカスタマイズします。
- パスワードフィールドのプレースホルダー：パスワード入力フィールドが空の場合に、フィールド内に表示されるプレースホルダーテキストを設定します。
ボタン:
- ボタンのテキスト：ログイン送信ボタンに表示されるラベルをカスタマイズします。
成功アクション：
- リダイレクトURL：ログイン成功後にユーザーをリダイレクトするURLを入力します。デフォルトのWordPressリダイレクト動作を使用するには、空白のままにします。
- ログイン中のテキスト：ユーザーがすでにログインしている場合にログインフォームの代わりに表示されるメッセージを入力します。
{user}をプレースホルダーとして使用すると、ユーザーの表示名に置き換えられます。
追加オプション：
- ユーザーを記憶するラベル：「ログイン情報を記憶する」チェックボックスのラベルテキストをカスタマイズします（例：「ログイン情報を記憶する」）。
- パスワード紛失リンクのテキスト：フォームの下に表示されるパスワード紛失リンクのテキストをカスタマイズします（例：「パスワードをお忘れですか？」）。
ステップ3：テンプレートを選択（オプション）
テンプレートタブには、事前デザインされたフィールドスタイルのプリセットが用意されています。いずれかのテンプレートをクリックすると、フィールドの背景、境界線、角丸設定の組み合わせが即座に適用されます。利用可能なプリセットには、ライト、境界線なし、ワイドボーダー、グレー、ダーク、下部境界線、透明な入力フィールドスタイルがあります。
ステップ4：デザインのカスタマイズ
詳細設定タブでは、すべてのフォーム要素の色、タイポグラフィ、サイズを微調整できます。このタブは、色、フォーム、フィールド、ボタンの4つのセクションに分かれています。
色：
- リンクの色：「ログイン情報を記憶する」およびパスワード紛失リンクの色を設定します。
- ラベルテキストの色：フィールドラベルテキストの色を設定します。
- フィールドテキストの色：入力フィールドに入力されたテキストの色を設定します。
- フィールドの背景色：入力フィールドの背景色を設定します。
- フィールドの境界線の色：入力フィールドの境界線の色を設定します。
- ボタンの背景色: ログインボタンの背景色を設定します。
フォーム：
- ラベルフォント: フィールドラベルのフォントファミリーとフォントバリアントを選択します。
- ラベル文字サイズ: フィールドラベルのフォントサイズを10〜30pxに設定します。
- 行間: フォーム行間の垂直方向の間隔を0〜30pxに設定します。
- 配置：フォーム全体の水平方向の配置を設定します - 左、中央、または右。
フィールド：
- フィールドフォント: 入力フィールド内のテキストのフォントファミリーとフォントバリアントを選択します。
- フィールドサイズ: 入力フィールド全体のサイズ（小、中、大）を設定します。
- フィールド幅: 入力フィールドの幅を10〜100％のパーセンテージで設定します。
- ラベル間隔: ラベルと入力フィールドの間隔を0〜30pxに設定します。
- フィールドの境界線の幅：入力フィールドの各辺（上、右、下、左）の境界線の幅を個別に設定します。
- フィールドの角丸: 入力フィールドの角の半径を0〜50pxに設定します。
ボタン:
- ボタンフォント: ログインボタンテキストのフォントファミリーとフォントバリアントを選択します。
- ボタンサイズ: ログインボタン全体のサイズ（小、中、大）を設定します。
- ボタンの角丸: ログインボタンの角の半径を0〜50pxに設定します。
高度なタブの残りのセクションでは、間隔、カスタムCSSクラス、デバイスの表示、およびアニメーションの表示を制御することもできます。
ステップ5：変更を保存
ログインフォームブロックの設定と外観のカスタマイズが完了したら、作業を保存してください。
ページにログインフォームブロックを正常に追加しました！デザイン性の高いログインフォームは信頼を築き、メンバーがコンテンツに簡単にアクセスできるようにします。テンプレートタブを使用してフィールドのスタイリングプリセットをすばやく適用するか、高度なタブでブランドに合わせてすべての色、フォント、サイズを調整してください。