Кастомизация страницы входа в WordPress: логотип, цвета, фоновая картинка и собственный CSS


Стандартная страница входа WordPress выглядит одинаково на всех сайтах. Но если вы хотите придать ей фирменный стиль — сменить логотип, цвета или фон — это легко можно сделать с помощью собственного PHP-кода.

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

Что делает код?

Этот код:





✔ добавляет страницу настроек в админ-панели;
✔ позволяет загружать свой логотип;
✔ менять цвет фона;
✔ загружать фон для всей страницы входа;
✔ добавлять дополнительные CSS-стили вручную;
✔ применяет эти настройки ко входной странице WordPress.

Ниже — сам код с комментариями.

Код кастомизации страницы входа (с комментариями)

// =====================================================================
// 1. Создаём страницу настроек в админке WordPress
// =====================================================================
add_action('admin_menu', function() {
    add_menu_page(
        'Настройки страницы входа', // Название страницы
        'Страница входа',           // Текст в меню
        'manage_options',           // Права доступа
        'login-customizer',         // Слаг страницы
        'wplc_admin_page',          // Функция с HTML содержимым
        'dashicons-lock',           // Иконка меню
        80                          // Позиция в меню
    );
});


// =====================================================================
// 2. HTML интерфейс настроек
// =====================================================================
function wplc_admin_page() {

    // Проверка прав пользователя
    if (!current_user_can('manage_options')) return;

    // Если нажали "Сохранить"
    if (isset($_POST['wplc_save'])) {

        // Сохраняем данные в базу WP
        update_option('wplc_logo', sanitize_text_field($_POST['wplc_logo']));
        update_option('wplc_bg_image', sanitize_text_field($_POST['wplc_bg_image']));
        update_option('wplc_bg_color', sanitize_hex_color($_POST['wplc_bg_color']));
        update_option('wplc_custom_css', stripslashes($_POST['wplc_custom_css']));

        echo '<div class="updated"><p>Настройки сохранены.</p></div>';
    }

    // Получаем значения из базы
    $logo       = get_option('wplc_logo', '');
    $bg_image   = get_option('wplc_bg_image', '');
    $bg_color   = get_option('wplc_bg_color', '#f1f1f1');
    $custom_css = get_option('wplc_custom_css', '');
    ?>

    <div class="wrap">
        <h1>Настройки страницы входа</h1>

        <form method="post">
            <table class="form-table">

                <!-- ЛОГОТИП ПРИ ВХОДЕ -->
                <tr>
                    <th>Логотип на странице входа</th>
                    <td>
                        <!-- Поле ввода URL логотипа -->
                        <input type="text" id="wplc_logo" name="wplc_logo" value="<?php echo esc_attr($logo); ?>" style="width:60%;">

                        <!-- Кнопка открытия медиабиблиотеки -->
                        <button type="button" class="button wplc_upload_button" data-target="wplc_logo">Выбрать изображение</button>

                        <!-- Превью логотипа -->
                        <?php if ($logo): ?>
                            <div style="margin-top:10px;">
                                <img src="<?php echo esc_url($logo); ?>" style="width:250px;height:auto;object-fit:contain;">
                            </div>
                        <?php endif; ?>
                    </td>
                </tr>

                <!-- ФОНОВАЯ КАРТИНКА -->
                <tr>
                    <th>Фоновое изображение</th>
                    <td>
                        <input type="text" id="wplc_bg_image" name="wplc_bg_image" value="<?php echo esc_attr($bg_image); ?>" style="width:60%;">
                        <button type="button" class="button wplc_upload_button" data-target="wplc_bg_image">Выбрать изображение</button>

                        <?php if ($bg_image): ?>
                            <div style="margin-top:10px;">
                                <img src="<?php echo esc_url($bg_image); ?>" style="width:250px;height:auto;object-fit:contain;">
                            </div>
                        <?php endif; ?>
                    </td>
                </tr>

                <!-- ЦВЕТ ФОНА -->
                <tr>
                    <th>Цвет фона страницы входа</th>
                    <td>
                        <input type="color" name="wplc_bg_color" value="<?php echo esc_attr($bg_color); ?>">
                    </td>
                </tr>

                <!-- ДОПОЛНИТЕЛЬНЫЙ CSS -->
                <tr>
                    <th>Дополнительный CSS</th>
                    <td>
                        <textarea name="wplc_custom_css" rows="8" cols="50"><?php echo esc_textarea($custom_css); ?></textarea>
                    </td>
                </tr>

            </table>

            <p><input type="submit" name="wplc_save" class="button button-primary" value="Сохранить"></p>
        </form>
    </div>

<?php
}


// =====================================================================
// 3. Подключаем медиабиблиотеку WordPress + JS для загрузки изображений
// =====================================================================
add_action('admin_enqueue_scripts', function($hook) {

    // Подключаем только на нужной странице
    if ($hook !== 'toplevel_page_login-customizer') return;

    wp_enqueue_media(); // Подключаем медиабиблиотеку WP

    // JS для выбора изображения
    wp_add_inline_script('jquery', "
        jQuery(document).ready(function($){
            $('.wplc_upload_button').click(function(e){
                e.preventDefault();
                var target_input = $(this).data('target');

                var media_frame = wp.media({
                    title: 'Выберите изображение',
                    button: { text: 'Выбрать' },
                    multiple: false
                });

                media_frame.on('select', function(){
                    var attachment = media_frame.state().get('selection').first().toJSON();
                    $('#' + target_input).val(attachment.url).trigger('change');

                    var imgTag = $('#' + target_input).siblings('div').find('img');

                    if(imgTag.length){
                        imgTag.attr('src', attachment.url);
                    } else {
                        $('#' + target_input).after('<div style=\"margin-top:10px;\"><img src=\"'+attachment.url+'\" style=\"width:250px;height:auto;object-fit:contain;\"></div>');
                    }
                });

                media_frame.open();
            });
        });
    ");
});


// =====================================================================
// 4. Стили на странице входа
// =====================================================================
add_action('login_head', function() {

    $logo       = get_option('wplc_logo');
    $bg_image   = get_option('wplc_bg_image');
    $bg_color   = get_option('wplc_bg_color', '#f1f1f1');
    $custom_css = get_option('wplc_custom_css', '');

    ?>

    <style>
        /* Фон страницы входа */
        body.login {
            background-color: <?php echo esc_attr($bg_color); ?> !important;

            <?php if ($bg_image): ?>
                background-image: url('<?php echo esc_url($bg_image); ?>') !important;
                background-size: cover !important;
                background-position: center !important;
            <?php endif; ?>
        }

        /* Логотип WordPress */
        .login h1 a {
            <?php if ($logo): ?>
                background-image: url('<?php echo esc_url($logo); ?>') !important;
                background-size: contain !important;
                width: 250px !important;
                height: 80px !important;
            <?php endif; ?>
        }

        /* Пользовательский CSS */
        <?php echo $custom_css; ?>
    </style>

<?php
});


// =====================================================================
// 5. Меняем ссылку логотипа на главную страницу сайта
// =====================================================================
add_filter('login_headerurl', function() { return home_url(); });
add_filter('login_headertext', function() { return get_bloginfo('name'); });

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *