Как изменить внешний вид страницы входа на WordPress-сайте?

Часто на своих сайтах владельцы желают полностью изменить внешний вид страницы входа на WordPress-сайт, которая, по умолчанию, выглядит следующим образом:

Страница авторизации на WordPress-сайте

Что можно изменить на странице входа?

WordPress не предоставляет каких-либо инструментов для изменения страницы авторизации. Для этого воспользуемся сторонним решением — бесплатным плагином Customize WordPress Login Page.

Он позволяет кастомизировать следующие элементы страницы входа:

  • стандартный логотип WordPress (в одной из наших статей мы уже писали об этой возможности, используя плагин Login Logo Editor);
  • фон страницы;
  • размер, тип шрифта и цвет формы, ее кнопок, ссылок;
  • добавить социальные кнопки и много другое.

Итак, после установки и активации Customize WordPress Login Page, в админ-панели нужно открыть раздел Настройки -> Admin Custom Login.

Страница настроек плагина Customize WordPress Login Page

Первое, что необходимо сделать, — это включить возможность изменять внешний вид страницы. Для этого следует в опции Admin Custom Login Status отметить пункт Enable и нажать кнопку Save Changes.

Страница настроек плагина Customize WordPress Login Page

Дальше рассмотрим по пунктам элементы страницы авторизации, которые будем изменять.

Фон страницы входа

Для этого следует в меню плагина перейти в раздел BACKGROUND DESIGN. Блок Select Background позволит Вам указать тип фона (свое изображение, сплошной цвет или слайдшоу). Сделаем фон страницы синей. Для этого нужно отметить пункт Static Background Color и в блоке Background Color выбрать необходимый цвет.

Выбор цвета страницы входа в плагине Customize WordPress Login Page

После сохранения изменений (кнопка Save Changes) страница входа Вашего сайта будет выглядеть следующим образом:

Страница авторизации на WordPress-сайте

Форма на странице входа

Для настройки формы на странице входа существует отдельный блок LOGIN FORM SETTING.

Настройка формы на странице входа в плагине Customize WordPress Login Page

В этом разделе можно задать форме следующие параметры:

  • позиционирование (настройка Login Form Position);
  • фон (Login Form Background);
  • прозрачность (Login Form Opacity);
  • ширину (Login Form Width);
  • стиль (Border Style), цвет (Border Color), радиус (Border Radius), толщину (Border Thickness) границы;
  • тень (Enable form shadow) и ее цвет (Form Shadow Color).

Шрифты на странице входа

Для настройки шрифтов служит блок FONT SETTING.

Настройка шрифтов на странице входа в плагине Customize WordPress Login Page

Доступны следующие настройки:

  • цвет заголовка формы (Headline Font Color);
  • цвет текста в полях формы (Input Font Color);
  • цвет ссылок (Link Color);
  • цвет кнопок (Button Color);
  • величина текста в заголовке формы (Headline Font Size);
  • величина текста в полях ввода (Input Font Size);
  • размер шрифта в ссылках (Link Font Size);
  • величина названий кнопок (Button Font Size);
  • активация тени для ссылок (Enable Link shadow?) и их цвет (Link Shadow Color);
  • шрифт заголовка формы (Headline Font Style);
  • шрифт текста в полях ввода (Input Font Style);
  • стиль ссылок (Link Font Style);
  • стиль текста в кнопках (Button Font Style);
  • активация иконок для полей ввода (Enable Input Box Icon?), иконка для поля имени (Icon For user Input Box), иконка для поля пароля (Icon For Password Input Box).

Логотип на странице входа

Кастомизацию логотипа на странице входа можно выполнить, перейдя в раздел LOGO SETTINGS.

Настройка логотипа на странице входа в плагине Customize WordPress Login Page

Для замены стандартного логотипа WordPress необходимо в поле Logo загрузить нужную картинку, нажав кнопку Upload. В этом же разделе присутствует возможность задать иконке высоту (Logo Height) и ширину (Logo Width).

Страница авторизации на WordPress-сайте

Кнопки социальных сетей на странице входа

Для настройки социальных кнопок на странице входа существует раздел SOCIAL SETTINGS. Во-первых, их нужно включить, выбрав одно из значений в блоке Enable Social Icons (внутри формы, снаружи или оба варианта).

Настройка социальных кнопок на странице входа в плагине Customize WordPress Login Page

Тут доступны следующие возможности:

  • размер иконок (Social Media Icon Size);
  • макет иконок (Social Media Icon Layout);
  • цвет иконок (Social Media Icon Color);
  • цвет иконок при наведении на них (Social Media Icon Color On Hover);
  • цвет фона значков (Social Media Icon Background Color);
  • цвет фона значков при наведении на них (Social Media Background Color On Hover).

В блоке Social Profiles Вам нужно будет указать URL-адреса необходимых профайлов в соответствующих социальных сетях.

Для сохранения всех внесенных изменений необходимо нажать кнопку Save Changes.

Некоторые заметки

Кроме самой функции изменения элементов страницы входа на WordPress-сайте, плагин также позволит Вам импортировать/экспортировать свои настройки (раздел EXPORT / IMPORT). Если необходимо вернуть все настройки в первоначальное состояние (как при установке и активации), воспользуйтесь кнопкой Reset Default.

Курс WordPress-разработчик
Если Вам понравилась статья — поделитесь с друзьями
Михаил Петров