Багатьом з вас напевно добре відома сторінка WordPress wp-login.php, використовується як сторінка для авторизації. Виглядає і працює вона відмінно.
Але коли справа доходить до створення веб-сайту для клієнтів, швидше за все, ви захочете мати більш гнучко настроюється сторінку авторизації, щоб вона була єдиною з ідеєю дизайну сайту.
Крім того, зайшовши на нестандартну сторінку авторизації, яка була зроблена спеціально під ваш сайт, клієнти будуть мати наочне уявлення про рівні організації.
Якщо це те, чого вам не вистачає на сайті — приступайте до вивчення інструкції, викладеної в даній статті.
Користувацька сторінка авторизації
Отже, перше, що нам потрібно, це створити шаблон сторінки входу. Для цього ми створюємо сторінку шаблону і називаємо її, наприклад, page-login.php.
Потім, створюємо нову сторінку в панелі адміністрування і ставимо постійне посилання для сторінки авторизації.
WordPress автоматично підчепить шаблон page-login.php:
Форма входу
Помістіть тег wp_login_form в код шаблону page-login.php для відображення форми авторизації:
Наступна частина необов’язкова, але в деяких випадках вона може бути використана. Ми можемо налаштувати такі частини форми, як сторінка для редіректу після успішної авторизації, поля зміни користувача і пароля і так далі:
home_url(),
‘id_username’ => ‘user’,
‘id_password’ => ‘pass’,
)
;?>
Тут же ви можете, наприклад, додати такі штуки як логотип і опис вашого сайту:
Hongkiat.com
Тестове опис сайту.
home_url(),
‘id_username’ => ‘user’,
‘id_password’ => ‘pass’,
)
;?>
Тепер приступимо до налаштування вигляду сторінки за допомогою CSS-стилів. У цьому прикладі я покажу, як виглядає моя сторінка для входу.
У неї темний фон з блакитний кнопкою, які відповідають темі сайту Hongkiat.com:
Перевірка зв’язки ім’я-пароль
У цій частині сторінка вже функціонує. Ми можемо спробувати авторизуватися, і якщо вхід успішно нас перекине на сторінку, яку ми вказали в параметрі redirect на попередньому кроці. Але є ще дещо, на що ми звернемо нашу увагу.
По-перше, сторінка wp-login.php досі залишається доступною. Варто поставити редирект з wp-login.php на створену нами сторінку, щоб наші клієнти могли на неї потрапити.
Для цього потрібно додати наступний код у файл functions.php використовується вами теми WordPress:
function redirect_login_page() {
$login_page = home_url( ‘/login/’ );
$page_viewed = basename($_SERVER[‘REQUEST_URI’]);
if( $page_viewed == «wp-login.php» && $_SERVER[‘REQUEST_METHOD’] == ‘GET’) {
wp_redirect($login_page);
exit;
}
}
add_action(‘init’,’redirect_login_page’);
Не забудьте присвоїти змінній $login_page значення адреси вашої сторінки для входу.
По-друге, сторінка авторизації працює так як задумано тільки у випадку, якщо спроба входу вдалася. Але, що відбувається, якщо вхід не вдався?
Наприклад, введена невірна пара логін-пароль або залишено порожнє поле. Нас знову викине на wp-login.php.
Щоб уникнути цього додаємо наступну функцію в файл functions.php:
function login_failed() {
$login_page = home_url( ‘/login/’ );
wp_redirect( $login_page . ‘?login=failed’ );
exit;
}
add_action( ‘wp_login_failed’, ‘login_failed’ );
function verify_username_password( $user, $username, $password ) {
$login_page = home_url( ‘/login/’ );
if( $username == «» || $password == «» ) {
wp_redirect( $login_page . «?login=empty» );
exit;
}
}
add_filter( ‘authenticate’, ‘verify_username_password’, 1, 3);
Дві ці функції виконують кілька завдань: переадресують користувачів в разі невдалої спроби входу і дописують до URL-адреси рядка запиту login значення failed або empty:
Остання проблема, яку ми вирішимо це редирект до wp-login.php при виході з сайту. Нам варто визначити сторінку редіректу для коректного переходу при натисканні кнопки виходу:
function logout_page() {
$login_page = home_url( ‘/login/’ );
wp_redirect( $login_page . «?login=false» );
exit;
}
add_action(‘wp_logout’,’logout_page’);
Повідомлення про помилку
Ми будемо показувати користувачеві повідомлення, і коли трапляється помилка, і коли він виходить з сайту за допомогою query string, значення якої ми помістили в URL. Для того щоб отримати значення з рядка запиту, ми будемо використовувати змінну $_GET.
Розмістіть код, наведений нижче, в шаблон сторінки авторизації:
$login = (isset($_GET[‘login’]) ) ? $_GET[‘login’] : 0;
Код, наведений вище, перевіряє, чи має змінна login що-небудь і в іншому випадку прирівнює її до значення 0.
Також ми будемо відображати повідомлення, засновані на значенні змінної $error:
if ( $login === «failed» ) {
echo ‘
ERROR: Invalid username and/or password.
‘;
} elseif ( $login === «empty» ) {
echo ‘
ERROR: Username and/or Password is empty.
‘;
} elseif ( $login === «false ) {
echo ‘
ERROR: You are logged out.
‘;
}
І нижче, власне, приклад того, як може таке повідомлення виглядати:
Висновок
Залишилося ще кілька речей, які ми можемо додати до сторінки авторизації. Наприклад, посилання на сторінку відновлення пароля, посилання на сторінку реєстрації нового користувача і персоналізовані повідомлення про помилки.
Але з іншого боку, наша сторінка повністю функціональна, дозволяє користувачам входити на сайт і виходити з нього, і тому я вважаю це непоганий точкою для старту. Далі можна додавати той функціонал, який ви забажаєте.
Сподіваюся, це керівництво виявиться для вас корисною!
Переклад статті «How To Build A Fully Customized WordPress Login Page» був підготовлений дружною командою проекту Сайтостроение від А до Я.
