Как вставить/поменять логотип в шаблоне WordPress

WordPress

9

Читатели блога «Мир Вебмастера» уже знают как создавать логотипы для веб-ресурсов – мы об этом говорили ранее в статье «Как создать логотип для сайта», и наверняка опробовали сервисы, представленные в материале  «5 Лучших генераторов логотипов для сайта». Пришло время украсить свой блог красивым и запоминающимся логотипом!Как поменять логотип шаблона wordpress

В сегодняшнем уроке я подробно расскажу как вставить/поменять логотип на сайт WordPress – подопытным «кроликом» выступит один из моих ресурсов. Но сначала узнаем: а есть ли там логотип в виде изображения? Для этого кликнем на названии сайта правой кнопкой мышки:

Как видите, система предлагает сохранить мне ссылку, предложений сохранить картинку нет. Значит логотип у меня текстовый. Он легко меняется по пути Консоль – Настройки – Общие, и нам в данном случае не интересен.

Если же у вас логотипом стоит картинка, следует его удалить. Проходим в раздел «Внешний вид» или «Дизайн». Есть пункт с названием шаблона – хорошо, удаляем там логотип. Нет – идем в Редактор и в header.php ищем код изображения, который следует удалить.

Итак, логотипа на вашем сайте нет. Создадим же его! Для этого запускаем клиент FTP (у меня, к примеру, FileZilla) и сохраняем изображение в папке /public_html/wp-admin/images. Путь может быть и другимwpcontent/themes/название_темы/images, например. Надеюсь, картинка у вас небольшая, поскольку стоит понимать, что все должно быть в меру и подходить по дизайну.

Итак, логотип загрузили. Кстати, можно картинку отправить в любое другое хранилище, но это будет лишней ссылкой на чужой сайт, оно вам надо? Если нет доступа к FTP, то сохраняйте картинку в любом сообщении блога – и забирайте адрес логотипа. В итоге код должен выглядеть примерно так:

<img src=’http://адрес сайта/wp-admin/images/картинка’>.

Теперь нужно определиться, куда его вставить. Для этого идем по пути Консоль – Дизайн – Редактор. И выбираем шаблон «Заголовок» (header.php).

Куда вставить код логотипа на сайте WordPress, зависит от шаблона. Ищите такие теги, как на картинке (напомню, быстрый поиск по тексту можно осуществить с помощью сочетания клавиш Ctri+F):

Я ничего подобного не нашел и пошел еще одним путем — вставил код после тега <div id=’header’>:

Теперь посмотрим что у меня получилось, идем на главную страницу моего сайта:

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

<img src=’http://geroikryma.net/wp-admin/images/geroikryma.png’ style=’position:absolute; top: 40 px; left: 20px;’>

Здесь отсчет идет от верхнего и левого края страницы. Путем манипуляций и подбора отступов у меня получилось следующее:

Если вам необходимо вставить логотип как ссылку, нужно еще немного изменить код, прописав адрес к нужной странице:

<a href=’нужная_страница’><img src=’путь_к_картинке’ style=’position:absolute; top: Хpx; left: Ypx;’></a>

У меня получилось так:

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

Возможные ошибки:

  1. Большой размер картинки
  2. Непонимание где находится нужный шаблон
  3. Невнимательность с кодом
  4. Невозможность заливки картинки на сайт.

Что делать:

  1. Исправить размер картинки – редакторов много, найти их совсем не трудно. Тот же Paint есть на любом компьютере с ОС Windows.
  2. Тут нужно внимательно смотреть на представленный скриншот. Если не получается – пошевелите мозгами и найдите подобный файл. Хотя он вроде как одинаков во всех шаблонах.
  3. Лечится внимательностью и созданием кода в Блокноте, например, а уже потом переносом его в редактор WP.
  4. Картинку можно залить на любую страницу вашего сайта – если никогда не работал с FTP. Просто добавьте изображение в новый пост. И все.

Успехов!

9 комментариев

по хронологии
по рейтингу сначала новые по хронологии
Вячеслав

Здравствуйте!
Подскажите пожалуйста как поставить логотип в шапку сайта на wordpress.
Я все перепробовал ничего не выходит((((
У меня тема battery2

логотип появился, поставила размещение как в примере style=’position:absolute; top: 40 px; left: 20px;’ и картинка пропала. Уже меняла размеры отступов и лапки поставила вот такие " двойные.

Спасибо. Благодаря этому посту быстро смог сделать логотип ссылкой 😉

position:absolute; - с таким атрибутом можно подогнать только под определённое разрешение экрана. На отличном от того, на которое рассчитано, изображение съедет и будет смотреться по колхозному.
К сожалению с помощью тега и атрибута CSS (обтекание слева) тоже ни чего не получилось. Похоже нужно потратить кучу времени чтоб разобраться 1) получше в css и html, в частности тег и всё что с ним связано;
2) в коде установленной темы

Макар

Благодарю за полезный и актуальный материал!

Спасибо за статью!

Спасибо за информацию.

спасибо за статью. большое)). не совсем ясно, где разместится логотип. По тексту, он как заголовок или дополнение к нему. А мне нужно, чтобы в отведенное место попало изображение-логотип. Как на картинке-- в квадратике рядом с названием сайта

decom_2016-03-14_224618-к вопросу о логотипе сайта_56e716cf8af5a.pngdecom_2016-03-14_224618-к вопросу о логотипе сайта_56e716cf8af5a.png

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

decom_ Надежда_57e91d9ab7a28.jpgdecom_ Надежда_57e91d9ab7a28.jpg

Добавить комментарий

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам:

Более 6 лет опыта работы

Отвечу в течении 24 часов

Минимальная сумма заказа 1000Р

Ваше сообщения отправлено
Ваше сообщения отправлено успешно