Хук login_footer используется для добавления произвольного контента в нижний колонтитул на странице входа в WordPress. Он запускается после вывода формы авторизации, что позволяет интегрировать дополнительные элементы, такие как текстовые блоки, ссылки на страницы поддержки, кастомные стили или скрипты.
Хук login_footer вызывается в файле wp-login.php сразу после отображения формы авторизации. Он позволяет кастомизировать страницу входа без необходимости изменения исходного кода WordPress, что полезно для создания уникального интерфейса, соответствующего брендингу или пользовательским требованиям.
do_action( 'login_footer' );
Пример 1: Добавление приветственного сообщения
Чтобы сделать страницу входа более дружественной, можно добавить блок с приветственным сообщением. В этом примере блок стилизован с использованием CSS для создания яркого и приветливого дизайна.
<?php
add_action( 'login_footer', 'add_welcome_message_to_login_footer' );
function add_welcome_message_to_login_footer() {
?>
<div class="welcome-message">
<p>Добро пожаловать! Мы рады вас видеть!</p>
</div>
<style>
.welcome-message {
width: 300px;
margin: 20px auto;
padding: 15px;
background-color: #3498db;
color: #ffffff;
text-align: center;
font-size: 18px;
border-radius: 5px;
}
</style>
<?php
}
В этом примере блок с текстом «Добро пожаловать! Мы рады вас видеть!» будет добавлен под формой авторизации и стилизован синим фоном.
Пример 2: Добавление ссылки на поддержку
Этот пример добавляет ссылку для перехода на страницу поддержки или обратной связи. Полезно, если пользователи нуждаются в помощи при входе на сайт.
<?php
add_action( 'login_footer', 'add_support_link_to_login_footer' );
function add_support_link_to_login_footer() {
?>
<div class="support-link">
<p><a href="https://example.com/support" target="_blank">Нужна помощь? Свяжитесь с нами</a></p>
</div>
<style>
.support-link {
text-align: center;
margin-top: 15px;
}
.support-link a {
color: #555555;
font-size: 16px;
text-decoration: none;
}
.support-link a:hover {
color: #333333;
text-decoration: underline;
}
</style>
<?php
}
Этот код добавляет текстовую ссылку под формой, направляя пользователя на страницу поддержки сайта. Стилизация ссылки обеспечивает ее легкую доступность.
Пример 3: Включение JavaScript для дополнительной проверки
С помощью login_footer можно подключить JavaScript, чтобы добавить интерактивные элементы или проверить поля ввода перед отправкой формы.
<?php
add_action( 'login_footer', 'add_custom_js_to_login_footer' );
function add_custom_js_to_login_footer() {
?>
<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
}
Здесь добавлен простой JavaScript, который проверяет, заполнено ли поле имени пользователя перед отправкой формы. Если поле пустое, появляется сообщение с просьбой заполнить его, предотвращая отправку формы.
Заключение
Хук login_footer предоставляет возможность кастомизировать нижний колонтитул страницы входа в WordPress, добавляя стилизованные блоки, ссылки или скрипты. Он отлично подходит для создания уникального дизайна или добавления полезных ссылок и проверок.
