web-dev-qa-db-ja.com

ユーザーログインフォームをカスタマイズする方法は？

/user/loginページでユーザーログインフォームをカスタマイズしようとしています。hook_form_alter関数を使用して、ユーザーログインフォームの各フィールドにすばらしいスタイルとプレースホルダーを追加し、削除または非表示にしたいと思います。
各テーマの下に、「adminユーザー名を入力してください」と「ユーザー名に付随するパスワードを入力してください」の説明を入力します。
この問題を解決するために、以下のようなコードをThemeName.themeに追加しました：

function ThemeName_form_alter(&$form, $form_state, $form_id) {
  if ( $form['#form_id'] == 'user_login_form' ) {
    $form['actions']['submit']['#attributes']['class'][] = 'button glow button-primary expanded';
    $form['keys']['#attributes']['placeholder']['name'] = t('User name');
    $form['keys']['#attributes']['placeholder']['password'] = t('Password');
  }
}

いろいろな方法で試してみましたが、結果が出ません。最後に私は下の画像のようなものを達成したいと思います：
enter image description here

私はこのページを読みましたが、Drupal 8：
ユーザー登録フォームとユーザーログインフォームのフィールドを変更するには？
デフォルトのユーザー登録ページの変更
ユーザーログインブロックのカスタマイズ

8formstheming
7
Mojtaba Reyhani

Hook_form_alter（）でプレースホルダーを追加できます。

/**
 * Implements hook_form_alter().
 * @param $form
 * @param \Drupal\Core\Form\FormStateInterface $form_state
 * @param $form_id
 */
function ThemeName_form_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id) {
  if ($form_id == 'user_login_form' ) {
    // Add placeholders.
    $form['name']['#attributes']['placeholder'] = t('User name');
    $form['pass']['#attributes']['placeholder'] = t('Password');
  }
}

Devel module 関数を使用して、kintを使用してフォームを出力します。これにより、$ form配列の構造全体を視覚的に確認できます。

9
Jeff Burnz

https://www.drupal.org/project/simplelogin

これは、カスタマイズのためのシンプルなモジュールですDrupalログイン、パスワード、および背景画像付きの登録ページ。

管理者は、ユーザーが自分の背景画像/独自の背景色をユーザーのログイン、パスワード、登録ページに添付できるようにする機能を提供できます。背景色、画像設定のカスタマイズなどの優れた機能。

機能：クリーンで洗練されたデザイン、背景色のカスタマイズ、リンクの色、送信ボタンの色、画像設定のカスタマイズ、背景画像の不透明度、simpleloginページからの不要なCssファイルの削除、ログインページラッパーの幅、モバイルレスポンシブ、

1
Satheesh kumar