Home / Блоговедение / Динамический ротатор баннеров на блог — быстро, просто, удобно…
Ротатор баннеров

Динамический ротатор баннеров на блог — быстро, просто, удобно…

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

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

  • Большинство посетителей приходит из поисковиков, читает одну страницу и уходит. Даже если бы такой человек заинтересовался одним из баннеров в вашем наборе, он его может просто не увидеть, если ротатор статический.
  • Динамически меняющиеся картинки привлекают к себе больше внимания, чем неподвижные. Их трудно не заметить во время эффектной смены баннеров, и обычно просматривается вся серия картинок – срабатывает обычное человеческое любопытство “а вдруг на следующей картинке есть что-то интересное”. А пока посетитель их рассматривает, время идет – это польза для сайта.
  • Экономится место, т.к. в одном месте можно показать сразу много баннеров, а не растягивать их по одному.
  • Установить такой ротатор очень просто.

Есть и недостатки, но я бы не сказал. что они очень большие, т.к. легко решаются:

  • Загружаются все баннеры из показываемого набора, а много графики замедляют скорость загрузки блога в целом. Проблему можно решить оптимизацией баннеров в формате JPG, переводом из “тяжелого” формата PNG в формат JPG и опять-таки оптимизацией картинки. Про это я уже писал, почитайте. Исходный баннер в 150 кб легко можно уменьшить до 25-40 кб без потери качества.
  • “Мельтешение” картинок, которое может раздражать посетителей – на самом деле эта проблема может быть, если баннеры будут меняться каждую секунду. Здесь просто нужно настроить оптимальное время смены – 3-5 секунд вполне хорошо, и картинки не отвлекают, и во время беглого просмотра страницы посетитель заметит пару таких циклов.

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

На самом деле динамический ротатор баннеров – это не что иное, как обычный слайдер, которые часто можно встретить на разных сайтах. Их обычно ставят в шапке или еще где-то вверху, но ведь никто не запрещает поставить такую штуку и в боковую колонку… В итоге мы просто получим слайдер, который будет “крутить” наши баннеры по кругу, и при этом еще можно настроить разные эффекты, добавить переключатели и прочие красивости и удобства.

Вставить слайдер на блог можно самыми разными способами – подключить разные библиотеки, скрипты и прочее. Это дело сложное для тех, кто плохо разбирается в коде сайта. Но можно просто взять готовый плагин для WordPress-а и подключить его – тогда ротатор можно получить уже через пару минут. Плагинов таких есть огромное количество, но не все они подходят именно для боковой колонки – то плохо вписываются, то имеют много лишнего или сложного в настройках. Я пробовал разные и понравились мне всего два таких плагина – Meteor Slides и Weptile Image Slider Widget. Дальше речь  пойдет о втором из них, т.к. он более гибкий в использовании.

Устанавливаем плагин

Здесь все просто, долго рассказывать и нечего. идем в админку блога, в раздел “Плагины” – “Установить новый” и в поиске вписываем название плагина — Weptile Image Slider Widget. Поиск нам его услужливо находит:

Устанавливаем плагин слайдера

Устанавливаем, активируем… Все, осталось настроить.

Устанавливаем ротатор баннеров в сайдбар

Плагин Weptile Image Slider Widget хорош тем, что он создает готовый виджет, который просто нужно добавить в сайдбар блога. Идем в админке в “Внешний вид” – “Виджеты”, и простым перемещением устанавливаем нужный виджет в то место. где мы хотим видеть ротатор баннеров.

Устанавливаем виджет

 

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

Настройки виджета Weptile Image Slider Widget

 

Самые важные места я отметил рамкой. Что они значат?

  • Title – заголовок, который будет вверху виджета.
  • Width, height – высота и ширина баннеров. Желательно заранее сделать размеры картинок одинаковыми и здесь указать их.
  • Responsive – я не выделил этот параметр, но он может пригодиться, если размеры картинок разные. Если включить эту галочку, то размер баннера будет пропорционально меняться, чтобы вписаться в указанные высоту и ширину.
  • Directional Navigation – если включить, то при наведении курсора на баннере появятся стрелки “Вперед” и “Назад”, для перелистывания вручную.
  • Pause on mouse over – если включить, то ротация остановится. если на баннер навести мышку. Если убрать – возобновится.

Дальше, в разделе Transition, настройки самого слайдера:

  • Effects – тип эффекта смены баннеров. По умолчанию стоит Fade – плавный переход. Там есть еще разные эффекты. Можно поставить и Random – случайный эффект.
  • Speed – скорость, с которой появляется новый баннер, в миллисекундах.
  • Duration – время задержки, то есть сколько времени будет показываться каждая картинка. Указывается в миллисекундах. Например, 4000 ms – это 4 секунды, 1000 ms – 1 секунда.
  • Кнопка Upload or Pick Image – загрузить или выбрать картинки для ротации.

Поставив настройки, как на скриншоте (или на свое усмотрение), можно нажать кнопку внизу и перейти к добавлению баннеров.

Добавляем баннеры в ротатор

Для этого служит кнопка “Upload or Pick Image”. Нажмем на нее и увидим стандартное окно WordPress-а для выбора или загрузки картинок.

Ротатор баннеров - добавляем картинки

 

Думаю, с этим проблем у вас не возникнет – точно так же вы вставляете картинки в  свои посты – загружаете с компьютера или выбираете среди уже загруженных картинок. Единственная разница – когда выберите нужную картинку, нужно будет нажать кнопку “Send Image to Weptile Slider Widget”:

Выбираем нужную картинку в библиотеке

 

Таким образом и добавляем все нужные баннеры по очереди. Они появляются в нашем виджете, внизу. в виде списка. Наведя мышку на любую картинку, мы увидим надпись Detail, нажав на которую можно указать ссылку дляя нашего баннера (какой же рекламный баннер без ссылки!):

Настройки каждого баннера

 

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

  • Remove Image – удалить картинку из ротатора.
  • Link’s Target – можно указать поведение ссылки. По умолчанию – “Открывать в новой вкладке”.
  • Link’s Rel – здесь в списке, как видно на скриншоте, можно закрыть ссылку тегом nofollow – полезная штука.
  • Остальные два поля – подпись для картинки и альтернативное название (при наведении мышки). Их можно не указывать.

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

Большое достоинство плагина Weptile Image Slider Widget – можно добавлять несколько такизх виджетов-слайдеров в разные места, например – в сайдбар и подвал, или в правую и левую колонку… При этом каждый виджет настраивается индивидуально – высота, ширина, свой набор баннеров… Очень удобно и все в одном месте. В общем, если вам нужен динамичный ротатор баннеров, то здесь есть весь необходимый функционал, и при этом – ничего лишнего.

По описанию кажется – сложно, а на самом деле добавление нового ротатора и баннеров в него занимают всего пару минут.

Если вы пользуетесь другими средствами для ротации баннеров – прошу делиться своим опытом в комментариях.

Читайте также:

Дубли страниц в Wordpress

Как убрать дубли страниц в WordPress и вернуть All in One SEO Pack

Доброго времени суток, уважаемые читатели. Как обычно, долго ничего не писал, но это не значит, …

Нужна ли покупка ссылок для сайта?

Полезна ли покупка ссылок для сайта?

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

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

  1. Доброго времени суток, Юрий! Интересный ротатор баннеров ты описал. Это сейчас у тебя он работает? Мне нравится. Смена изображений проходит спокойно. Я видела в некоторых местах настолько мелькают картинки, что просто не выдерживаешь. А он платный или нет? Вот как придут люди и мне можно будет заняться показом, я себе сделаю обязательно.

  2. Здравствуйте, Юрий! Это то, что я давно искал!
    Давно хотел у Вас спросить, как Вы сделали меняющиеся баннеры в сайдбаре. Не успел. Эта статья очень к стати. Спасибо за интересный пост, Только не успеваю претворять Ваши идеи на своем сайте.
    Новых идей Вам! Хотя, что ни статья, то новое что то. Еще раз спасибки!

    • Юрий Пономаренко

      Юрий, еще вчера у меня баннеры крутились плагином Meteor Slides, он тоже хороший, даже проще. Но по ходу написания этого поста поставил другой ротатор, не хуже. Так что вот Вам два, на выбор. У каждого свои достоинства есть.

  3. Юрий, добрый день! Появился вопрос, подходит ли этот плагин для платформы Blogger?

  4. Подскажите пожалуйста, а можно так сделать, чтобы баннеры чередовались для каждого посетителя. Скажем, для каждого чётного — один, для нечётного — второй?

    • Юрий Пономаренко

      Можно, только другими плагинами. Там из списка баннеров показывается каждый раз только один при загрузке страницы. То есть не листаются, как здесь.

      • Подскажите, какими именно. Во всём рунете только у Вас на сайте подобрался к решению этого вопроса. Осталось сделать последний шаг))

        • Юрий Пономаренко

          Этого добра Яндекс выдает тоннами, если спросить у него «ротатор баннеров для wordpress». Например, плагин Simple Ads Manager это делает, или Ad Rotator. Есть решения в виде кода, без плагинов.

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

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