Як змінити логотип входу WordPress: методи за допомогою плагіна, коду та CSS

Сторінка входу WordPress за замовчуванням відображає стандартний логотип WordPress — загальний елемент брендингу, якому немає місця на професійному або клієнтському сайті. Заміна його власним логотипом займає менше п’яти хвилин і не вимагає глибоких технічних знань, проте вплив на узгодженість бренду є негайним. Цей посібник охоплює три готові до використання методи: підхід на основі GUI-плагіна, пряме введення functions.php та окремий плагін користувацького CSS — кожен із точним кодом, шляхами до файлів і граничними випадками, які потрібні для правильної реалізації з першого разу.

Чому стандартний логотип входу важливіший, ніж ви думаєте

Щоразу, коли член команди, клієнт або адміністратор переходить на /wp-login.php, вони бачать логотип WordPress. На white-label збірці агентства, SaaS-платформі або багатокористувацькій інсталяції WordPress цей стандартний брендинг активно підриває професійний імідж, який ви створили на всіх інших частинах сайту.

Окрім естетики, користувацький логотип входу виконує тонку, але реальну функцію безпеки: він сигналізує вашим користувачам, що вони перебувають у легітимному, контрольованому середовищі, а не на фішинговому клоні стандартного екрана входу WordPress. Коли ви розміщуєте WordPress у середовищі VPS Хостингу з root-доступом, ви маєте повний контроль над кожним рівнем цього налаштування — від дозволів на файли до розгортання тем — без обмежень, що накладаються спільними середовищами.

Порівняння трьох методів налаштування

Ключова архітектурна відмінність: методи, що покладаються на functions.php батьківської теми, будуть перезаписані при кожному оновленні теми. Завжди використовуйте дочірню тему для будь-якої прямої модифікації файлів.

Метод 1: Використання плагіна

Це найбезпечніший шлях для не-розробників і найшвидший для тих, кому потрібен робочий результат менш ніж за три хвилини.

Крок 1: Встановіть і активуйте LoginPress

1. Увійдіть до панелі керування WordPress.
2. Перейдіть до Плагіни > Додати новий.
3. Знайдіть LoginPress або Custom Login Page Customizer.
4. Натисніть Встановити зараз, потім Активувати.

Обидва плагіни активно підтримуються, мають велику базу встановлень і надають доступ до налаштувань через нативний WordPress Customizer — тобто не потрібно вивчати незнайомий інтерфейс.

Крок 2: Завантажте та налаштуйте свій логотип

1. Перейдіть до LoginPress > Customizer (або Зовнішній вигляд > Login Customizer залежно від плагіна).
2. Знайдіть розділ Логотип на лівій панелі.
3. Натисніть Вибрати зображення та завантажте свій логотип із медіатеки або локального комп’ютера.
4. Відрегулюйте ширину, висоту та відступи за допомогою елементів керування попереднього перегляду плагіна.
5. Натисніть Опублікувати.

Граничний випадок: Якщо ваш логотип виглядає розмитим на дисплеях з високою щільністю пікселів (Retina), завантажте зображення, яке рівно вдвічі більше за потрібний розмір відображення, і обмежте його через CSS width, а не покладайтеся на розміри в пікселях плагіна. Наприклад, якщо ви хочете логотип шириною 250px, завантажте PNG шириною 500px і встановіть ширину відображення 250px.

Метод 2: Ручний код у functions.php (Розширений)

Цей метод дає вам точний контроль над кожною властивістю CSS — позиціонуванням, поведінкою посилань, станами наведення — без встановлення додаткового плагіна. Це кращий підхід для розробників, які створюють користувацькі теми або підтримують мінімальний набір плагінів.

Крок 1: Створіть або отримайте доступ до дочірньої теми

Ніколи не редагуйте functions.php батьківської теми безпосередньо. Якщо ви ще не створили дочірню тему, зробіть це перед тим, як продовжити. На VPS із cPanel або будь-якому сервері з SSH-доступом ви можете вручну створити директорію дочірньої теми та необхідні файли.

З панелі керування WordPress перейдіть до Зовнішній вигляд > Редактор файлів теми та виберіть functions.php вашої дочірньої теми.

Крок 2: Додайте хук логотипа входу

Додайте наступний блок коду до functions.php вашої дочірньої теми:

/**
 * Replace the default WordPress login logo with a custom image.
 * Hook: login_enqueue_scripts fires before the login page renders.
 */
