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

Просмотров: 1 722

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

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

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

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

<div class="ad1"> ваш код здесь </div>

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

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

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

.ad1 {

padding: 30px 0 0 550px;

}

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

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

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

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

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

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

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

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

.ad1 {float: right;margin: 10px 10px 0px 0px;}

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

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

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

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


42 комментария к “Устанавливаем баннер в шапке сайта”

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Ответить
  12. Прекрасно написано и легко применить! У меня баннер даже с Вашими размерами встал отлично! Надо было вставить телефоны справа в шапку на один из сайтов… Спасибо.

    Ответить
  13. Доброго времени!
    Не могу ни как справиться…у меня в шапке стоит логотип и если я ставлю туда баннер то он у меня выскакивает либо над логотипом, либо под ним, а справа огромное пустое место… Не подскажете как это исправить?

    Ответить

Оставьте комментарий

 необходимо принять правила конфиденциальности