Вопрос или проблема
Я хочу применить тему и стилизовать страницу восстановления пароля без использования плагина. Я не хочу, чтобы отображалась стандартная страница восстановления пароля WordPress. Мне удалось стилизовать форму входа, перенаправив URL на стилизованный вариант, но я не знаю, как стилизовать страницу восстановления пароля.
Какие идеи?
Спасибо!
В файле wp-login.php на строке 586 мы видим следующее:
/**
* Срабатывает перед формой восстановления пароля.
*
* @since 1.5.1
* @since 5.1.0 Добавлен параметр `$errors`.
*
* @param WP_Error $errors Объект `WP_Error`, содержащий любые ошибки, вызванные использованием недействительных
* учетных данных. Обратите внимание, что объект ошибки может не содержать никаких ошибок.
*/
do_action( 'lost_password', $errors );
На строке 631 мы имеем:
/**
* Срабатывает внутри тегов формы восстановления пароля, перед скрытыми полями.
*
* @since 2.1.0
*/
do_action( 'lostpassword_form' );
Это означает, что мы можем оставить форму как есть (чтобы участвовать в обновлениях) и расширить ее с помощью хуков действий.
Например:
add_action( 'lostpassword_form', 'my_function_to_add_logo' ) );
Все остальное, касающееся макета, можно сделать с помощью css.
Гуглы нашел эту страницу: https://code.tutsplus.com/tutorials/build-a-custom-wordpress-user-flow-part-3-password-reset–cms-23811
В основном, вы создаете функцию, которая выполняет работу страницы восстановления пароля. Затем вы вызываете ее вот так:
add_action( 'login_form_lostpassword', 'my_lost_password_page' ) );
function my_lost_password_page() {
// код для выполнения работы по восстановлению пароля
return;
Вы разместите вышеуказанное в файле functions.php вашей дочерней темы.
Вас могут заинтересовать и другие части этого руководства, в котором обсуждается стилизация страниц входа. Обратите внимание, что в руководстве используется пользовательский плагин для выполнения всей работы, что проще, хотя вы могли бы сделать то же самое с помощью кода в вашем файле functions.php. Но ссылка может дать вам отправную точку.
Есть и другие ссылки, которые могут быть полезны, включая Кодекс: https://codex.wordpress.org/Customizing_the_Login_Form; используйте это как отправную точку для ваших усилий.
Ответ или решение
Тема и стиль страницы восстановления пароля в WordPress без плагина
Если вы хотите изменить тему и стиль страницы восстановления пароля в WordPress без использования плагинов, это возможно, используя функции в файле functions.php вашей дочерней темы. Ниже представлен подробный пошаговый процесс, который поможет вам сделать это.
Шаг 1: Создание пользовательской функции
Первым делом вам нужно определить пользовательскую функцию, которая будет содержать ваш собственный код для страницы восстановления пароля. Это можно сделать, добавив следующий код в файл functions.php вашей дочерней темы:
add_action( 'login_form_lostpassword', 'my_lost_password_page' );
function my_lost_password_page() {
// Ваш собственный HTML-код для формы восстановления пароля
?>
<h2><?php _e('Восстановление пароля', 'textdomain'); ?></h2>
<form method="post" action="<?php echo esc_url( $_SERVER['REQUEST_URI'] ); ?>">
<p>
<label for="user_login"><?php _e('Имя пользователя или адрес электронной почты', 'textdomain'); ?></label>
<input type="text" name="user_login" id="user_login" class="input" value="<?php echo esc_attr( wp_unslash( $_POST['user_login'] ?? '' ) ); ?>" size="20" />
</p>
<p>
<input type="submit" name="retrieve_password" id="retrieve_password" class="button button-primary" value="<?php esc_attr_e('Получить новый пароль', 'textdomain'); ?>" />
</p>
</form>
<?php
return;
}Шаг 2: Использование хуков для добавления контента и стилей
Как вы заметили, в wp-login.php есть хуки, которые позволяют вставлять дополнительный контент. Вы можете использовать lostpassword_form для добавления логотипов, изображений или другого контента в вашу форму. Например, добавить логотип можно следующим образом:
add_action( 'lostpassword_form', 'my_function_to_add_logo' );
function my_function_to_add_logo() {
echo '<img src="' . get_stylesheet_directory_uri() . '/images/logo.png" alt="Логотип" />';
}Шаг 3: Стилизация страницы с помощью CSS
После того, как вы создали пользовательскую страницу, следующий шаг — стилизовать её с помощью CSS. Вы можете добавить стили непосредственно в файл style.css вашей дочерней темы:
.login h2 {
color: #333;
font-size: 24px;
text-align: center;
}
.login form {
background: #f1f1f1;
padding: 20px;
border-radius: 5px;
}
.input {
border: 1px solid #ccc;
padding: 10px;
width: 100%;
margin-bottom: 10px;
}
.button {
background: #0073aa;
color: #fff;
padding: 10px 15px;
border: none;
border-radius: 5px;
cursor: pointer;
}Шаг 4: Перенаправление пользователей
Если вы хотите перенаправить пользователей на вашу кастомную страницу восстановления пароля, вы можете сделать это с помощью фильтров. Например:
add_filter( 'lostpassword_url', 'my_custom_lostpassword_url' );
function my_custom_lostpassword_url( $lostpassword_url ) {
return site_url( '/ваша-страница-восстановления-пароля/', 'login' );
}Заключение
Создание и стилизация страницы восстановления пароля в WordPress без использования плагина — это доступная задача, если вы знаете, как использовать хуки и функции в functions.php. Убедитесь, что все изменения проходят в дочерней теме, чтобы избежать потери данных при обновлении темы.
Эти шаги помогут вам создать уникальный пользовательский интерфейс для страницы восстановления пароля, соответствующий стилю вашего сайта. Если вам необходимо больше информации, рекомендуется ознакомиться с Codex WordPress для дополнительных возможностей настройки.