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

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

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

Стиль посилань

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

// 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/