Стандартная страница входа 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: Где и когда создавать таблицы
60
Select в HTML: скрытый placeholder, подсветка и динамический индикатор срочности
78
Как создать собственное меню в админке WordPress: простое руководство для новичков
85
Как изменить или полностью убрать текст в подвале (футере) админ-панели WordPress
98
Как добавить выбор отдела для пользователей в WordPress и выводить его на сайте
94
Добавление мета-описания и ключевых слов в WordPress 519
Как обнаружить блокировщик рекламы на сайте с помощью JavaScript 204
Минимальная сумма заказа WooCommerce 181
Как добавить виджет для валют на панель администратора WordPress 155
Как добавить поле «Отдел» и ограничить видимость категорий в WordPress 151
Добавить комментарий