Добро пожаловать, друзья!

Устанавливаем баннер в шапке сайта

banner-v-shapke-sajtaДоброго времени суток, дамы и господа! Давно хотел написать этот пост - рекламный баннер в шапке сайта, но всё откладывал на потом. Вот время "потом" наступило. Установив понравившийся шаблон WordPress, возникает необходимость установить в шапку сайта определенный рекламный баннер или какую нибудь картинку. Сделать это можно двумя способами. Первый: это - в настройках шаблона, многие темы представляют такую возможность. Вставляете код в специальное поле, сохраняете  и опля, баннер в шапке сайта. Но, что делать, если в настройках шаблона такой возможности нет?

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

Как установить рекламный баннер в шапку сайта на Wordpress

Для того, чтобы вывести рекламный блок или любой баннер в шапке блога вам необходимо зайти в раздел "Внешний вид" - "Редактор". Откройте файл "Заголовок" (header.php) в вашей теме. Найдите то место, где у вас выводится название блога (или логотип) или описание блога. Далее, вашему приготовленному рекламному коду нужно присвоить определенный класс, для того, чтобы в следующем шаге задать нужное положение баннера в шапке блога:

Как видите у меня задан класс ad1, вы можете указать любой, например так: banner или ещё как то в этом роде. Всю эту конструкцию кода вставляем чуть ниже найденной строчки (смотрите выше):

kod-bannera
Код баннера после описания блога

Как видите код баннера я вставил после описания этого моего блога (слоган). Обновите файл. У вас теперь в шапке сайта появится баннер (посередине), но ему нужно указать место, где он должен находиться, то есть справа заголовка и описания блога. Для этого нам нужно использовать стили CSS. Откройте файл "Таблица стилей" (style.css) и в самом конце добавьте небольшой код CSS, где будут заданны координаты вашего баннера:

В данном стиле, место расположение баннера указанно для моего шаблона. У всех темы разные, поэтому вам надо поиграть с цифрами. Где:

.ad1– присвоенный класс баннера;

padding – свойство позволяющее задать величину поля для всех сторон элемента сразу;

30px – отступ от верхнего края;

0 – отступ от нижнего края;

0 – величина отступа от правого края;

550px – величина отступа от левого края.

Можно попробовать такой стиль (если у вас вдруг не получиться):

Установите нужные границы и получите красивое расположение баннера в шапке блога:

banner
Красивое расположение баннера в шапке блога

Вот вроде и всё. Если чего то не получается, спрашивайте, помогу. А я с вами прощаюсь. Всего доброго. Удачи.

С уважением, Сергей - блог WordPress mania

Комментарии

  • Не будет ли такой баннер отпугивать посетителей — ведь перенасыщение рекламой не есть хорошо… Мне кажется…

  • Добрый вечер! Тема нужная для меня, как раз искал как можно вставить баннер в шапку. Короче- сделал всё как Вы написали, получилось- баннер работает, но почему то не кликабельный..В чем может быть дело?

    • Здравствуйте, Михаил! Попробуйте так — вставьте баннер чуть ниже строчки <div id="header"> или чуть выше <div id="hmenu"> должно заработать.

  • По моим наблюдениям баннер в шапке слабо кликабельный, поэтому убрал не эффективно.

  • Коротко, ясно и доступно, а главное работает.
    Спасибо!

  • А что делать, если у меня в файле header.php нет тегов h1 h2?

    • Алексей, ориентируйтесь на site-title, site-description или на меню. Пробуйте методом тыка, хуже не будет. 🙂 Хотя странно, теги h1 h2 должны быть обязательно.

  • да, спасибо, вроде получилось

  • Добрый день, использую тему TechMode, в ней есть встроенные функции добавления баннера, однако когда вставляю код ничего не происходит. Пробовал по Вашему методу, баннер появляется в разных местах сайта, но если вставить код в указанное Вами место, то отображение так же пропадает. Может знаете в чем может быть дело? Это важно для меня, так как хотел попробовать сделать кнопки в шапке сайта по средствам баннера 🙂

  • Вечер добрый. Но при обновлении темы банер слетит. А как в дочерней теме вставить банер

  • Подскажите а как добавить баннер в текст?? Не в шапку а прямо в текст начало или середину??
    Вот как у вас над статьей два квадрата висят.

  • Сделал как в вашей статье, но баннер не появился..Что делать?

  • Большое Вам Спасибо!!!

  • Все сделала, как написано, НО! Баннер есть, хоть и вставила совсем не туда, а вот позиционирование не функционирует. Жаль, мне именно сдвинуть надо было вправо.

  • Здравствуйте. Хочу вставить баннер под слайдер.
    Подскажите куда нужно вставлять код. Не могу найти строки нужные.

  • а как можно этот процесс автоматизировать? может какой плагин хороший есть?
    Мои цели:
    1. Размещение рекламы в шапке и сайдбаре
    2. Размещение баннеров на определенное время
    3. Простое управление баннерами (загрузил картинку, написал адрес и все).

  • Пожалуйста подскажите как сделать чтоб, при клике по шапке сайта открывался рекламный сайт работаю с игровыми офферами, и в статистике по анализу кликов вижу что многие кликают по шапке , но шапка fnq по умолчанию ведет на главную станицу сайта , а мне надо чтоб открывался рекламные сайт ВОТ СКРИН СДЕЛАЛ ЧТОБ ПОНЯТНЕЕ БЫЛО prntscr.com/b3pgs8

    • Привет! Нужно сделать картинку ссылкой на нужный сайт. Надо разбираться как это сделать, надеюсь в инете есть инструкции. Я на данный момент подсказать не могу. 🙂

  • Здравствуйте, что делать если вот этого style.css нет

    • Привет! Обязательно должен быть файл Таблица стилей (style.css) Внешний вид — Редактор и сразу он откроется первым. 🙂

      • нашла, просто мы о разных сайтах говорим я на своем никак не могу поставить баннер в шапку, не поможете?

  • Здравствуйте. На моём блоге шапка чистая, написано лишь название блога. Хочется как-то сделать шапку покрасивее. Смотрел видео на ютубе-нужно знать коды: куда и что-не понимаю в них. Не подскажете ли-как сделать шапку?

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Решите задачку: *