Змінюємо дизайн сторінки авторизації у WordPress

На заключному етапі розробки дизайну для WordPress можна створити власний вигляд сторінки входу адміністратора. Даний урок буде про те, як легко це зробити без використання плаґінів.

Навіщо це робити

Більшість веб-сайтів, які використовують WordPress, мають загальний дизайн сторінки входу. Однак, деякі клієнти можуть захотіти брендувати усі частини сайту.

Я покажу вам, як я змінив сторінку входу для «Продизайн». Це досить просто, ви можете використовувати власні CSS та jQuery файли без необхідності використання сторонніх плаґінів.

Структура шаблону

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

Змінюємо functions.php

function custom_login() {
    $files = '

              
              ';
    echo $files;
}
add_action('login_head', 'custom_login');

Перший крок — вписуємо нову функцію у файл functions.php. Потім, заносимо всі потрібні файли в одну змінну ($files) і виводимо її. Я можу підключити файли, які знаходять в каталозі теми використовуючи функцію get_bloginfo(‘template_directory’). Також, я підключив урізану версію фреймворку jQuery.

function custom_login_url() {
    echo bloginfo('url');
}
add_filter('login_headerurl', 'custom_login_url');

function custom_login_title() {
    echo get_option('blogname');
}
add_filter('login_headertitle', 'custom_login_title');

Я додав ще дві функції. Перша — змінює посилання логотипу, яке тепер буде вести на головну сторінку веб-сайту (замість wordpress.org). Друга — змінює заголовок сторінки. В нашому випадку, ми отримаємо в заголовку назву сайту. На цьому з PHP завершено ;)

Змінюємо CSS

Тут вже буде трохи складніше тому, що вам потрібно дивитися на DOM для того, щоб знайти ті елементи, які можна змінити. Також потрібно перевизначити CSS правила на сторінці. В цьому вам допоможуть інструменти розробника. Я буду використовувати Chrome, тому для виклику даного інструмента просто необхідно натиснути F12. Якщо ви не використовуєте Chrome, а наприклад, Firefox, тоді можете використати або вбудовані інструменти для розробки, або Firebug.

Зараз ми будемо працювати з файлом login.css, який знаходиться в каталозі css активної теми. Тож, якщо у вас досі немає такого файлу/каталогу, то вам потрібно його створити.

Давайте змінимо фон сторінки.

body.login {
    background: url('../images/login_bg2.png')
}

Змінимо логотип.

body.login h1 a {
    background: url('../images/logo.png') center center no-repeat transparent;
    margin: 0 auto 30px;
    opacity: 0.5;
    padding: 0;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

body.login h1 a:hover {opacity: 1;}

Файл «logo.png» повинен знаходитися в папці «images» вашої поточної теми.

Змінюємо стилі форми.

.login form {
    border: 1px solid #ddd;
    -moz-border-radius:0;
    -webkit-border-radius:0;
    -o-border-radius:0;
    -ms-border-radius:0;
    border-radius:0;
    -moz-box-shadow:inset 0 0 25px #eee;
    -webkit-box-shadow:inset 0 0 25px #eee;
    -o-box-shadow:inset 0 0 25px #eee;
    -ms-box-shadow:inset 0 0 25px #eee;
    box-shadow:inset 0 0 25px #eee;
    padding-top: 0;
    font:16px "Trebuchet MS", Verdana, Arial, Tahoma, sans-serif;
}

Змінюємо стилі текстових полів

.login form input[type=text],.login form input[type=password] {
    border: 0;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    -o-box-shadow:none;
    -ms-box-shadow:none;
    box-shadow:none;
    -moz-border-radius:0;
    -webkit-border-radius:0;
    -o-border-radius:0;
    -ms-border-radius:0;
    border-radius:0;
    padding: 5px;
    background: #fff;
    font:800 16px "Trebuchet MS", Verdana, Arial, Tahoma, sans-serif;
    border-bottom: 1px solid #ccc
}
.login form input[type=text]:focus,.login form input[type=password]:focus {
    border-bottom: 1px solid #777
}

Додаємо трохи простору після текстових полів

.login form .forgetmenot,.login form .submit {
    margin-top: 10px
}

Змінюємо стиль кнопки «Вхід».

.login form #wp-submit {
    border-radius: 5px;
    background: orange;
    border: 0;
    text-shadow:none;
    -moz-transition:background 0.25s ease, color 0.25s ease;
    -webkit-transition:background 0.25s ease, color 0.25s ease;
    -o-transition:background 0.25s ease, color 0.25s ease;
    -ms-transition:background 0.25s ease, color 0.25s ease;
    transition:background 0.25s ease, color 0.25s ease;
}
.login form #wp-submit:hover {
    background: #000;
    color: orange
}
.login form #wp-submit:active {
    margin-top: 1px
}

Змінюємо колір посилання «Забули пароль?» і ховаємо посилання «Повернутись до Журнал «Продизайн».

#nav {
    text-align: center;
}
#nav a {
    border-bottom: 1px dotted #21759B;
    text-decoration: none;
}
#nav a:hover {
    border-bottom: 1px dotted #D54E21
}
#backtoblog {
    display: none;
}

Підключаємо jQuery

Переходимо до файлу login.js. Я хочу додати placholder-и для input-ів і видалити label-и.

$(document).ready(function() {
    $('#loginform input[type="text"]').attr('placeholder', 'Лоґін');
    $('#loginform input[type="password"]').attr('placeholder', 'Пароль');

    $('#loginform label[for="user_login"]').contents().filter(function() {
        return this.nodeType === 3;
    }).remove();
    $('#loginform label[for="user_pass"]').contents().filter(function() {
        return this.nodeType === 3;
    }).remove();
});

Тут все досить просто. За допомогою метода attr я створив placeholder-и, а за допомогою filter видалив текст з усіх label-ів.

Результат роботи

Використовуючи прості WordPress функції, трохи CSS та jQuery можна легко змінити сторінку входу адміністратора без необхідності використання сторонніх плаґінів.

Першоджерело — «Create a Custom WordPress Login Without Plugins».