Урок 144 Как разместить баннер на сайте или блоге WordPress

kak_postavit_banner

Спонсор поста: Администрируемые VPS на XEN от 10$ без оверселлинга с тестовым периодом 14 дней от Inferno Solutions. Отзывы на zapili.net

Добрый вечер, сегодня я хотел бы рассказать о том, как разместить баннер на сайте. Многие задают мне этот вопрос, значит проблема актуальная, постараюсь Вам объяснить весь этот несложный процесс. Хочу сразу сказать, что я не являюсь профессионалом в html, php, css и др. языках программирования, я вообще плохо в них разбираюсь, но то, что мне нужно, я потихоньку немного усвоил. И если этот путь, который я напишу ниже, не совсем правильный, усложненный, “мусорный” - “извиняйте”, не всем дано все знать :). Я всего лишь делюсь с Вами тем, как я вывел баннеры у себя в шапке.

Как разместить баннер на сайте

Каждый по-своему размещает баннеры, кто-то даже подбирает темы только такие, куда встроены рекламные баннеры.

Приведу пример размещения баннеров как на моем блоге WPnew.ru - в 2 колонки. То есть, это тот случай, когда Вы можете видеть слева название сайта, его логотип, как это обычно бывает, а справа же стоят баннеры.

Для начала я добавил в файл темы style.css в самый конец следующие строки:

.columnslogo {
display: block;
float: left;
width: 470px;
height: 105px;
padding: 0px;
margin: 0 0px 0px 0;
overflow: hidden;
}
.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 – выводится слева). А columnshead – за вывод баннеров (заметьте, здесь стоит float: right – вывод справа, именно этот оператор является ключевым моментом, то есть мы “прижимаем объекты” к левому и правому краю соответственно. Также стоит задать ширину и высоту (в случае резиновыми шаблонами все сложнее), в моем случае width: 470px (ширина) у обоих классов одинаковая, то есть я, получается, разделил шапку, которая размером примерно 1000px (чуть меньше) на 2 колонки по 470 пикселей (кстати, возможно Вам будет интересно почитать урок про CSS).

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

Это было то, что касалось файла style.css, а теперь перейдем непосредственно к выводу баннеров на сайте. Для этого, если мы хотим поставить баннеры в шапку, открываем файл header.php и ищем место, где выводятся логотип, название сайта и т.п. Вот так это выглядит в моем случае:

Как разместить баннер на сайте1 – “правая часть” шапки, условия которого мы задали выше в style.css.

2 – стиль, благодаря которому идет отступ снизу на 5 пикселей, и “рисуется” белая рамка сплошной линией толщиной 1 пиксель.

3 – вывод первого баннера, который выводится напрямую (в данном случае баннер “Хостенко”, который Вы видите в шапке). Вот его полный код:

<a href="http://hostenko.com" rel="nofollow" title="Специализированный WordPress-хостинг"><img src="http://telepark.ua/tpb/0/58.gif" rel="nofollow" width="468" height="60"  alt="Специализированный WordPress-хостинг" border="0"></a>

Вы можете вывести свое изображение (к примеру баннер “Купить рекламу”) просто поменяв значение img src – там укажите полный адрес до баннера, 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 – отступ слева для названия сайта, описания и т.п.

Заключение

Как видите, по-моему, ничего сложного нет. Если у Вас возникнут трудности, попробуйте “тупо скопировать” все с этого урока (аналогично вывести баннеры), а уже потом, при помощи великолепного инструмента FireBug, поправить все, как Вам нужно. На сегодня все, до встречи на следующих уроках!

С уважением, Пётр Александров.
Подпишитесь на бесплатные уроки

Понравился урок? Вы не хотите пропускать новые бесплатные уроки по созданию, раскрутке и монетизации блога? Тогда подпишитесь на RSS или на электронный ящик в форме выше и получайте новые уроки мгновенно! Также можете следить за мной в Twitter.

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

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

34 комментария

по хронологии
по рейтингу сначала новые по хронологии
alimugik http://itshneg.ru

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

Даня http://news-anime.ru/

Полезно, действительно. В будущем обязательно вновь сюда зайду, чтобы использовать. А пока намотаю на ус ;]

Михаил http://morningdrink.ru

А мне кажется, что баннеры расположены в 2 строки. Ну да ладно. Спасибо за урок, пользительно и как всегда вовремя:)

Вика http://krasivo-zdorovo.ru

Спасибо за совет. Я думала, это сделать сложнее. Ваши уроки по работе с Вордпрессом очень понятные и мне очень помогают. Спасибо!

