Оформляем страницу авторизации WordPress на свой вкус

Страница авторизации WordPress сделано хорошо — она проста в обращении и хорошо выглядит для всех размеров экранов. Но что если вы создаете сайт для клиента, который хочет, чтобы при авторизации пользователи видели его логотип? Или у вас мульти-сайт, и вы хотите, чтобы пользователи видели ваше брендирование? К счастью, вы можете настроить вид страницы авторизации достаточно просто.

Смотрите также:

• Настройка панели администратора WordPress
• Настройка Консоли WordPress для ваших клиентов
• Как настроить WordPress под клиента: нюансы Консоли управления
• Меняем дизайн консоли WordPress с помощью плагина DP Dashboard
• Удаляем пункты меню из Панели управления WordPress

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

| Скачать исходники |

Вот так будет выглядеть конечный результат нашей работы:

Шаги, которые мы продемонстрируем в этом руководстве:

1. Добавление собственного логотипа
2. Стилизация страницы авторизации – логотип, ссылки и кнопки

Что вам понадобится для выполнения этого руководства

Чтобы выполнить это руководство, вам понадобится:

• Установленный WordPress
• Доступ к папке плагинов вашего сайта для добавления нового плагина
• Текстовый редактор для создания плагина

Настройка плагина

Для начала добавим описание плагина:

/*
Plugin Name: WPTutsPlus Customize the Admin Part 1 - Login Screen
Plugin URI: 
Description: This plugin supports the tutorial in wptutsplus. It customizes the WordPress login screen.
Version: 1.0
Author: Rachel McCollin
Author URI: http://rachelmccollin.com
License: GPLv2
*/

Шаг 1. Добавление собственного логотипа

Добавить ваш логотип или логотип вашего клиента на страницу авторизации и придать вашему WordPress-сайту профессиональный вид очень просто.

1. Сначала создайте папку media внутри папки вашего плагина, загрузите в него ваш логотип.
2. В файле плагина (или файле functions.php), добавьте следующую функцию, прикрепите ее к хуку login_enqueue_scripts:

// add a new logo to the login page
function wptutsplus_login_logo() { ?>
    <style type="text/css">
        .login #login h1 a {
            background-image: url( <?php echo plugins_url( 'media/cd-logo-directing-fullcol.png' , __FILE__ ); ?> );
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'wptutsplus_login_logo' );
?>

Это добавит ваш логотип на страницу авторизации, вот как на этой картинке:

Шаг 2. Придайте стиль странице авторизации

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

Стиль для логотипа

Логотип выше немного сплющен по длине. Я собираюсь изменить размер изображения. Отредактируйте код вашего плагина, чтобы он выглядел вот так:

// add a new logo to the login page
function wptutsplus_login_logo() { ?>
    <style type="text/css">
        .login #login h1 a {
            background-image: url( <?php echo plugins_url( 'media/cd-logo-directing-fullcol.png' , __FILE__ ); ?> );
            background-size: 300px auto;
            height: 70px;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'wptutsplus_login_logo' );
?>

Значение высоты будет зависеть от соотношения сторон вашего логотипа. Использование 300px и auto для свойства background-size необходимо для того, чтобы логотип по ширине подходил под поле логина, пропорции будут сохранены, а значение height будет соответствующим вашему логотипу.

Теперь мой логотип выглядит так:

Гораздо лучше! Но изменение размера изображений — не единственная вещь, которую я могу сделать со стилем. Как насчет изменения цветов?

Стиль ссылок

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

// add a new logo to the login page
function wptutsplus_login_logo() { ?>
    <style type="text/css">
        .login #login h1 a {
            background-image: url( <?php echo plugins_url( 'media/cd-logo-directing-fullcol.png' , __FILE__ ); ?> );
            background-size: 300px auto;
            height: 70px;
        }
        .login #nav a, .login #backtoblog a {
            color: #27adab !important;
        }
        .login #nav a:hover, .login #backtoblog a:hover {
            color: #d228bc !important;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'wptutsplus_login_logo' );
?>

Этот код даст мне ссылки в цветах моего логотипа. Цвет ссылок бирюзовый, при наведении становится розовым:

Обратите внимание: поскольку главные цвета моего логотипа в синих тонах, они подходят для ссылок. Если ваш логотип совершенно другого цвета, возможно в целях юзабилити вы не захотите менять цвет ссылок.

Стиль кнопки

Завершающий элемент окна авторизация — кнопка Войти, которая все еще синего цвета. Давайте изменим это. Отредактируйте ваш код вот так:

// add a new logo to the login page
function wptutsplus_login_logo() { ?>
    <style type="text/css">
        .login #login h1 a {
            background-image: url( <?php echo plugins_url( 'media/cd-logo-directing-fullcol.png' , __FILE__ ); ?> );
            background-size: 300px auto;
            height: 70px;
        }
        .login #nav a, .login #backtoblog a {
            color: #27adab !important;
        }
        .login #nav a:hover, .login #backtoblog a:hover {
            color: #d228bc !important;
        }
        .login .button-primary {
            background: #27adab; /* Old browsers */
            background: -moz-linear-gradient(top, #27adab 0%, #135655 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#27adab), color-stop(100%,#135655)); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top, #27adab 0%,#135655 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top, #27adab 0%,#135655 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(top, #27adab 0%,#135655 100%); /* IE10+ */
            background: linear-gradient(to bottom, #27adab 0%,#135655 100%); /* W3C */
        }
        .login .button-primary:hover {
            background: #85aaaa; /* Old browsers */
            background: -moz-linear-gradient(top, #85aaaa 0%, #208e8c 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#85aaaa), color-stop(100%,#208e8c)); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top, #85aaaa 0%,#208e8c 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top, #85aaaa 0%,#208e8c 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(top, #85aaaa 0%,#208e8c 100%); /* IE10+ */
            background: linear-gradient(to bottom, #85aaaa 0%,#208e8c 100%); /* W3C */
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'wptutsplus_login_logo' );
?>

Теперь у меня полностью измененная на мой вкус страница авторизации, а значит, когда мои клиенты или пользователи входят, они видят соответствующую моему бренду страницу, что делает общий вид сайта более профессиональным.

Заключение

Настройка страницы авторизации WordPress достаточно проста, при этом может существенно улучшить впечатление, которое она производит на входящих клиентов и пользователей. Изменяя приведенный выше код под свои потребности и свой бренд, вы можете быстро создать очень профессиональную страницу авторизации.

Источник: wp.tutsplus.com

Алексей Шевченко

редактор wpcafe

Изучает сайтостроение с 2008 года. Практикующий вебмастер, специализирующий на создание сайтов на WordPress. Задать вопрос Алексею можно на https://profiles.wordpress.org/wpthemeus/