WordPress баннер

Вставляем в WordPress баннер.

Wordpress баннерПривет всем! Сегодня я решил рассказать вам, как вставить в WordPress баннер. Почему? Потому что очень многие владельцы блогов хотят использовать свой блог, как рекламную площадку. Или просто вставить баннер партнерской программы в шаблон своего блога.

В основном пользователи ищут шаблон WordPress уже с местом под баннер — боятся, что это сложно, вставить в WordPress баннер самому. Способ вставки баннера в WordPress, который я хочу вам предложить, не претендует на уникальность и неповторимость, поэтому используйте его на свое усмотрение.

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

И так начнем.

Сначала находим в вашем файле style.css стиль Logo:

.columnslogo {
display: block;
float: left;
width: 470px;
height: 105px;
padding: 0px;
margin: 0 0px 0px 0;
overflow: hidden;
}

Копируем его, вставляем снова в файл и меняем .columnslogo на .columnshead и float: left; на float: right; получаем:

.columnshead {
display: block;
float: right;
width: 470px;
height: 133px;
padding: 0px;
margin: 0px 0px 0px 0;
overflow: hidden;
border: 0px solid #FFFFFF;
}

Класс .columnslogo здесь отвечает за вывод лого, имени сайта и т.п. (обратите внимание на float: left – выводится слева). А класс .columnsban – за вывод баннера (здесь обратите внимание на float: right – выводится справа — это ключевой момент). Мы располагаем объекты возле левого и правого края соответственно. Необходимо задать ширину и высоту объекта, в нашем варианте width: 470px (ширина) у обоих классов одинаковая, то есть мы разделили шапку шириной примерно 1000px на 2 части по 470px.

Высота (height) в columshead – 133px, так как рассчитано на 2 баннера размером 468*60 px + отступы. Если Вы вставляете в WordPress один баннер, то значение высоты надо уменьшить. В этом случае можно добавить рамку для баннера: border: 1px solid #FFFFFF;

Теперь займемся выводом баннера непосредственно в шаблоне WordPress. Чтобы вывести его в шапке сайта, открываем файл header.php и находим место, где выводятся лого или имя сайта. Это может выглядеть, например вот так:

Wordpress баннер

1 – «правая часть» шапки, условия, которые заданы в файле style.css.

2 – стиль, создающий отступ снизу на 5 пикселей, и белую рамку толщиной 1px.

3 – вывод WordPress баннера, который выводится напрямую. Вот пример кода:

 

<a href="http://vash_sayt.com" rel="nofollow" title=" Ваш текст WordPress"><img src="http://ваша_картинка.gif" rel="nofollow" width="468" height="60"  alt="Ваш текст " border="0"></a>

В этот код вы можете вставить любое свое изображение. Поменяйте значение img src=»здесь укажите путь к вашему WordPress баннеру» width=»468″ height=»60″ – его ширина и высота. Также Вы можете установить свою ссылку на любую страницу. После a href=»вставьте свою ссылку на банер».

4 – это код Rotaban, который идет после “закрытия” (</div>) стиля первого баннера.

5 – вывод левой части шапки (класс, который мы задали в style.css).

6 – класс — вывод логотипа перед названием сайта:

.wpnew {
display: block;
float: left;
width: 50px;
height: 50px;
padding: 0px;
margin: 10px 0px 0px 0px;
overflow: hidden;
}

7 – отступ слева для имени сайта, описания и т.п

Вот видите ничего сложного. Если у вас возникнут вопросы, не стесняйтесь, обращайтесь.

Удачи вам и процветания!

Автор - Александр

Меня зовут Александр.
Я Вебмастер и SEO — специалист по созданию и продвижению сайтов на WordPress.
В профессиональном интернет-маркетинге c 2007 года. Основные направления: создание и продвижение web-проектов в российском сегменте интернет. Специализация: создание сайтов и их комплексное продвижение, внутренняя оптимизация, внешняя оптимизация, трафиковое продвижение, контентное продвижение...

Связаться со мной >>
Посмотреть все публикации

    Ваше имя (обязательно)

    Ваш e-mail (обязательно)

    Сообщение (обязательно)

    "Поставьте галочку, если вы не робот"

    и решите пример ответ буквами

    7 комментариев

    • Валентина

      Очень нужная информация. Спасибо за весь изложенный материал. Было бы хорошо если был бы скайп и иногда получит совет Спасибо!

    • Спасибо! Буду обязательно использовать. Всего доброго!

    • Давно хотел вставить банер в шапку. Сейчас попробуем.

    • Spasibo za stat’yu. Vsyo dostato4no informativno. Sey4as budem probovat’.

    • Что-то слишком много кодов и манипуляций. Не каждый сразу разберется что к чему и куда что вставлять. Для меня взрыв мозга. Не могу например настроить баннер в своем шаблоне, он куда-то вниз убегает под логотип. А мне надо чтобы на одном уровне с лого был, в шапке сайте…

    • Александр

      Просто читайте внимательно и не торопитесь, и все у вас получится. Здесь как раз, я думаю, рассмотрен ваш случай… Вы просто не правильно прописали стили.

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

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