Как добавить собственный логотип в консоль WordPress
Хотели бы вы установить собственный логотип в консоли WordPress? Часто люди заменяют логотип WordPress на собственное в целях брендирования. В сегодняшней статье мы покажем вам как добавить произвольный логотип в консоль WordPress.
Способ 1: Добавляем собственный логотип в консоль с помощью плагина
Этот способ очень простой и рекомендуется для большинства новичков.
Первым делом вам потребуется установить и активировать плагин White Label CMS.
После активации переходим на страницу Настройки » White Label CMS и нажать на вкладку Branding, чтобы ее раскрыть.
Далее, вам нужно нажать на ‘Yes’ для того, чтобы скрыть логотип WordPress, а затем загрузить свой собственный. Произвольный логотип должен быть размером 16 x 16 пикселей.
Не забудьте нажать на кнопку сохранения изменений.
Помимо смены логотипа WordPress, White Label CMS также предоставляет множество других настроек для ребрендинга вашей текущей установленной версии WordPress.
Current Version: 2.7
Last Updated: 02.11.2023
Способ 2: Добавляем собственный логотип в консоль WordPress вручную
Этот способ для тех пользователей, которые умеют вставлять сниппеты кода в WordPress.
Для начала вам потребуется сохранить свой логотип с названием файла custom-logo.png на компьютер. Он должен быть ровно 16 x 16 пикселей размером.
Как только вы подготовите логотип, загружайте его в папку /wp-content/themes/your-theme/images через FTP. Если в вашей теме нет папки под названием images, тогда потребуется создать ее.
После загрузки картинки логотипа просто добавляем следующий код в файл functions.php вашей темы или в плагин для сайта WordPress:
function wpb_custom_logo() < echo ' #wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon:before < background-image: url(' . get_bloginfo('stylesheet_directory') . '/images/custom-logo.png) !important; background-position: 0 0; color:rgba(0, 0, 0, 0); >#wpadminbar #wp-admin-bar-wp-logo.hover > .ab-item .ab-icon '; > //хук в вывод шапки в административной панели add_action('wp_before_admin_bar_render', 'wpb_custom_logo');
Этот код просто добавляет CSS, нужный для вывода вашего собственного логотипа в админбар WordPress.
Вот и все, мы надеемся, что эта статья помогла вам научиться добавлять собственный логотип в консоль WordPress в целях брендирования.
По всем вопросам и отзывам просьба писать в комментарии ниже.
Не забывайте, по возможности, оценивать понравившиеся записи количеством звездочек на ваше усмотрение.
Как изменить логотип в теме WordPress?
12.02.2021
По умолчанию любой сайт на WordPress имеет текстовый логотип. Он же является и ссылкой, ведущей на главную страницу. Смотрится такое решение скучно и банально, поэтому для многих владельцев сайта, как поменять логотип на WordPress – один из первых вопросов, возникающих сразу после создания площадки.
Как это сделать? Тут есть разные нюансы, поэтому рассмотрим их подробнее.
Меняем логотип в Вордпресс: пошаговая инструкция
Процедура смены логотипа в Вордпресс напрямую зависит от установленной темы. В каждом случае порядок действий может отличаться. Приведем несколько примеров, которые помогут лучше понять, как поменять логотип в WordPress в вашем случае.
Вариант первый:
- Зайдите в админку Вордпресс.
- Перейдите в разделы «Внешний вид» – «Заголовок».
- Откройте вкладку «Общие настройки».
- Выберите пункт «Логотип и фавикон».
- Щелкните на кнопку «Загрузить изображение» и укажите путь к нужной картинке.
- Сохраните изменения.
И логотип на сайте поменяется.
Вариант второй (подходит для темы Jannah):
- Зайдите в админку Вордпресс.
- Перейдите в разделы «Внешний вид» – «Настроить».
- Откройте вкладку «Свойства сайта».
- Нажмите кнопку «Выбрать логотип/иконку сайта» и укажите путь к нему.
- Сохраните изменения.
В других темах отличия начинаются с третьего пункта. Проще говоря, чтобы поменять логотип, заходите в административную панель WordPress и переходите в разделы «Внешний вид» – «Настроить». А дальше смотрите по ситуации.
Самый простой вариант – поочередно пройтись по основным пунктам, пока не найдете кнопку, с помощью которой можно залить собственный логотип для сайта. Затем обязательно сохраните изменения и обновите главную страницу веб-ресурса, чтобы увидеть конечный результат.
Меняем логотип в WordPress через FTP-клиент
Этот способ сложнее, но выручает в случаях, если первый вариант не подходит (не нашли, где меняется логотип и т.п.). В данном случае нужна любая FTP-программа – например, Filezilla.
Алгоритм действий следующий:
- Откройте программу Filezilla и введите данные от FTP-сервера.
- Найдите в теме папку, где хранятся все картинки (стандартный путь: название_сайта/wp-content/themes/название_темы/images). Как правило, здесь лежит логотип, шапка сайта, фон и пр.
- Найдите старый логотип и выгрузите его, чтобы узнать разрешение.
- Залейте в эту же папку новый логотип с аналогичным разрешением, форматом и названием.
В некоторых случаях разрешение делается больше или меньше. Формат тоже можно изменить (но проверяйте, насколько корректно логотип отображается на сайте).
Вопрос создания логотипа здесь не рассматривается, поскольку это отдельная тема. Подразумевается, что он уже есть (создан вами или сторонним дизайнером), и остается лишь залить его на FTP-сервер.
Что ж, теперь вы знаете, как изменить логотип в теме WordPress. Начните с первого способа, он проще. Если не получится – тогда решайте данную проблему через FTP-клиент.
Напоследок отметим, что логотип должен быть компактным и правильно оптимизированным (т.е. занимать минимум места). Ведь по сравнению с текстовым вариантом картинка больше грузит сайт, да и сама может прогружаться медленно. Во избежание этой проблемы достаточно обратиться к надежному хостеру и арендовать сервер недорого.
Понравилась статья? Расскажите о ней друзьям: 
Как добавить логотип на WordPress-сайт
В базовых настройках WordPress в верхнем левом углу шапки сайта, выводится название сайта в виде текста. Представьте, что вы взяли на фриланс-бирже заказ, где заказчику нужно вместо текста, вывести логотип.
Относительно недавно у WordPress появился кастомайзер, попасть туда можно, выбрав в админке раздел Внешний вид —> Настройки. Меняя что-то в настройках кастомайзера, пользователь сразу видит на сайте, что поменялось. Это очень удобно.
Здесь вы видите, где выводится название сайта.
А на этом скриншоте показаны поля, через которые можно быстро поменять информацию о сайте и сразу увидеть результат.
Добавить логотип в шапку сайта
Шаг 1) Чтобы вывести логотип вместо тестового названия, нужно добавить поле с логотипом. В functions.php, включим поддержку custom-logo, применив функцию add_theme_support. Вторым параметром функции передадим массив с размерами логотипа (ширина и высота в пикселях). Размеры логотипа указываем любые.
function twentynineteen_setup() add_theme_support(
‘custom-logo’, array(
‘height’ => 180,
‘width’ => 180
)
);
>
add_action( ‘after_setup_theme’, twentynineteen _setup’ );
После этого в настройках свойств сайта, появилось новое поле – Логотип. Заметьте, что поле с названием сайта осталось. Это значит, что можно первоначальный вариант вернуть назад.
Шаг 2) Загрузим через поле Выбрать логотип, заранее подготовленный наш логотип.
Шаг 3) Для вывода в шапке сайта кастомного логотипа, необходимо в шаблоне header.php прописать функцию the_custom_logo(). Создадим условие, если установлен кастомный логотип, то мы его выведем. В противном случае, выведем название сайта.
Логотип появился на сайте.
Как изменить логотип?
В кастомайзере появилась кнопка Изменить логотип.
Пример вывода логотипа
Совсем необязательно логотип должен выводиться в header.php. Например в дефолтной теме вордпресса Twenty_Nineteen, уже подключена поддержка custom-logo и выводится логотип в шаблоне site-branding.php.
Заключение
Данная статья будет полезна начинающим WordPress разработчикам, практикующихся на интеграции статичной верстки с WordPress.
Создано 04.09.2019 10:33:55
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
- Кнопка:
Она выглядит вот так: - Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт - BB-код ссылки для форумов (например, можете поставить её в подписи):
Комментарии ( 1 ):
censured 26.11.2021 11:34:11
Добрый день! По вашей инструкции пытаюсь добавить логотип на сайт. У меня были проблемы с доступом к файлу functions.php, после обращения в ТП проблема исчезла. Но после того, как я добавил ваш код, логотип не появился. Пока выполняю шаг 1, в чём может быть проблема?
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.
Добавляем логотип в WordPress и убираем ссылку на главную
Все темы WordPress по умолчанию используют пользовательский логотип. Если у вас появилась необходимость добавить в custom_logo свои коррективы: получить или убрать ссылку на главную, вывести логотип вместо названия и описания сайта, добавить микроразметку, то рассмотрим несколько полезных функций.
Конечно же, можно, особо не напрягаясь, вставить в тему простой HTML-код и WordPress его без проблем отобразит. Но лучше правильно подключить функции.
Функции отвечающие за отображение логотипа на сайте
Чтобы в теме WordPress появилась возможность добавлять логотип через кастомайзер (визуальная настройка темы в админке), необходимо включить соответствующую функцию в файле functions.php.
add_theme_support( 'custom-logo' );
Добавляя параметры ширины и высоты в ту же функцию с помощью которой подключали логотип к теме установим размеры логотипа.
/** *Enable support for custom logo */ add_theme_support( 'custom-logo', array( 'height' => 100, 'width' => 200, 'flex-height' => true, // если гибкая высота. 'flex-width' => true, // если гибкая ширина. ) );
Чтобы логотип появился в нужном месте, используется следующая функция:
Функция отобразит логотип с ссылкой на главную страницу. Выглядит это так:
Если хотите чтобы в теме появилась возможность выбора того, что будет отображаться: логотип или название сайта с описанием, то в эту же функцию добавляем header-text:
/** *Enable support for custom logo */ add_theme_support( 'custom-logo', array( 'height' => 100, 'width' => 200, 'flex-height' => true, // если гибкая высота. 'flex-width' => true, // если гибкая ширина. 'header-text' => array( 'site-title', 'site-description' ), 'unlink-homepage-logo' => true, // убрать или оставить ссылку на главную ver. WP 5.5. ) );
И в файле header.php вставим код, который выведет название и описание сайта, если отсутствует логотип, а когда логотип загружен, то заголовок и описание будут скрыты.
PHP
» rel=»home»>
В WordPress 5.5 в базовые функции get_custom_logo() и the_custom_logo() к логотипу больше не добавляется ссылка на главной странице (циклическая). Но можно убрать эту ссылку и другим способом: Данный код вставляем в funcrions.php. Первая часть кода не содержит ссылку если это главная страница и страницы пагинации. Во второй части добавляем ссылку на главную на прочих страницах, также добавляем свойство itemprop=’url image’ для микроразметки Schema, class и alt-текст для логотипа. Теперь в файл header.php добавляем этот код, чтобы вывести логотип на страницах: Так будет выглядеть HTML код: Если понадобится вывести ссылку на логотип. Эта функция позволяет установить собственный логотип на страницу входа сайта. Высоту и ширину можно прописать вручную, заменив содержимое в background-size, height и width на свой размер. Теперь изменим ссылку в логотипе на странице входа: Отправить донат автору Картой или Qiwi Комментарии, считающиеся спамом или исключительно рекламные по своему содержанию, будут удалены. Допускается включение ссылки на соответствующий контент, но текст должен иметь отношение к теме поста. Также будут удалены анонимные, оскорбительные, содержащие ненормативную лексику, вводящие в заблуждение или клеветнические комментарии. Для публикации кода в комментариях используйте следующие шорткоды — Если неиспользуемая часть шаблона в редакторе сайта WP не удаляется и появляется уведомление «Подходящий маршруту … Из этой статьи вы узнаете, как сделать специальную кнопку возврата назад на JS или PHP, … Рассмотрим два варианта передачи IP посетителей сайта в Яндекс Метрику и Google Аналитику: через код …Микроразметка логотипа и удаление циклической ссылки
PHP/** Custom logo. */ function theme_logo() < $custom_logo_id = get_theme_mod( 'custom_logo' ); // Если главная, то без ссылки if(is_home())< $html = wp_get_attachment_image( $custom_logo_id, 'full', false, array( 'class' =>'custom-logo', 'itemprop' => 'url image', 'alt' => get_bloginfo('name') ) ); // На прочих страницах ссылка на главную есть > else < $html = sprintf( '%2$s', esc_url( home_url( '/' ) ), wp_get_attachment_image( $custom_logo_id, 'full', false, array( 'class' => 'custom-logo', 'itemprop' => 'url image', 'alt' => get_bloginfo('name')) ) ); > return $html; > add_filter( 'get_custom_logo', 'theme_logo' );
Ссылка на логотип
$custom_logo_id = get_theme_mod( 'custom_logo' ); $image = wp_get_attachment_image_src( $custom_logo_id , 'full' ); echo $image[0];
Свой логотип на странице входа
function wpdev_filter_login_head() < if ( has_custom_logo() ) : $image = wp_get_attachment_image_src( get_theme_mod( 'custom_logo' ), 'full' ); ?> add_action( 'login_head', 'wpdev_filter_login_head', 100 );
function new_wp_login_url() < return home_url(); >add_filter('login_headerurl', 'new_wp_login_url');
Оставьте комментарий
[php]ваш код[/php] — для PHP, [css]ваш код[/css] — для CSS, [code lang=»js»]ваш код[/code] — для HTML или JS, указав соответствующий lang.Из последнего
Как удалить часть шаблона в редакторе сайта WordPress
Как сделать кнопку «Вернуться назад» и скрыть её если нет истории переходов
Как передать IP посетителей в Яндекс Метрику и Google Аналитику