Меняем страницу логина в админку WordPress

Изначально наша форма входа выглядит следующим образом:

форма входа wordpress

Если говорить о простой смене логотипа, то реализуется это весьма просто. Первым делом вам нужно создать соответствующую картинку, которая по размерам будет похожа на базовое лого WordPress, стандартные размеры логотипа 84х84 пикселей. Стандартные размеры логотипа можно изменить, зайдя по адресу wp-admin -> css -> файл wp-admin.min.css и отредактировать свойства  .login h1 a, однако при обновлении wordpress все настраиваемые стили вернутся по умолчанию. Как правильно изменить размер логотипа вы увидите чуть позже.

Сохранять логотип лучше с прозрачным фоном в формате PNG. Потом загружаем изображение на ФТП в директорию images используемого вами шаблона.

Следующих шаг — в разделе «Внешний вид» — «Редактор» открываем файл functions.php. Вставляем в конец, перед тегом ?> (если такой есть) следующий код:

Обратите внимание на строку №4
/images/logo.jpg — это путь картинки.
logo.jpg — имя картинки (если вы назвали картинку по своему, тогда здесь следует заменить).

Обратите внимание на строку №9
Мы убираем ссылку с логотипа на сайт wordpress.org  и устанавливаем ссылку на главную страницу сайта.

Обратите внимание на строку №12
Мы убираем подсказку «Сайт работает на WordPress», которая выскакивает при наведении на логотип курсор мышки.

Взглянем на результат:

форма входа wordpress

Плагин Erident Custom Login and Dashboard Settings

Если вам нужно нечто большее, чем просто замена логотипа, то проще всего обратиться за помощью к соответствующему плагину. Теоретически вы, конечно, можете поискать нужные файлы ядра системы и подправить код непосредственно в них, но после обновления системы WordPress все эти изменения пропадут. С плагином же такого не случится. Кроме того, с помощью настроек в частности BM Custom Login пользователь сможет самостоятельно править разные параметры для страницы и формы логина.

1. Устанавливаем и активируем плагин Erident Custom Login and Dashboard.kak-izmenit-formu-vhoda-v-wordpress

2. После активации плагина переходим к настройкам плагина: Настройки -> Custom Login and Dashboard.

kak-izmenit-formu-vhoda-v-wordpress

Замена фона на форме входа WordPress

3. Для замены стандартного фона переходим на вкладку настроек «Login Screen Background».

kak-izmenit-formu-vhoda-v-wordpress

  • Login Screen Background Color — сделать фон одним цветом
  • Login Screen Background Color — загрузить изображение на фон
  • Login Screen Background Repeat — фоновое изображение повторять/не повторять/повтор по оси Х/повтор по оси Y 
  • Background Position — привязка фонового изображения
  • Background Size — размер фонового изображения

Замена логотипа на форме входа WordPress

4. Для замены стандартного логотипа переходим на вкладку настроек «Login Screen Logo».

kak-izmenit-formu-vhoda-v-wordpress

  • Logo URL — задаем наш логотип
  • Logo Width — ширина лого
  • LogoHeight — высота лого
  • Powered by Text — текст при наведении на лого

Настройка формы входа

5. Настроить форму входа с помощью этого плагина также очень просто. На вкладке «Login form Setting» можно настроить размеры формы (Login form width), изменить фон на картинку или сплошной цвет (Login Form Background Color), а также изменить:

kak-izmenit-formu-vhoda-v-wordpress

  • Login form width — ширина формы
  • Login Form Border Radius — радиус рамки формы
  • Login Border Style — стиль рамки формы
  • Login Border Thickness — толщина рамки
  • Login Border Color — цвет рамки
  • Login Form Background Color — цвет фона формы
  • Login Form Background Image — фоновое изображение формы
  • Login Form Background Repeat — повторение фонового изображения
  • Background Position — позиция фонового изображения
  • Login Form Label Text Color — цвет лейбл текста
  • Login Form Label Text Size — размер лейбл текста
  • Login Form Input Text Color — цвет текста в поле ввода
  • Login Form Input Text Size — размер текста в поле ввода
  • Login Form Link Color — цвет ссылок
  • Enable link shadow? — тень для ссылок
  • Login Form Link Shadow Color — цвет тени для ссылок
  • Enable form shadow? — тень для формы логина
  • Login Form Shadow Color — цвет тени формы логина
  • Login Button Color — цвет кнопки
  • Hide Register | Lost your password link — скрыть ссылку регистрации/восстановления пароля
  • Hide Back to your website link — скрыть ссылку возврата на ваш сайт

Вот что в итоге получилось:

kak-izmenit-formu-vhoda-v-wordpress

Экспорт/импорт настроек

kak-izmenit-formu-vhoda-v-wordpress

6. Можно сохранить настройки плагина в формате .json во вкладке Export Settings. Либо импортировать настройки, чтобы получить такую же форму входа.

Как видите, сложного совершенно ничего нету. Плагин очень простой в использовании и интуитивно понятен, даже не смотря на отсутствие перевода на русский язык.

В случае если у Вас возникли вопросы или что-то не получилось — смело пишите в комментариях.