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 и находим место, где выводятся лого или имя сайта. Это может выглядеть, например вот так:

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-проектов в российском сегменте интернет. Специализация: создание сайтов и их комплексное продвижение, внутренняя оптимизация, внешняя оптимизация, трафиковое продвижение, контентное продвижение...

Связаться со мной >>

• Установка WordPress на хостинг - 11.05.2017
• Хостинг для WordPress - 26.04.2017
• 7 советов как ускорить WordPress - 18.01.2017
• WordPress плагины вывода популярных постов - 25.07.2016
• Готовим ваш сайт для мобильных устройств? - 29.06.2016

Посмотреть все публикации

Как преодолеть технические сложности

Javascript + jQuery для начинающих

Профессиональный сайт за один день.

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

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

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

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

и решите пример 8-5= ответ буквами

Δ