Настроить страницу сброса пароля?

На чтение 3 мин Опубликовано 01.10.2024

Содержание

Вопрос или проблема
Ответ или решение
Объяснение кода:
Итог:

Вопрос или проблема

Как мне стилизовать страницу сброса пароля, на которой я ввожу свой новый пароль?

Я пробовал сделать так:

function my_login_stylesheet() {
    wp_enqueue_style( 
        'custom-login', 
        get_template_directory_uri() . '/dist/styles/main.css' 
    );
}
add_action( 'login_enqueue_scripts', 'my_login_stylesheet' );

но это добавило CSS только на страницу входа и страницу “Забыли пароль” (под “Забыли пароль” подразумевается страница, где вы вводите свой email).

Однако я хочу стилизовать страницу сброса пароля (где вы вводите свои пароли).

Woocommerce переопределяет стандартные шаблоны управления аккаунтом своей собственной системой шаблонов на основе шорт-кодов. Используйте этот хуки вместо:

add_action('woocommerce_lostpassword_form', 'do_whatever');

Ответ или решение

Чтобы настроить страницу сброса пароля в WooCommerce, нужно использовать соответствующие хуки и стили. В вашем случае, вы хотите добавить свои стили на страницу, где пользователь вводит новый пароль. Давайте рассмотрим шаги, которые вам нужно предпринять для достижения этого:

Создание функции для подключения стилей. Вы можете использовать хук woocommerce_reset_password для подключения вашего CSS, который будет применяться на странице сброса пароля.
Использование CSS-файла. Убедитесь, что CSS-файл находится в доступной директории.

Вот пример, как это можно сделать:

function my_custom_reset_password_styles() {
    if ( is_account_page() && isset($_GET['action']) && $_GET['action'] === 'reset_password' ) {
        wp_enqueue_style( 
            'custom-reset-password', 
            get_template_directory_uri() . '/dist/styles/main.css' 
        );
    }
}
add_action( 'wp_enqueue_scripts', 'my_custom_reset_password_styles' );

Объяснение кода:

Мы создаем функцию my_custom_reset_password_styles, которая проверяет, находимся ли мы на странице аккаунта и является ли действие «сброс пароля».
Если это так, то подключаем наш CSS-файл, который находится по указанному пути.
Хук wp_enqueue_scripts используется для подключения стилей на фронтенде.

Настройка вашему CSS. Теперь вам стоит настроить ваш CSS-файл main.css, чтобы добавить необходимые вам стили для страницы сброса пароля. Например, вы можете изменить цвет фона, шрифты и отступы:

/* Примерные стили для страницы сброса пароля */
body {
    background-color: #f0f0f0; /* Задаем цвет фона */
}

.woocommerce-ResetPassword {
    background: #fff; /* Фон блока сброса пароля */
    border-radius: 8px; /* Закругленные углы */
    padding: 20px; /* Внутренние отступы */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Тень */
}

.woocommerce-ResetPassword h2 {
    color: #333; /* Цвет заголовка */
}

/* Дополнительные стили для инпутов и кнопок */
.woocommerce-ResetPassword input {
    border: 1px solid #ddd; /* Граница поля ввода */
    padding: 10px;
    width: 100%;
    margin-bottom: 15px;
}

.woocommerce-ResetPassword button {
    background-color: #0071a1; /* Цвет кнопки */
    color: #fff; /* Цвет текста кнопки */
    padding: 10px;
    border: none;
    cursor: pointer;
}

Итог:

С помощью вышеописанного кода и CSS вы сможете стилизовать страницу сброса пароля, что сделает её более привлекательной для пользователей. Не забудьте протестировать все изменения и убедиться, что они отображаются корректно на странице сброса пароля.