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

По умолчанию страница входа WordPress отображает стандартный логотип WordPress — универсальный элемент брендинга, которому нет места на профессиональном или клиентском сайте. Замена его собственным логотипом занимает менее пяти минут и не требует глубоких технических знаний, однако влияние на единообразие бренда ощущается немедленно. В этом руководстве рассматриваются три готовых к использованию метода: подход на основе GUI-плагина, прямое внедрение functions.php и отдельный плагин пользовательского CSS — каждый с точным кодом, путями к файлам и граничными случаями, необходимыми для правильной реализации с первого раза.

Почему логотип на странице входа по умолчанию важнее, чем вы думаете

Каждый раз, когда сотрудник, клиент или администратор переходит на /wp-login.php, они видят логотип WordPress. На белоярлычной сборке агентства, платформе SaaS или многопользовательской установке WordPress этот стандартный брендинг активно подрывает профессиональный имидж, который вы создали на всех остальных страницах сайта.

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

Сравнение трёх методов настройки

Ключевое архитектурное различие: методы, основанные на functions.php родительской темы, будут перезаписаны при каждом обновлении темы. Всегда используйте дочернюю тему для любого прямого изменения файлов.

Метод 1: Использование плагина

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

Шаг 1: Установите и активируйте LoginPress

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

Оба плагина активно поддерживаются, имеют большую базу установок и предоставляют настройки через стандартный Настройщик WordPress — это означает, что вам не придётся осваивать незнакомый интерфейс.

Шаг 2: Загрузите и настройте логотип

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

Граничный случай: Если логотип выглядит размытым на дисплеях с высоким DPI (Retina), загрузите изображение, которое ровно в 2 раза больше предполагаемого размера отображения, и ограничьте его через 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 из медиатеки.

Установите параметр Где на Фронтенд или Страница входа, если плагин поддерживает таргетинг на конкретные страницы, чтобы избежать загрузки ненужного 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 разными файлами.