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

Страница входа (wp-login.php) в WordPress имеет достаточно унылый и скучный дизайн и было бы неплохо изменить стилизацию этой страницы на свой вкус и цвет. Для того, чтобы сделать персональный дизайн при входе в административную панель WordPress, существует большое количество плагинов, однако все они делают то, что можно сделать своими силами, сэкономив при этом не мало производительности, которая потребовалась бы для работы плагина. Итак в данной статье мы рассмотрим простой путь изменения стилей страницы входа в админ панель.

Для примера страница входа на наш блог выглядит следующим образом.

Страница входа для сайта на Вордпресс
Кастомная страница входа в учетную запись WordPress

Изменение стиля страницы авторизации WordPress

Для модификации стилей страницы входа, нам необходимо создать CSS файл с новыми стилями, загружаемую специальной функцией, которую мы добавим с помощью WordPress метода add_action( ).

Шаг 1. Изменяем functions.php.

Итак зайдите в папку с вашей темой и создайте новый файл стилей custom-login-page.css, затем откройте в этой папке файл functions.php  и добавьте в него указанный ниже код.

Шаг 2. Изменяем custom-login-page.css

Выполнив предыдущий шаг, зайдите в недавно созданный файл custom-login-page.css и скопируйте в него следующий ниже код. Он содержит основные CSS селекторы, которые используются для модификации элементов на странице авторизации wp-login.php.

После того как Вы вставили код ваша страница должна выглядеть примерно так, как на изображении ниже. Также на нем показано соответствие селекторов определенным элементам.

Список селекторов страницы входа для вордпресс

Шаг 3. Изменяем ссылку в логотипе.

Изначально блок логотипа является ссылкой на сайт www.wordpress.org, однако Вы легко можете изменить адрес на любой Вам угодный. Для того, чтобы изменить адрес ссылки логотипа на адрес сайта в который производится вход, вставьте ниже данный код в файл functions.php.

Если Вы хотите задать ссылку совершенно на другой сайт, то вместо get_bloginfo(‘url’) явно укажите строку с адресом, например “www.meliorem.ru

Заключение

В данной статье мы рассмотрели как можно легко и быстро, без использования каких либо плагинов, кастомизировать страницу wp-login.php для WordPress. Если Вы знаете какие либо другие способы, то поделитесь с нами в комментариях. Также, если Вам понравилась статья не забывайте делиться ее с друзьями в социальных сетях.