Хук login_head используется для вставки дополнительных элементов в секцию <head> страницы входа WordPress (wp-login.php). С его помощью можно добавлять кастомные стили, скрипты и другие элементы, такие как фавиконки или мета-теги. Это особенно полезно для изменения внешнего вида формы авторизации и интеграции элементов брендинга.
login_head срабатывает после того, как на страницу входа подключены все необходимые скрипты и стили. Хук позволяет разработчикам кастомизировать оформление и функциональность страницы авторизации без изменений в ядре WordPress.
do_action( 'login_head' );
Пример 1: Изменение цвета фона страницы входа
В этом примере с помощью CSS изменим цвет фона страницы авторизации на более яркий, что может использоваться для придания уникального внешнего вида.
<?php
add_action( 'login_head', 'custom_login_background_color' );
function custom_login_background_color() {
?>
<style>
body.login {
background-color: #4CAF50;
}
</style>
<?php
}
Здесь цвет фона установлен на зеленый оттенок, что создает свежий и яркий вид для страницы входа.
Пример 2: Замена логотипа WordPress на кастомный логотип
Этот пример показывает, как заменить стандартный логотип WordPress на собственный логотип, используя CSS для его стилизации.
<?php
add_action( 'login_head', 'custom_login_logo' );
function custom_login_logo() {
?>
<style>
h1 a {
background-image: url('<?php echo get_stylesheet_directory_uri(); ?>/images/custom-logo.png') !important;
width: 300px !important;
height: 100px !important;
background-size: contain;
margin: 0 auto;
}
</style>
<?php
}
Этот код подгружает изображение логотипа из папки темы и стилизует его для соответствия размерам. Для работы этого примера загрузите файл логотипа custom-logo.png в папку /images вашей темы.
Пример 3: Добавление фавиконки на страницу входа
Фавиконка добавляет визуальную идентификацию в браузере, помогая пользователю быстрее распознавать страницу входа. Следующий пример показывает, как добавить фавиконку на страницу авторизации.
<?php
add_action( 'login_head', 'custom_login_favicon' );
function custom_login_favicon() {
?>
<link rel="icon" href="<?php echo get_stylesheet_directory_uri(); ?>/images/favicon.ico" type="image/x-icon">
<?php
}
Для этого примера загрузите файл favicon.ico в папку /images вашей темы. Теперь при открытии страницы входа пользователи будут видеть ваш уникальный значок в адресной строке браузера.
Пример 4: Добавление скрипта для проверки полей формы
Вы можете использовать JavaScript для проверки обязательных полей, например, поля логина, перед отправкой формы. Это добавит дополнительную проверку на стороне клиента.
<?php
add_action( 'login_head', 'add_custom_login_validation_script' );
function add_custom_login_validation_script() {
?>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
const loginForm = document.getElementById('loginform');
loginForm.addEventListener('submit', function(event) {
const username = document.getElementById('user_login').value;
if (!username) {
alert('Пожалуйста, введите логин.');
event.preventDefault();
}
});
});
</script>
<?php
}
Этот код добавляет проверку, чтобы убедиться, что поле логина не пустое. Если оно не заполнено, пользователю будет выведено предупреждение, и форма не отправится.
Заключение
Хук login_head предлагает разработчикам гибкость в настройке страницы входа. Вы можете добавить свои стили, заменить стандартный логотип, добавить фавиконку и даже включить проверку полей формы.
