Хук login_enqueue_scripts позволяет разработчикам подключать кастомные стили и скрипты на страницу входа (wp-login.php) в WordPress. Это удобно для создания уникального дизайна страницы авторизации, добавления интерактивных элементов и улучшения UX на экранах логина и регистрации.
В данной статье рассмотрим, как работает login_enqueue_scripts, примеры его использования и лучшие практики для настройки внешнего вида страницы входа.
do_action( ‘login_enqueue_scripts’ )Хук login_enqueue_scripts срабатывает, когда WordPress готов к подключению файлов стилей и скриптов на странице авторизации. При помощи этого хука можно стилизовать страницу входа, добавлять JavaScript-код для проверки форм, анимации, всплывающие подсказки и другие интерактивные элементы.
Совет: Для вывода других элементов (не скриптов и стилей) в разделе
<head>страницы wp-login.php лучше использовать хукlogin_head.
Использование
Чтобы подключить кастомные стили и скрипты, необходимо зарегистрировать функцию с помощью add_action, передав в нее 'login_enqueue_scripts' в качестве действия.
add_action( 'login_enqueue_scripts', 'custom_login_enqueue_scripts' );
function custom_login_enqueue_scripts() {
// Ваш код для подключения стилей и скриптов
}
Пример #1: Подключение Кастомного CSS для Страницы Входа
Этот пример добавляет CSS-файл login-styles.css, который находится в папке темы. Он позволит изменить оформление формы входа, фона страницы и других элементов.
add_action( 'login_enqueue_scripts', 'custom_login_stylesheet' );
function custom_login_stylesheet() {
wp_enqueue_style( 'custom-login-css', get_template_directory_uri() . '/css/login-styles.css' );
}
В результате этот CSS-файл будет загружен на странице авторизации, позволяя изменить стандартные стили WordPress под уникальный дизайн проекта.
Пример #2: Добавление JavaScript для Валидации Формы Входа
Если нужно добавить проверку формы входа перед отправкой или добавить кастомные сообщения об ошибках, можно подключить JavaScript-файл следующим образом:
add_action( 'login_enqueue_scripts', 'custom_login_script' );
function custom_login_script() {
wp_enqueue_script( 'custom-login-js', get_template_directory_uri() . '/js/login-validation.js', array( 'jquery' ), null, true );
}
Теперь скрипт login-validation.js будет подключен на странице авторизации, и можно добавить логику проверки полей, всплывающие подсказки и другие элементы интерактивности.
Пример #3: Изменение Фона Страницы Входа
В этом примере создадим инлайн-стиль для изменения фона страницы входа в зависимости от времени суток. Стили будут добавлены с помощью функции wp_add_inline_style.
add_action( 'login_enqueue_scripts', 'dynamic_login_background' );
function dynamic_login_background() {
$background_color = date( 'H' ) >= 18 ? '#2c3e50' : '#ecf0f1'; // Темный фон вечером
wp_enqueue_style( 'login-custom-style', get_template_directory_uri() . '/css/login-styles.css' );
wp_add_inline_style( 'login-custom-style', "body.login { background-color: $background_color; }" );
}
Пример #4: Стилизация Сообщений Об Ошибках
Добавим JavaScript для отображения кастомных сообщений об ошибках при вводе неправильных данных. Этот скрипт изменит текст сообщения об ошибке в зависимости от введенных данных.
add_action( 'login_enqueue_scripts', 'custom_error_messages_script' );
function custom_error_messages_script() {
wp_enqueue_script( 'error-messages', get_template_directory_uri() . '/js/custom-error-messages.js', array( 'jquery' ), null, true );
}
Файл custom-error-messages.js может содержать следующий код:
jQuery(document).ready(function($) {
$('#loginform').on('submit', function(event) {
const username = $('#user_login').val();
const password = $('#user_pass').val();
if (username === '' || password === '') {
event.preventDefault();
alert('Пожалуйста, заполните все поля');
}
});
});
Этот код покажет всплывающее сообщение, если поля логина или пароля пусты, улучшая пользовательский опыт.
Заключение
Хук login_enqueue_scripts — это мощный инструмент для кастомизации страницы входа в WordPress. С его помощью можно добавлять стили и скрипты, которые изменят стандартный вид страницы авторизации, сделают её более привлекательной и удобной для пользователей.