Стандартна сторінка входу 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'); });
Хуки активації та ініціалізації у WordPress: Де і коли створювати таблиці
119
Як створити таблицю в WordPress через functions.php: Повний гід по типам даних MySQL
122
Select в HTML: прихований placeholder, підсвічування і динамічний індикатор терміновості
216
Як створити власне меню в адмінці WordPress: простий гайд для новачків
136
Як змінити або повністю прибрати текст у футері адмін-панелі WordPress
163
Як виявити блокувальник реклами на сайті за допомогою JavaScript 243
Додавання мета-опису та ключових слів у WordPress 237
Мінімальна сума замовлення WooCommerce 224
Як додати виджет для валют на панель адміністратора WordPress 218
Select в HTML: прихований placeholder, підсвічування і динамічний індикатор терміновості 216
Залишити відповідь