Виталий http://techava.ru/

Здравствуйте, хочу поставить на свой блог: techava.ru Такую же боковую панель (справа) как на Вашем readers и followers как оно называется и где можно скачать?

alimugik http://itshneg.ru

Об этом плагине чуть ли не в каждом посте спрашивают)))

Simple Counters плагин называется

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

Спасибо за помощь 🙂

Boxeroverlord http://infohard.net

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

akill http://symbian-blog.com

Код плохо читается (по крайней мере мне). Советую писать стандартно в столбик:

.wpnew {

display: block;

float: left;

width: 50px;

height: 50px;

...

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

Да, Вы правы, что-то не подумал, теперь исправил в уроке.

Arthur http://bruno-mars.ru

Петр, могли бы вы помочь? Извините, что не по теме.

Я хотел бы, чтобы в виджетах выводились php. Я перебрал кучу плагинов, в том числе и те, которые написаны у вас, но для новой версии WP они не подходят и консоль бьет 505 ошибку, что означает о том, что версия wp и плагина не совпадает. Помогите мне вывести в виджетах php. Думаю, ответите и заранее вам, спасибо!

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

С новыми версиями ВП не пробовал выводить php в виджете.

Arthur http://bruno-mars.ru

Петр, попробуй пожалуйста!

Перт, извините, что не по теме.

Мне интересно: вы уже забросили рубрику "Мои эксперименты"? Последняя запись была 30 июня. Я думаю, что многим хотелось бы узнать чем закончился (или не закончился) эксперимент и как обстоят дела у сайта.

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

Да, скоро будет продолжение.

Сергей http://kurs.zarabotokinnet.ru

Интересная информация! Многие начинающие пользуются только вставкой готовых кодов банеров через виджеты. Насчет Simple Ciunters Я видел уже в разных браузерах и не на одном десятке блогов, что отображены только белые цифры. А рамки нет! Мне НИКТО до сих пор не ответил почему так может быть...Очень интересно...

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

Какой рамки? Я не совсем понял...

Ann http://clickercat.ru

Спасибо, Пётр, объяснил принцип!

Если у кого не получилось можно попробовать так.

Добавляете в файл style.css текущей темы:

.ban

{

display : block;

position: absolute;

left: 321px;

top: 45px;

width: 468px;

text-align: center;

}

left и top - это положение Вашего баннера.

Потом в файл header.php :

Здесь ваш код баннера

Даня http://news-anime.ru/

Спасибо, Ваш помог код!

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

Спасибо, очень полезно.

Ann http://clickercat.ru

[div class="ban"]

Здесь ваш код баннера

[/div]

Наталья http://yourfinetravel.com

Пётр, спасибо! Я впервые у Вас на сайте, с удовольствием буду постоянно заходить к Вам! У вас очень многому нужно научиться, добавила в закладки. Буду рада видеть и Вас у меня в гостях!

Владимир http://fotoblur.ru

Почему-то добавляю и по Вашему методу и по методу Ann в style.css нужные строки, а соответствующие строки в header.php не появляются. В чём может быть дело ?

Марина http://secret4beauty.ru/

У меня тоже не получается. баннер встает либо под название сайта либо над ним, но только не справа!

Марина http://secret4beauty.ru/

Почему никто не отвечает? Ауу...

Alexei Tihonoff http://iphones.md

все получается только не хочет открывать ссылки...

В чем может быть проблема????

Юрий http://net-hit.ru/

Как раз ищу в поисковике, как банер вставить. Вот нашел полезную статью. Буду пробовать.

Bakkin http://nl5blog.ru

Спасибо за науку. Все проще чем казалось. Блог в закладки.

Спасибо! Делала не совсем по инструкции, но зато исправила код!)) Очень помогли!

seltik http://nabablo.ru/

Привет Пётр , я вот добавил в style.css нужные строки , но в хедере у меня не появился class=columnslogo не ту куда прописать баннеры......

seltik http://nabablo.ru/

Так же интересует вопрос можно ли вставить баннер скажем от ротебана внутри постов , так чтобы 1 рас прописать где нибудь и чтоб он появился во всех статьях.... может есть урок такой я просто не нашёл ... только директ и адсен

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

Вставляйте код в single.php

Роман http://www.romangorbunov.com

Большое вам спасибо, всё получилось почти сразу, хорошо, что я вас нашёл.

Хоккеист http://sportrezult.ru/category/novosti-hokkeya/

Спасибо за отличную статью. Сне очень помогло установить баннер с нормальным отступом.

Наверх Рейтинг@Mail.ru