Пользовательская настройка панели администрирования WordPress: Форма входа

Скачать материалы по данной статье

видеть логотип компании

Это первая из шести частей цикла «Пользовательская настройка панели администрирования WordPress»:

1. Пользовательская настройка панели администрирования WordPress: Форма входа;

2. Пользовательская настройка панели администрирования WordPress: панель управления сайтом;

3. Настраиваем панель администрирования WordPress: пользовательское меню администрирования;

4. Настройка административной панели WordPress: текстовая справка;

5. Настройка панели администрирования WordPress – списки объектов;

6. Настраиваем панель администрирования WordPress – изменяем стиль элементов.

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

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

Вот этапы, которые я собираюсь описать в этой статье:

  • Добавление пользовательского логотипа;
  • Стилизация формы входа — логотип, ссылки и кнопки.

Что вам потребуется, выполнить задачи, описанные в этой статье

Для выполнения задач из данной статьи вам нужно будет:

  • Установить соответствующие права доступа к папке плагинов WordPress вашего сайта;
  • Выбрать редактор, в котором вы будете писать ваш плагин.

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

В верхней части кода плагина я добавляю следующие строки:

/*
Название плагина: WPTutsPlus Customize the Admin Part 1 - Login Screen
URI плагина: http://rachelmccollin.co.uk
Описание: Данный плагин иллюстрирует суть текущей статьи. С его помощью производится пользовательская настройка формы входа WordPress login screen.
Версия: 1.0
Автор: Rachel McCollin
Сайт автора: http://rachelmccollin.com
Лицензия: GPLv2
*/

1. Добавляем персональный логотип.

Добавить свой собственный логотип (и сразу придать панели администрирования вашего сайта или сайта клиента более профессиональный вид) довольно просто. Во-первых, в папке плагинов создаем папку, в названии которой указываем, что здесь будет храниться медиа-контент, и загружаем логотип в нее. В файл плагина (или файл функций) добавляем следующий код, в котором прописан запуск сценария login_enqueue_scripts:

// добавить новый логотип к форме входа
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. Настройка стиля формы авторизации.

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

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

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

// добавить новый логотип к форме входа
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, то по ширине ваш логотип будет таким же, как панель авторизации, при этом будет сохраняться соотношение высоты к ширине. Это гарантирует, что выводимое изображение разместится полностью на экране монитора.

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

изображение разместится полностью на экране

Намного лучше, не правда ли? Но размеры логотипа не единственное, что я могу изменить в стилях. Как насчет того, чтобы поменять цвета некоторых элементов?

Настройка стиля ссылок

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

// добавить новый логотип к форме входа
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' );
?>

Теперь стиль ссылок соответствует цветам моего логотипа: ссылка голубого цвета, которая при наведении курсора мыши становится пурпурной.

цветовая гамма логотипа

Примечание: Основная цветовая гамма моего логотипа – синие тона, они хорошо сочетаются с цветом ссылок. Не стоит применять для ваших ссылок цвет, который сильно отличается от гаммы логотипа. Иначе будут проблемы с юзабилити.

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

Последний элемент в данной форме – кнопка «Войти». Она все еще синего цвета. Давайте поменяем его. Вносим изменения в код, который теперь выглядит так:

// добавить новый логотип к форме входа
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 выполняется довольно просто. При этом у пользователей и клиентов, которые авторизуются на сайте под своими логинами, складывается совсем другое впечатление от вашего ресурса. А сама настройка в соответствии с вашими пожеланиями по представлению бренда занимает минимум времени.

Перевод статьи «Customizing the WordPress Admin: The Login Screen» был подготовлен дружной командой проекта Сайтостроение от А до Я.