Как добавить логотип на WP сайт

Как разместить логотип на сайте WordPress WordPress
Как выделиться на фоне миллионов сайтов и запомниться читателям с первого раза? Разместите в шаблоне WordPress логотип сайта!

Назначение лого на сайте

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

Логотип на сайте может выполнять несколько функций:

  • Узнаваемость и запоминаемость — это классика
  • Навигационная — при нажатии на лого происходит переход на главную страницу
  • Декоративная — в некоторых случаях логотип можно использовать для визуального оформления сайта

Особенности логотипа для WP-сайта

Давайте сначала определимся, а что собственно представляет собой лого? По своей структуре все логотипы можно разделить на три группы:

  • уникальная иконка, отображающая суть блога/компании (чем меньше деталей, тем лучше)
  • название блога/компании, выполненное стильным шрифтом
  • комбинация иконки и текста — наиболее популярный вариант

Чтобы реализовать все эти варианты при оформлении сайта WordPress предлагает «расчленить» логотип на составляющие:

  • изображение — это может быть как иконка так и растрированный текст
  • название сайта
  • краткое описание сайта
Логотип WordPress сайта: три составляющие
Составляющие логотипа для WordPress сайта

При разработке сайта Вы можете использовать все эти составляющие, однако при этом возникнут следующие нюансы:

  • Расположение элементов между собой очень ограничено
  • Не всегда есть возможность использовать нужный шрифт и точный его размер
  • Не предусмотрено использовать несколько цветов для одной надписи

Есть и хорошая новость: Вы можете визуально скрыть ненужные элементы (название и описание), что позволит реализовать любое Ваше решение, например объединить иконку с названием сайта в красивую конструкцию и всё это загрузить на свой блог в виде готового изображения:

SiteFromZero - блог о создании сайта своими руками с нуля

Установка логотипа в WP

Чтобы добавить в WordPress логотип сайта нужно зайти в кастомайзер, для этого в панели WP заходим в раздел Внешний вид/Настроить. В зависимости от выбранной темы загрузка логотипа может находиться в различных закладках. Так, например в теме Reboot она находится в разделе Блоки / Шапка:

Коррекция ширины и высоты логотипа на сайте WordPress

По сути здесь Вы загружаете именно картинку: вырезанный логотип на прозрачном фоне.

Текстовые же составляющие можно добавить как в общих настройках сайта так и в кастомайзере (визуальном редакторе). Немного странно, что элементы одного логотипа настраиваются в разных местах, но это уже зависит от разработчиков, а нам нужно просто знать некоторые особенности.

Логотип WordPress сайта: текстовая составляющая
Редактирование текста логотипа в общих настройках
Свойства сайта в кастомайзере
Редактирование текста логотипа в кастомайзере

А теперь посмотрим, как изменится вид сайта, если загрузить готовый логотип и отключить название/описание блога:

Как добавить логотип на сайт WordPress

Какой вариант лучше, я даже не знаю. Напишите в комментариях, какое оформление лучше смотрится и запоминается?

Некоторая путаница может возникнуть у новичков в связи с использованием двух терминов: логотип и иконка. Для большинства из нас это одно и тоже, однако в WP это разные понятия: они и отображаются и загружаются в разных местах.

Логотип выводится в шапке сайта, а иконка — в закладке браузера и некоторых других местах. Загрузка иконки (правильнее называть «фавикон») несколько сложнее, поэтому об этом мы поговорим в отдельном обзоре.

Размеры логотипа

В зависимости от места расположения размер логотипа может сильно отличаться: от небольшого значка до яркой детали шапки. В теме Reboot размеры можно настроить как в разделе Настройка/Блоки/Шапка, так и в расширенных настройках

Установка размера логотипа в WordPress

Проверьте отображение логотипа на различных устройствах и при необходимости отрегулируйте его размеры.

Формат логотипа

Поскольку логотип сайта загружается в шапке, то лучше подготовить PNG файл: вырезанное изображение на прозрачном фоне. В этом случае Вы сможете менять цвет фона или загрузить фоновое изображение по своему усмотрению.

Для более быстрой загрузки сайта я пользуюсь более современным форматом WebP, который при том же качестве позволяет сэкономить 30-50% места.

Как правильно назвать файл?

Вроде бы всё готово! Давайте проверим с помощью сервиса PageSpeed Insights. Мы получили замечание относительно вставленного логотипа:

Не заданы ширина и высота картинки
В картинке не заданы явным образом ширина и высота

Давайте исправим ошибку: переименуйте название файла с указанием размера в пикселях logo-512×512.webp и замените картинку на новую. Обновите и ещё раз проверьте, удостоверьтесь, что теперь работа выполнена на «отлично»

Итак, подведём итог. Логотип — очень важная деталь блога, Ваша визитная карточка. Устанавливайте контакт со своими читателями, вызывая доверие и компетентность. Теперь Вы знаете как разместить в WordPress логотип сайта, а также особенности и нюансы этого процесса. Надеюсь мой обзор был Вам полезен.

Буду благодарна, если напишите в комментариях какой вариант логотипа (на светлом или тёмном фоне) Вам кажется более интересным и запоминающимся.

Поделиться с друзьями
Светлана Стецко

Буду рада помочь новичкам разобраться с базовыми понятиями и настройками. Предлагаю пошаговую инструкцию создания качественного блога без знания программирования.

Оцените автора
( Пока оценок нет )
SiteFromZero
Жду Ваши комментарии. Давайте обсудим!