Страница входа (wp-login.php) в WordPress имеет достаточно унылый и скучный дизайн и было бы неплохо изменить стилизацию этой страницы на свой вкус и цвет. Для того, чтобы сделать персональный дизайн при входе в административную панель WordPress, существует большое количество плагинов, однако все они делают то, что можно сделать своими силами, сэкономив при этом не мало производительности, которая потребовалась бы для работы плагина. Итак в данной статье мы рассмотрим простой путь изменения стилей страницы входа в админ панель.
Для примера страница входа на наш блог выглядит следующим образом.
Изменение стиля страницы авторизации WordPress
Для модификации стилей страницы входа, нам необходимо создать CSS файл с новыми стилями, загружаемую специальной функцией, которую мы добавим с помощью WordPress метода add_action( ).
Шаг 1. Изменяем functions.php.
Итак зайдите в папку с вашей темой и создайте новый файл стилей custom-login-page.css, затем откройте в этой папке файл functions.php и добавьте в него указанный ниже код.
|
1 2 3 4 5 6 7 |
// Добавляем файл стилей в тег <head> add_action('login_head', 'custom_login_page'); // Функция, которая подключает наш файл стилей к странице входа function custom_login_page() { echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo( 'stylesheet_directory' ) . '/custom-login-page.css" />'; } |
Шаг 2. Изменяем custom-login-page.css
Выполнив предыдущий шаг, зайдите в недавно созданный файл custom-login-page.css и скопируйте в него следующий ниже код. Он содержит основные CSS селекторы, которые используются для модификации элементов на странице авторизации wp-login.php.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
/* Фон страницы *Может содержать цвет или изображение. *НЕ ЗАБЫВАЙТЕ ИСПОЛЬЗОВАТЬ !important. */ body { background: Whitesmoke url(your-background.jpg) !important; background-size: cover !important; } /*Логотип (ИСПОЛЬЗОВАНИЕ ИЗОБРАЖЕНИЯ ОБЯЗАТЕЛЬНО!) * Не забудьте изменить размеры блока подходящие под Ваш логотип */ #login h1 a { background: url(your-logo.png) no-repeat; background-position: center center; width: 300px; height: 100px; } /* *Блок формы */ #login form { background-color: Grey; } /* Поля ввода * «Имя пользователя» и «Пароль» */ #login .input { background-color: Lightgrey; } /* Лейблы * Текст над полями */ #login label { color: White; font-size: 1rem; } /* * Кнопка «Войти» */ #login input[type=submit] { background-color: Darkorange; border-radius:0px; border:none; border-bottom:4px solid Lightorange; } #login input[type=submit]:active {} /*Ссылки под формой * «Назад к блогу» и «Забыл пароль» */ #nav a, #backtoblog a { color: Black !important; } |
После того как Вы вставили код ваша страница должна выглядеть примерно так, как на изображении ниже. Также на нем показано соответствие селекторов определенным элементам.
Шаг 3. Изменяем ссылку в логотипе.
Изначально блок логотипа является ссылкой на сайт www.wordpress.org, однако Вы легко можете изменить адрес на любой Вам угодный. Для того, чтобы изменить адрес ссылки логотипа на адрес сайта в который производится вход, вставьте ниже данный код в файл functions.php.
|
1 2 3 4 5 6 7 8 9 10 |
function logo_link_url() { return get_bloginfo( 'url' ); //Возвращаем ссылку с названием сайта } add_filter( 'login_headerurl', 'logo_link_url' ); function logo_link_title() { return 'Здесь напишите значение атрибута title для ссылки'; } add_filter( 'login_headertitle', 'logo_link_title' ); |
Если Вы хотите задать ссылку совершенно на другой сайт, то вместо get_bloginfo(‘url’) явно укажите строку с адресом, например “www.meliorem.ru”
Заключение
В данной статье мы рассмотрели как можно легко и быстро, без использования каких либо плагинов, кастомизировать страницу wp-login.php для WordPress. Если Вы знаете какие либо другие способы, то поделитесь с нами в комментариях. Также, если Вам понравилась статья не забывайте делиться ее с друзьями в социальных сетях.