ログインフォームブロックを使用すると、完全に機能する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: 変更を保存する
ログインフォームブロックの設定と外観のカスタマイズが完了したら、必ず作業内容を保存してください。
ログインフォームブロックをページに追加できました！デザイン性の高いログインフォームは信頼を築き、会員がコンテンツに簡単にアクセスできるようにします。テンプレートタブで素早くフィールドのスタイル設定を行ったり、詳細設定タブで色・フォント・サイズをブランドに合わせて調整したりできます。