Кастомізація сторінки входу в 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'); });

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *