Форма входа в Drupal 5.x

Сейчас делаю новый сайт на Друпале и захотелось изменить стандартную форму входа. В принципе для человека знающего php думаю не составит труда разобраться в исходном коде, но моя проблема в том что я не знаю php, а также не смог найти где этот самый исходный код формы находится. В данной статье я расскажу о двух способах замены стандартной формы авторизации в Drupal.

Итак после долгих поисков я нашёл два способа.

1. Меняем форму с помощью модуля Сompact forms

Ставим модуль Сompact forms. (Качаем здесь).
Этот модуль придает форме авторизации более компактный вид, а также добавляет пару графических эффектов. При умелом использовании CSS, можно сделать форму как вертикальной, так и горизонтальной. Но к сожалению он работает только под версией 5.x, а также использует JavaScript. И если он у пользователя отключен, то будет отображаться стандартная форма.

2. Пишем форму сами

Второй способ представляет нам намного больше возможностей. Он заключается в замене стандартной формы. Для этого необходимо в файл template.php, который находится в папке с темой, добавить функцию:

1. function phptemplate_flat_login() {
2. global $user;
3. if (!$user->uid) {
4. $message= ‘
5. <div id="login">
6. <h2>Вход в систему</h2>
7. <form action="/user/login" accept-charset="UTF-8" method="post" id="user-login-form">
8. <label for="edit-name">Логин:</label>
9. <div>
10. <input type="text" name="name" id="edit-name" value="" class="form-text" />
11. <div class="float"><a href="/user/register" title="Создать новую учетную запись пользователя.">Регистрация</a></div>
12. </div>
13. <div class="clear"><!—-></div>
14. <label for="edit-pass">Пароль:</label>
15. <div>
16. <input type="password" name="pass" id="edit-pass" class="form-text" />
17. <div class="float"><a href="/user/password" title="Запросить новый пароль по электронной почте.">Забыли пароль?</a></div>
18. </div>
19. <div class="clear"><!—-></div>
20. <input type="hidden" name="form_id" id="edit-user-login" value="user_login" />
21. <input type="submit" name="op" id="edit-submit" value="Войти" class="form-submit" />
22. </form>
23. </div>
24. ‘;
25. } else {
26. $message= ‘<ul class="admin">
27. <li class="user-name">Пользователь ‘.l($user->name, ‘user/’.$user->uid).’</li>
28. <li class="exit">’.l(’Выйти’, ‘logout’).’</li>
29. </ul>’;
30. }
31. return $message;
32. }

А в шаблоне page.tpl.php указываем где будет выводиться данная форма. Для этого в соответствующее место ставим:

1. <?php echo phptemplate_flat_login ();?>

Все что находится внутри переменной $message является кодом формы. Его можно менять на своё усмотрение. Скрипт сначала выводит форму авторизации, если авторизация прошла успешно, отображается имя пользователя и ссылка “Выйти”.

Вот пример оформления формы стилями:

1. <style>
2. *{padding:0; margin:0;}
3. #login { width:400px;}
4. #login h2 {padding:.5em; font-size:160%; font-family: Tahoma, Verdana, sans-serif; color:#666;}
5. #login form { text-align:left; padding:0 .5em 0 1em;}
6. #login input {width:40%; padding:.3em; float:left; }
7. #login input.form-submit { margin:1em 0 0 0; width:45%;}
8. #login .float a {font-size:90%; padding:0 0 0 .5em;}
9. .float {float:left;}
10. .clear {clear:both;}
11. </style>

Если все сделано верно, получим такой результат:

Хочу отметить что такой вид формы я выбрал не зря. Кнопка “Войти” например должна быть такого же размера как поля ввода логина и пароля, т. к. сейчас появляется все больше мониторов с большим разрешением экрана, а пытаться кликнуть по маленькой кнопочке, согласитесь, довольно неудобно. Поля расположены одно под другим также не случайно. Пользователи привыкли распознавать форму авторизации по двум полям ввода, расположенным одно под другим. Благодаря этому можно в принципе убрать заголовок “Вход в систему”. Но я решил все же оставить, т. к. остальные блоки на сайте, который делаю, также имеют названия. Ссылки “Регистрация” и “Забыли пароль” также не случайно расположены напротив соответствующих полей. Пользователю как бы дается право выбора. Если не зарегистрирован - регистрируйся, а забыл пароль - восстанавливай.

Второй способ я тестировал под версией Друпала 5.7.

Процесс, Веб-стройка
Подписаться на комментарии
Оставить комментарий
Поставить трекбек