Статьи

Настройка администратора WordPress: экран входа

Декабрь 26, 2018

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

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

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

  1. Добавление собственного логотипа
  2. Стилизация экрана входа в систему — логотип, ссылки и кнопки

Что вам нужно для завершения этого урока

Для завершения этого урока вам понадобятся:

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

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

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

1
2
3
4
5
6
7
8
9
/*
Plugin Name: WPTutsPlus Customize the Admin Part 1 — Login Screen
Plugin URI: http://rachelmccollin.co.uk
Description: This plugin supports the tutorial in wptutsplus.
Version: 1.0
Author: Rachel McCollin
Author URI: http://rachelmccollin.com
License: GPLv2
*/

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

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

  1. Во-первых, создайте папку с именем media внутри папки плагинов и загрузите в нее свой логотип.
  2. В файле плагина (или файле функций) добавьте следующую функцию, прикрепив ее к login_enqueue_scripts действий login_enqueue_scripts :
01
02
03
04
05
06
07
08
09
10
// 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’ );
?>

Это добавит ваш логотип на экран входа в систему, как показано на скриншоте.

Customizing-The-WordPress-админ-part1-Логин-экран-с-настраиваемого логотипом

2. Стиль экрана входа

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

Стилизация логотипа

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

Измените код в вашем плагине так, чтобы он читался следующим образом:

01
02
03
04
05
06
07
08
09
10
11
12
// 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 предоставит достаточно места для вашего логотипа.

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

Customizing-The-WordPress-админ-part1-Логин-экран-с-настраиваемого логотипом-изменить размер

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

Ссылки по стайлингу

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
// 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’ );
?>

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

Customizing-The-WordPress-админ-part1-Логин-экран-с-рестайлинговых-ссылки

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

Стилизация кнопки

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

01
02
03
04
05
06
07
08
09
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
// 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;
            background: -moz-linear-gradient(top, #27adab 0%, #135655 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#27adab), color-stop(100%,#135655));
            background: -webkit-linear-gradient(top, #27adab 0%,#135655 100%);
            background: -o-linear-gradient(top, #27adab 0%,#135655 100%);
            background: -ms-linear-gradient(top, #27adab 0%,#135655 100%);
            background: linear-gradient(to bottom, #27adab 0%,#135655 100%);
        }
        .login .button-primary:hover {
            background: #85aaaa;
            background: -moz-linear-gradient(top, #85aaaa 0%, #208e8c 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#85aaaa), color-stop(100%,#208e8c));
            background: -webkit-linear-gradient(top, #85aaaa 0%,#208e8c 100%);
            background: -o-linear-gradient(top, #85aaaa 0%,#208e8c 100%);
            background: -ms-linear-gradient(top, #85aaaa 0%,#208e8c 100%);
            background: linear-gradient(to bottom, #85aaaa 0%,#208e8c 100%);
        }
    </style>
<?php }
add_action( ‘login_enqueue_scripts’, ‘wptutsplus_login_logo’ );
?>

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

Резюме

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

38
Share: