Заработок в интернет

Создание, оптимизация, продвижение сайта и заработок на его основе

Устанавливаем баннер в шапку сайта wordpress

Автор: Сергей Егерев Опубликовано: 27 - Март - 2012

как разместить баннер на сайтеПриветствую вас уважаемый посетитель!

Тема сегодняшней статьи: Как разместить баннер у себя на сайте wordpress. Часто начинающие вебмастера сталкиваются с этой проблемой.

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

Так вот она шапка сайта – и место есть, и в глаза бросается сразу любому, кто попадает на ваш сайт. Только загвоздка в том, что шаблон, понравившийся вам когда-то и добросовестно скачанный на компьютер, а впоследствии установленный на сайт, не предназначен для такого «кощунства» как вставка баннера. Не предусмотрел автор, или не хотел портить уникальность своего шедевра, оставляя дырки для баннеров.

Есть несколько выходов из создавшегося положения:

  1. Поменять к такой-то бабушке шаблон, выбрав тему со специально отведенными под баннеры местами.
  2. Плюнуть на баннер и на его размещение, довольствуясь только проставлением партнерских ссылок в тексте.
  3. Пригласить фрилансера для того, чтобы разместить баннер в шапку сайта.
  4. Внести изменения в соответствующий файл в шаблоне wordpress, тем самым добиться результата и разместить баннер на сайт.

Мы пойдем с вами по последнему пути, так как мы не привыкли отступать!

Размещать баннер на сайте путем внесения изменений в шаблон не доставляет особых хлопот, главное знать в какой файл вносить изменения. А какой файл и за что отвечает в вашем шаблоне, можете почитать в статье «Установка темы на блог». В противном же случае можно так установить баннер на сайт, что потом без вмешательства специалиста не обойтись, а это дополнительные расходы.

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

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

Размещение баннера в шапке сайта wordpress.


Мы разместим в шапку сайта баннер размерами 468 Х 60, наиболее распространенный размер, легче поместить, т.к. не имеет больших габаритов.

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

Для того чтобы загрузить его на сайт, необходимо сначала скачать его на компьютер.

Далее идем в админке wordpress на вкладку Медиафайлы – Добавить новый – Выберете файл. Выбираем предварительно загруженное на компьютер изображение  баннера и закачиваем его.

Теперь смотрим путь до нашего файла, эта ссылка нам будет нужна.

установка баннера

Следующее, что нам нужно, это ваша партнерская ссылка на баннер.

Теперь нам нужно зайти в админку на вкладку Темы – Редактор и справа найти Заголовок (header.php).

Как обычно, открываем его и ищем код, отвечающий за вывод заголовка в файле header.php примерно такого вида:
< div id=»header» >или такого:
< div id=»header_title» >либо что-то похожее (в разных темах, немного по-разному), но суть одна и та же.  После него вставляем вот такой код:

1
 <a href="Партнерская ссылка, куда осуществляется переход" target= "_blank"><img style="position:absolute;top:50px;right:100px; border: 1px solid #ddad22;" src="Ссылка на изображение баннера"/></a>

«Партнерская ссылка, куда осуществляется переход» – та самая ссылка, куда будет перенаправляться посетитель при щелкании по баннеру;

«Ссылка на изображение баннера» – ссылка на медиафайл баннера, закачанный вами на хостинг;

target= «_blank» – если вы не знаете, открывает ссылку в новом окне;

position:absolute – прозрачность баннера;

top:50px – это расстояние до вашего баннера от верхнего края, меняя данные размеры вы можете двигать баннер по вертикали;

right:100px – расстояние в пикселях от вашей картинки до правого края, также можете изменять для перемещения баннера;

border: 1px – это толщина внешней рамки вокруг баннера, если равна нулю, то ее не будет;

solid #ddad22 – это цвет внешней рамки.

Можете также заключить код в теги noindex и nofollow, надеюсь, вам известно для чего они предназначены. Эти теги закрывают ссылки от индексации поисковыми роботами, хотя говорят, что Гугл все равно индексирует их. После того, как установили код для размещения баннера, обновите файл. Перейдите на сайт и посмотрите, как выглядит баннер.

Посмотрите, как баннер выглядит у меня на тестовом блоге.

На своем блоге я баннер пока не размещал, нет достойного кандидата на замещение полезной площади. А компания, с которой я сотрудничаю, только занимается разработкой рекламных материалов.

вставить баннер в шапку wordpress

Советую очень аккуратно работать с кодом, не торопитесь, спешка нужна только при ловле блох, а здесь она не уместна.

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

Хочется дать вам один дельный совет, вы потратите на него немного времени, но зато потом будете благодарны.

Речь идет о создании поддомена на вашем хостинге. Как обычно, количество доменов у хостера ограничено (зависит от тарифа), а вот поддоменов можно создавать, сколько хочешь, или несколько, суть не в этом, вам хватит и одного.

И на этот поддомен загружаете еще один пакет wordpress, предварительно создав новую базу данных. И вот на этом поддомене, установив любой шаблон, тренируйтесь в установке баннера на сайт, а также других манипуляций с плагинами, или с кодом до изнеможения, а потом переходите на основной домен. Я с недавних пор так и делаю на своем тестовом блоге, а потом перехожу на свой основной сайт, и вам очень советую.

Вот собственно и все, на этом статья о том, как разместить баннер на сайте, а именно в шапку блога wordpress, подходит к завершению.

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

Позвольте пожелать вам успехов и толпы посетителей на ваши ресурсы!

  1. Max Cook:

    Вот у меня например проблема: баннер сполз вниз под логотип сайта. А нужно чтобы он был на одном уровне с логотипом, там, в самой шапке. Шаблон предусматривает настройку баннера 468х60 в самой теме, есть поле для вставки кода. Но при вставки, ничего не отображается. Может демо-версия темы? Пришлось вставить в ручную в header.php но он сполз вниз под лого… Не знаю как исправить, чтобы выставить на одном уровне с логотипом. Не поможете??

    Опубликовано: 9 Апрель 2012 в 19:52

  2. Max Cook:

    Да, и у вас в описании говорится о том, что нужно скачивать баннер и заливать в Медиафайлы? А зачем? Если сайты-партнеры предлагают свой код баннера, где сама картинка хранится у них на сервере.

    Опубликовано: 9 Апрель 2012 в 19:54

  3. Сергей:

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

    Опубликовано: 9 Апрель 2012 в 22:32

  4. Tamara:

    Привет! Я пыталась установит банер в шапку своего сайта как написано у вас но почему то банер не выводиться. В чем может быть причина? спасибо

    Опубликовано: 20 Июнь 2012 в 15:14

  5. Tamara:

    О простите банер есть но только не на главной странице. Почему?

    Опубликовано: 20 Июнь 2012 в 15:16

  6. Сергей:

    Здравствуйте. Посмотрел на ваш баннер, нормально смотрится, только сместите его немного вправо и вверх, изменяя расстояния в пикселях.

    Опубликовано: 22 Июнь 2012 в 13:41

  7. Михаил:

    пытался следовать двум десяткам инструкций — все без толку! Сделал по вашему описанию — и, о чудо! С первого раза все встало как надо! Спасибо огромное!!

    Опубликовано: 5 Июль 2012 в 03:11

  8. Сергей:

    Не за что, заходите еще.

    Опубликовано: 6 Июль 2012 в 07:50

  9. Татьяна:

    Сергей, спасибо, получилось, но… почему-то отличается расположение вставленного баннера в разных браузерах. В IE9, например, он на месте, а в Хроме и в Мазиле — сильно сполз :-( Почему бы такое могло быть? (Блог пока что отлаживается на локальном компьютере, Денвер)

    Опубликовано: 19 Июль 2012 в 15:14

  10. Сергей:

    Здравствуйте Татьяна.
    Тут дело скорее всего в вашей теме, но может быть и денвер глючит. Я сам не знаком с установкой на локальном компьютере, потому что устанавливал wordpress сразу на хостинге. Сейчас практически все хостеры предоставляют возможность загрузки wp сразу на хостинг. А когда ваш сайт будет на хостинге, то тут можно проверить, как ваш блог будет смотреться в разных браузерах. Существуют специальные онлайн сервисы, где вы можете просмотреть как выглядит ваш сайт в различных браузерах, и если где-то что-то криво-косо, то поменять тему.

    Опубликовано: 19 Июль 2012 в 16:46

  11. Татьяна:

    Спасибо большое за оперативный ответ. Просто удивило, что до сего вмешательства в шапку блог смотрелся одинаково в вышеупомянутых браузерах, и стойко переносил различные эксперименты, например, с плагинами. А тут вдруг «сломался» в двух из них. Обидно будет всю тему менять из-за этого :-(. Но и без картинки в шапке уже не хочется :-)
    Кстати, тема — русифицированный Masugid, взята с http://www.wpbot.ru. Если вдруг про неё что-то компрометирующее знаете, очень интересно было бы ваше мнение!

    Опубликовано: 19 Июль 2012 в 19:30

  12. Сергей:

    Ничего плохого сказать не могу. Может дело все же в денвере. Как загрузите блог на хостинг, будет видно, а пока гадать неблагодарное занятие.

    Опубликовано: 19 Июль 2012 в 20:49

  13. Anton:

    У меня баннер отображается нормально все как надо, но проблема не переходит по ссылке???

    Опубликовано: 4 Август 2012 в 02:16

  14. Сергей:

    Внимательно проверьте код баннера, один не поставленный слеш здесь играет роль.

    Опубликовано: 4 Август 2012 в 08:20

  15. Anton:

    Сергей, у меня в теме чуть не так как описано у тебя. СПАСИБО все работает!!!

    Опубликовано: 4 Август 2012 в 10:27

  16. Сергей:

    Рад, что все получилось, успехов!

    Опубликовано: 4 Август 2012 в 10:47

  17. Анна:

    День добрый у меня такой вопрос. баннер может быть формата swf? у меня вставляются гифки но не отображается флеш баннер.
    Спасибо!

    Опубликовано: 5 Август 2012 в 17:28

  18. Анна:

    Это я про баннер в шапке. И еще такой вопрос, можно ли вместо логотипа использовать swf баннер?

    Опубликовано: 5 Август 2012 в 17:32

  19. Сергей:

    Здравствуйте.
    Насчет вставки флешбаннера почитайте здесь

    Опубликовано: 5 Август 2012 в 21:06

  20. Анна:

    Спасибо Сергей!

    Опубликовано: 6 Август 2012 в 07:52

  21. Виталий:

    Сергей привет. Не подскажешь как вставить такой код в виджет сайта на вордпресс?


    Опубликовано: 19 Сентябрь 2012 в 09:44

  22. Сергей:

    Виталий, я писал об этом в этой статье http://egofilin.ru/blogovedenie/vstavit-banner-wordpress/

    Опубликовано: 19 Сентябрь 2012 в 13:34

  23. ольга:

    спасибо!

    Опубликовано: 30 Сентябрь 2012 в 00:48

  24. Сергей:

    Не за что.

    Опубликовано: 30 Сентябрь 2012 в 11:59

  25. Тамара:

    Добрый час,Сергей!
    Выполнила все Ваши указания: в шапке — намёк на картинку, установить хочу флеш. М.б. проблема в том,что пишут в W, что медиафайл не ПРИКРЕПЛЁН?

    Опубликовано: 8 Декабрь 2012 в 12:22

  26. Сергей Егерев:

    @ Тамара:
    Посмотрел ваш блог, подобие картинки есть, но похоже, что он не находит картинку. Если у вас партнерский баннер, то попробуйте вставить готовый код баннера в указанное место в шапке сайта.
    В данной статье я рассматриваю вставку анимированного gif баннера. У меня сейчас такой стоит в шапке сайта. Что касается флеш банера, то я не пробовал его вставлять, хотя по идее должно тоже отображаться. Выше в комментариях есть ссылка на статью про установку флешбаннера. Попробуйте пройти и почитать там. ссылка на статью

    Опубликовано: 8 Декабрь 2012 в 13:05

  27. Алексей:

    Здравствуйте, уважаемый владелец сайта! Мне очень понравился ваш сайт. У вас много полезной и интересной информации. У меня к Вам деловое предложение по еще большей раскрутке Вашего сайта, увеличению притока посетителей на Ваш сайт, созданию бизнеса в Интернете с приличным доходом уже на первоначальном этапе, а также раскрутка любого бизнеса. Это реальный шанс построить за короткое время себе пассивный доход. Для этого просто добавьтесь ко мне с скайп: alekseiwww75 и я дам Вам информацию, а Вы оцените насколько это может Вам помочь.

    Опубликовано: 28 Март 2013 в 18:48

  28. Сергей Егерев:

    @ Алексей:
    Ответил вам на email.

    Опубликовано: 30 Март 2013 в 13:25

  29. Антон:

    А такой вопр: Здесь описан способ вставки банера в шапку сайта, а как вставить так, чтоб он был правее меню, в области где фон уже начинается?
    Куда там в редакторе вставить этот код ?

    Опубликовано: 24 Май 2013 в 11:21

  30. Сергей Егерев:

    @ Антон:
    Не совсем понял вопрос, куда вы хотите влепить баннер, в запись на блоге?

    Опубликовано: 24 Май 2013 в 13:18

  31. Лена:

    привет! спасибо за статью. У меня код баннера вставляется, но если смотреть с телефона, то баннер закрывает шапку, а если с большого монитора, то влево! как решить такую проблему?

    Опубликовано: 7 Июль 2013 в 14:50

  32. Сергей:

    А у меня все получилось. Большое спасибо за помощь!!!

    Опубликовано: 18 Июль 2013 в 12:25

  33. Сергей Егерев:

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

    Опубликовано: 19 Июль 2013 в 19:56

  34. Надежда:

    Здравствуйте. У меня в шапке темы предусмотрено место для баннера и написано, что можно вставить код рекламы гугла. Так вот, сколько я не пытаюсь это сделать ничего не получается, ну не появляется он в этом месте, хоть тресни. Вот логотип поменялся без проблем, а тут ничего не получается. Вы не могли бы мне подсказать, что я делаю не так.

    Опубликовано: 15 Декабрь 2013 в 15:06

  35. Сергей Егерев:

    @ Надежда:
    Нет, Надежда, не могу. :) С темой нужно вашей разбираться, возможно проблема в ней. Возможно вы сразу смотрите появление изображение рекламы, оно сразу не появляется, ведь «команда» идет от Гугла. А может вы сами что-то не так делаете.

    Опубликовано: 15 Декабрь 2013 в 17:04

  36. Ольга:

    Спасибо за статью!
    Есть пожелание Вашему сайту — белый текст на синем фоне очень тяжело читать, чуть глаза не повылазили, пока до конца статью дочитала… Сделайте что-то с этим…

    Опубликовано: 25 Октябрь 2014 в 18:44

  37. Сергей Егерев:

    @ Ольга:
    Всегда пожалуйста. Наверху, в правом углу, в сайдбаре можно выбрать светлую тему (по умолчанию у меня просто стоит темная).

    Опубликовано: 28 Октябрь 2014 в 21:21

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

Switch to Dark fonts Switch to Light fonts