function custom_login_logo() { ?>
    <style type="text/css">
        #login h1 a,
        .login h1 a {
            background-image: url('<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/images/custom-logo.png');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            width: 250px;
            height: 80px;
            display: block;
            margin: 0 auto 20px;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'custom_login_logo' );

Критична деталь: Вихідний код у багатьох посібниках орієнтується лише на #login h1 a. Починаючи з WordPress 5.x, обгортка сторінки входу також має клас .login, тому орієнтування на обидва селектори забезпечує сумісність з усіма версіями WordPress і будь-якими майбутніми структурними змінами.

Крок 3: Завантажте файл логотипа

За допомогою FTP-клієнта, файлового менеджера хостингу або SSH завантажте свій логотип до директорії images/ дочірньої теми:

# Example using scp from your local machine to the server
scp /local/path/custom-logo.png user@your-server-ip:/var/www/html/wp-content/themes/your-child-theme/images/

Шлях до файлу у PHP-функції використовує get_stylesheet_directory_uri(), який завжди вказує на кореневий URI активної теми — підтверджуючи, чому дочірня тема є обов’язковою тут. Якщо ви помилково використаєте функцію директорії батьківської теми get_template_directory_uri(), шлях зламається щоразу, коли ви переключите або оновите батьківську тему.

Крок 4: Налаштуйте посилання та підказку логотипа

За замовчуванням логотип входу посилається на wordpress.org. Майже напевно ви хочете, щоб він вказував на вашу власну головну сторінку. Додайте ці два додаткові хуки в той самий файл functions.php:

// Change the login logo link URL
function custom_login_logo_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'custom_login_logo_url' );

// Change the login logo link title attribute
function custom_login_logo_url_title() {
    return get_bloginfo( 'name' );
}
add_filter( 'login_headertext', 'custom_login_logo_url_title' );

Це деталь, яку більшість посібників повністю пропускає. Якщо ваш клієнт натисне на логотип на сторінці входу і потрапить на wordpress.org, це є професійним провалом. Ці два фільтри усувають цю прогалину.

Крок 5: Збережіть і перевірте

Натисніть Оновити файл у редакторі файлів теми або збережіть через текстовий редактор, якщо працюєте через SSH/SFTP. Перейдіть на yourdomain.com/wp-login.php у приватному вікні браузера, щоб перевірити результат без втручання кешованих ресурсів.

Метод 3: Плагін користувацького CSS (без functions.php)

Якщо ви працюєте на клієнтському сайті, де редагування файлів теми є ризикованим, або використовуєте стороннє тему, яку не можна безпечно розширити дочірньою темою, виділений CSS-плагін є найчистішим рішенням.

Крок 1: Встановіть Simple Custom CSS and JS

1. Перейдіть до Плагіни > Додати новий.
2. Знайдіть Simple Custom CSS and JS (або легший Simple Custom CSS).
3. Встановіть і активуйте.

Крок 2: Додайте CSS для сторінки входу

Перейдіть до Custom CSS and JS > Add Custom CSS і вставте наступне:

