Динамічний ротатор банерів на блог - швидко, просто, зручно, блог юрия пономаренко

Привіт, шановні Новомосковсктелі мого блогу. Сьогодні я хочу розповісти про те, як можна поставити собі на блог, в бічну колонку, динамічний ротатор банерів. Всі ми бачили статичні ротатори - це коли при завантаженні сторінки виводиться один випадковий банер, і змінюється він тільки якщо перезавантажити сторінку. Тобто, в одному місці на будь-якій сторінці відвідувач може побачити тільки один банер.

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

Є й недоліки, але я б не сказав. що вони дуже великі, тому що легко вирішуються:

Насправді динамічний ротатор банерів - це не що інше, як звичайний слайдер, які часто можна зустріти на різних сайтах. Їх зазвичай ставлять в шапці або ще десь вгорі, але ж ніхто не забороняє поставити таку штуку і в бічну колонку ... У підсумку ми просто отримаємо слайдер, який буде "крутити" наші банери по колу, і при цьому ще можна налаштувати різні ефекти , додати перемикачі та інші красивості і зручності.

Вставити слайдер на блог можна самими різними способами - підключити різні бібліотеки, скрипти та інше. Це справа складна для тих, хто погано розбирається в коді сайту. Але можна просто взяти готовий плагін для WordPress-а і підключити його - тоді ротатор можна отримати вже через пару хвилин. Плагінів таких є величезна кількість, але не всі вони підходять саме для бічної колонки - то погано вписуються, то мають багато зайвого або складного в налаштуваннях. Я пробував різні і сподобалися мені всього два таких плагіна - Meteor Slides і 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":

Як бачите, тут можна не тільки вказати посилання з баннера, але є й інші корисні речі:

• Remove Image - видалити картинку з ротатора.
• Link's Target - можна вказати поведінку посилання. За замовчуванням - "Відкривати в новій вкладці".
• Link's Rel - тут в списку, як видно на скріншоті, можна закрити посилання тегом nofollow - корисна штука.
• Решта два поля - подпись для картинки і альтернативна назва (при наведенні мишки). Їх можна не вказувати.

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

Значна перевага плагіна Weptile Image Slider Widget - можна додавати кілька такізх віджетів зі слайдером в різні місця, наприклад - в сайдбар і підвал, або в праву і ліву колонку ... При цьому кожен віджет налаштовується індивідуально - висота, ширина, свій набір банерів ... Дуже зручно і все в одному місці. Загалом, якщо вам потрібен динамічний ротатор банерів, то тут є весь необхідний функціонал, і при цьому - нічого зайвого.

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

Доброго времени суток, Юрій! Цікавий ротатор банерів ти описав. Це зараз у тебе він працює? Мені подобається. Зміна зображень проходить спокійно. Я бачила в деяких місцях настільки миготять картинки, що просто не витримуєш. А він платний чи ні? Ось як прийдуть люди і мені можна буде зайнятися показом, я собі зроблю обов'язково.