(Последнее обновление: 02.07.2016)

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