/* Target the login logo anchor on the WordPress login page */
#login h1 a,
.login h1 a {
    background-image: url('https://yourdomain.com/wp-content/uploads/your-logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top;
    width: 250px;
    height: 80px;
    display: block;
    margin: 0 auto 20px;
}

Замініть URL прямим шляхом до завантаженого логотипа. Найнадійніше джерело — Медіатека: відкрийте свій логотип у медіатеці, скопіюйте URL файлу з панелі деталей вкладення та вставте його безпосередньо в правило CSS.

Помилка, якої слід уникати: Не використовуйте відносний URL тут (наприклад, /wp-content/uploads/logo.png). Якщо WordPress встановлено в піддиректорії, відносні шляхи зламаються непомітно. Завжди використовуйте абсолютний URL із медіатеки.

Встановіть параметр Де на Frontend або Login Page, якщо плагін підтримує цільове визначення сторінок, щоб уникнути завантаження непотрібного CSS на кожній публічній сторінці.

Специфікації зображення логотипа та найкращі практики

Формат файлу: Використовуйте PNG із прозорим фоном. Артефакти стиснення JPEG помітні на світло-сірому фоні сторінки входу. SVG підтримується в сучасних браузерах, але вимагає додаткового CSS (background-size: auto поводиться по-різному для SVG) і може спричиняти непослідовність рендерингу на старіших конфігураціях.

Розміри: Контейнер форми входу WordPress має ширину 320px. Логотип 250 x 80px добре вписується в це обмеження. Для екранів Retina/HiDPI експортуйте в 500 x 160px і обмежте розмір відображення через CSS width: 250px; height: 80px.

Розмір файлу: Тримайте логотип менше 50KB. Сторінка входу є точкою доступу з високою частотою — кожен адміністратор, редактор і автор завантажує її. Великий файл зображення додає непотрібну затримку, особливо на серверах з обмеженою пропускною здатністю I/O.

Колірний контраст: Стандартний фон сторінки входу — #f0f0f1. Перевірте свій логотип на відповідність цьому точному значенню hex перед розгортанням. Білий логотип на білому фоні невидимий — помилка, яка надзвичайно часто трапляється при поспішному розгортанні.

Адаптивна поведінка: Додайте max-width: 100% до якоря логотипа, щоб запобігти переповненню на мобільних екранах вужчих за 320px. Сторінка входу WordPress не є повністю адаптивною за замовчуванням, але це єдине правило запобігає горизонтальному прокручуванню на малих вікнах перегляду.

Міркування щодо середовища хостингу

Метод, який ви обираєте, частково визначається вашим середовищем хостингу. На Виділеному сервері у вас є необмежений SSH-доступ і ви можете розгортати дочірні теми, керувати дозволами файлів та автоматизувати оновлення логотипа через скрипти розгортання. На Спільному веб-хостингу ви зазвичай обмежені файловим менеджером і панеллю керування WordPress — що робить метод плагіна або плагіна користувацького CSS єдиними практичними варіантами.

Для команд, що керують кількома інсталяціями WordPress, розгляньте використання WP-CLI для автоматизації оновлень логотипа на різних сайтах:

# Activate a child theme via WP-CLI
wp theme activate your-child-theme --path=/var/www/html

# Verify the active theme
wp theme status --path=/var/www/html

Якщо ваш сайт WordPress обробляє реєстрації користувачів, клієнтські портали або входи для електронної комерції, поєднання брендованої сторінки входу з дійсним SSL-сертифікатом є обов’язковим. Сторінка входу передає облікові дані — HTTPS є базовим рівнем, а не необов’язковим покращенням.

Матриця рішень: який метод слід використовувати

Використовуйте цей контрольний список для вибору правильного підходу для вашої конкретної ситуації:

• Ви не є розробником або створюєте для нетехнічного клієнта — використовуйте Метод 1 (плагін LoginPress). Він є оборотним, не вимагає коду, і плагін автоматично обробляє адаптивну поведінку.
• Ви розробник, що підтримує користувацьку дочірню тему — використовуйте Метод 2 (functions.php). Він не додає накладних витрат на плагіни і дає вам повний контроль CSS, включаючи виправлення URL посилання логотипа.
• Вам потрібно налаштувати стороннє тему без дочірньої теми — використовуйте Метод 3 (плагін користувацького CSS). Він ізольований від оновлень теми і легко видаляється.
• Ви керуєте кількома сайтами — поєднайте Метод 2 з окремою дочірньою темою для кожного клієнта, розгорнутою через Git або WP-CLI для узгодженості.
• Ваш логотип виглядає розмитим на дисплеях Retina — незалежно від методу, завантажте зображення з роздільністю 2x і обмежте його розмір відображення через CSS-властивості width та height.
• Посилання логотипа все ще вказує на wordpress.org після налаштування — додайте фільтри login_headerurl та login_headertext з Методу 2, навіть якщо ви використовували плагін для самого зображення.

Часті запитання

Чи впливає зміна логотипа входу на безпеку WordPress?

Ні, заміна зображення логотипа не впливає на безпеку автентифікації. Однак користувацький логотип входу може знизити візуальну ефективність загальних фішингових сторінок WordPress, що орієнтуються на ваших користувачів, оскільки зловмисники зазвичай клонують стандартний вигляд входу WordPress. Для реального посилення безпеки поєднайте це з двофакторною автентифікацією, обмеженням спроб входу та примусовим використанням HTTPS.

Чи зламається користувацький логотип входу після оновлення ядра WordPress?

Оновлення ядра не торкаються файлів теми або даних плагінів. Якщо ви використовували Метод 2 з дочірньою темою, ваші зміни повністю захищені від оновлень як ядра, так і батьківської теми. Якщо ви редагували functions.php батьківської теми безпосередньо, оновлення теми перезапише ваш код — саме тому вимога дочірньої теми є обов’язковою.

Який правильний хук для введення CSS на сторінці входу WordPress?

Використовуйте login_enqueue_scripts. Ця дія спрацьовує саме на сторінці входу перед рендерингом стилів, що робить її правильним і офіційно задокументованим хуком для цієї мети. Використання wp_enqueue_scripts не працюватиме на сторінці входу — він спрацьовує лише на фронтенді.

Чи можу я використовувати SVG-файл як логотип входу?

Так, але з застереженнями. WordPress за замовчуванням блокує завантаження SVG з міркувань безпеки (SVG може містити виконуваний JavaScript). Вам потрібно або використати плагін на кшталт Safe SVG для увімкнення завантаження SVG, або посилатися на SVG через жорстко закодований абсолютний URL у вашому CSS. Крім того, встановіть background-size: auto або явні розміри в пікселях, оскільки поведінка масштабування SVG відрізняється від растрових зображень.

Мій логотип не з’являється після виконання цих кроків — що слід перевірити?

По-перше, виконайте жорстке перезавантаження сторінки входу за допомогою Ctrl+Shift+R (Windows/Linux) або Cmd+Shift+R (Mac), щоб обійти кеш браузера. По-друге, переконайтеся, що URL зображення є публічно доступним, вставивши його безпосередньо у вкладку браузера. По-третє, відкрийте DevTools браузера на сторінці входу, перевірте елемент #login h1 a і перевірте, чи застосовується ваше правило CSS або чи воно перевизначається іншою таблицею стилів. По-четверте, переконайтеся, що файл було завантажено до правильної директорії і що ім’я файлу у вашому коді точно збігається із завантаженим ім’ям файлу, включаючи чутливість до регістру — Linux-сервери розглядають Logo.png та logo.png як різні файли.