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

Просмотров: 7 063

Доброго времени суток, дамы и господа! Давно хотел написать этот пост - рекламный баннер в шапке сайта, но всё откладывал на потом. Вот время потом наступило. Установив понравившийся шаблон 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
Красивое расположение баннера в шапке блога

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

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


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

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

    Ответить
    • Такой не будет. Отпугивает совсем другая реклама — BodyClick (ClickUnder), PopUp и тому подобное.

      Ответить
        • Так у вас картинка в шапке блога. Можно попробовать выше шапки установить, в центре или чуть ниже меню. 🙂

          Ответить
          • Здравствуйте. А можно к Вам обратиться убрать банер из заголовка и поставить другой?

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

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

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

    Ответить
    • Зависит от размера баннера, поэтому я туда и не ставлю рекламный блок Адсенсе.

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

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

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

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

    Ответить
    • Так вот же здесь, до или после статьи, а вот ещё различные методы. Вы просто не искали, у меня всё есть.

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

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

    Ответить
    • Привет! У вас после строки END PAGE MENU идет слайдер, хотя подождите, а в каком файле вы ищите?

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

    Ответить
    • Для 1. оф.плагин http://wordpressmania.ru/plagin-adsense-dlya-wordpress/ для 2. плагин http://wordpressmania.ru/simple-ads-manager-rotator-bannerov-wordpress/ и там же ротатор баннеров.

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

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

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

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

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

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

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

    Ответить
  14. Если у кого не получилось, то я использовал вот такой код:
    .ad1 {
    float: right;
    margin-top: -65px;
    margin-right: 0px;
    }

    И поиграйтесь с минусовыми значениями.

    Ответить

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