Как разместить баннер в шапке (заголовке) сайта или блога на WordPress?

ban4

Пользователь под ником «Редван» оставил на данном блоге комментарий следующего содержания: «Подскажите, как разместить баннер в шапке (заголовке) сайта или блога на Вордпрессе? Заранее благодарен за ответ!».

Вопрос довольно интересный, особенно для начинающих веб-мастеров, которые максимальным способом хотят рационально использовать пространство страницы своего сайта или блога для размещения рекламных материалов. К тому же рекламный баннер в верхней части сайта довольно гармонично вписывается в дизайн и наиболее представлен обзору заходящим на сайт пользователям. Есть темы (шаблоны) для WordPress, где место под установку баннера в заголовке уже предусмотрено, однако подавляющее большинство тем WordPress такой установки не имеют. Я хочу рассмотреть самый простой и элементарный способ установки баннера в заголовок (header) блога или сайта, выполненном на WordPress.

Для этого в качестве примера будем использовать данный блог. На нем я разместил в заголовке медийный баннер с рекламой от Google AdSense. Вот как это все выглядит на изображении.

ban1

Для того, чтобы произвести выведение рекламного блока под медийный или текстовый баннер в шапке (заголовке) блога или сайта на Вордпрессе, Вам необходимо зайти в его админпанель (Как войти в админ-панель (консоль) сайта или блога на WordPress?), в левом меню выбрать раздел «Внешний вид», зайти в подраздел «Редактор» и в правом меню «Редактора» выбрать файл «Заголовок» (header.php).

Далее Вам необходимо найти то, место где выводится название блога или же его описание. В моем примере это название блога и его описание выводится следующим образом:

<h1><a href=»<?php bloginfo(‘url’); ?>»><?php bloginfo(‘name’); ?></a></h1>
<h2><?php bloginfo(‘description’); ?></h2>

Под него мы должны прописать класс баннера, с целью дальнейшего задания положения баннера в шапке (заголовке) сайта. Делаем это следующим образом:

<div class=»banner»> код Вашего баннера </div>

Здесь класс можно назвать по-разному, в моем примере это banner, я встречал и ads, и ad1, и reklama, и click, Вы можете предложить свой вариант, главное, что бы он был выполнен латиницей и не повторял уже существующие классы.

В моем примере стоит реклама от Google AdSense, поэтому ее скрипт имеет следующий вид:

<script async src=»//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js»></script>
<!— New Adman —>
<ins class=»adsbygoogle»
style=»display:inline-block;width:468px;height:60px»
data-ad-client=»ca-pub-8137491159837607″
data-ad-slot=»7866026176″></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

В нашем примере полное изменение в кодах «Заголовка» выглядит вот так (изображение можно увеличить, кликнув по нему левой кнопкой мыши):

ban2

Далее нашему баннеру необходимо указать положение в шапке (заголовке) сайта. В моем примере это положение справа от названия и описания. Для дальнейших действий используем таблицу стилей CSS.

Для этого открываем здесь же в «Редакторе» файл «Таблица стилей» (style.css) и добавляем в него необходимый код CSS (его местоположение в данном случае роли не играет, можете добавить его в самый конец, можете – в другое место), в котором задаются координаты положения нашего баннера:

.banner {
padding: 30px 0 0 450px;
}

В данном коде:

banner – присвоенный нашему баннеру класс

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

30px – размер отступа от верхнего края шапки (заголовка) в пикселях

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

0 – размер отступа от правого края шапки

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

ban3

Подберите методом «втыка» необходимое расположение своего баннера применительно к своему блогу.

Вот и все, баннер установлен! Как видим, нет ничего сложного! Удачи! Не будет получаться, пишите, помогу!

Вы можете оставить комментарий, или ссылку на Ваш сайт.

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

*

 

Яндекс.Метрика Рейтинг сайтов top.gigmir.net Web100kz.com - каталог сайтов