Завантажити матеріали по даній статті

Це перша з шести частин циклу «Користувацька настройка панелі адміністрування 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() { ?>
.login #login h1 a {
background-image: url( );
}

З допомогою даної функції тепер форма авторизації виводиться з логотипом. Як це показано на скріншоті.

Користувацька настройка панелі адміністрування WordPress: Форма входу

2. Налаштування стилю форми авторизації.

Після того, як ви додали логотип, ви також можете змінити його розмір, щоб він відповідав стилям вашої теми. А, крім того, додати стилі для інших елементів.

Налаштування стилю логотипу

Логотип на скріншоті, який показаний трохи вище, виглядає трохи приплюснутим, тому що він повинен вписатися в розміри, задані для цього об’єкта за замовчуванням. Я збираюся налаштувати ці параметри під себе.
Для цього потрібно змінити код нашого плагіна, який тепер буде виглядати наступним чином:

// додати новий логотип до форми входу
function wptutsplus_login_logo() { ?>
.login #login h1 a {
background-image: url( );
background-size: 300px auto;
height: 70px;
}

Значення висоти, яке ви задаєте, буде залежати від співвідношення сторін вашого логотипу. Якщо задати значення «300px auto» для background-size, то по ширині ваш логотип буде таким же, як панель авторизації, при цьому буде зберігатися співвідношення висоти до ширини. Це гарантує, що виведене зображення розміститься повністю на екрані монітора.

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

Користувацька настройка панелі адміністрування WordPress: Форма входу

Набагато краще, чи не правда? Але розміри логотипу не єдине, що я можу змінити в стилях. Як щодо того, щоб поміняти кольори деяких елементів?

Налаштування стилю посилань

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

// додати новий логотип до форми входу
function wptutsplus_login_logo() { ?>
.login #login h1 a {
background-image: url( );
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;
}

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

Користувацька настройка панелі адміністрування WordPress: Форма входу

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

Налаштування стилю кнопки

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

// додати новий логотип до форми входу
function wptutsplus_login_logo() { ?>
.login #login h1 a {
background-image: url( );
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 */
}

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

Висновок

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

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