Выбираем слайдер на сайт

11.06.2013 | Автор Алексей

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

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

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

 

Skitter slider

Слайдер skitter slider

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

Ставится на сайт кодом:

1
<?php if ( function_exists('show_skitter') ) { show_skitter(); } ?>

 

Content slaider

Слайдер content-slide

Cамый легкий слайдер из всех представленных здесь. Удобная панель управления со множеством настроек, но к сожалению всего 6 эффектов. Ставится в шаблон с помощью кода:

1
<?php if(function_exists('wp_content_slider')) { wp_content_slider(); } ?>

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

Meteor-slider

Слайдер meteor-slider

В целом похож на Content-slider, с одной особенностью, умеет создавать несколько слайд-шоу одновременно, которые можно поставить в разных местах на сайте. 27 эффектов. Слайдер можно повесить тремя способами. С помощью кода:

1
<?php if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow(); } ?>

либо в пост, с помощью шоткода: [meteor_slideshow]
Есть также виджет для установки в сайдбар.

 

Nivo Slider for WordPress

Слайдер nivo-slider

Популярность этого слайдера говорит сама за себя. Большой выбор эффектов и все необходимые настройки есть в панели управления. 16 эффектов, в том числе режим их смены (Random). Есть опция позволяющая регулировать качество слайдов, а следовательно их вес.

 

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

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

Тестируем слайдеры

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

В качестве слайдов взял две небольшие картинки размером по 9кБ каждая.

Результаты привожу ниже в таблице. (Данные верны только для моей темы, на других они могут отличаться)

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

Я решил выбрать слайдер в плане удобства.

Поначалу, мне приглянулся Skitter slider. Богатейший набор эффектов в его арсенале и особенно их исполнение, подталкивало выбрать именно его. Единственное, что меня не устроило, это панель управления. Многих настроек не было и приходилось лезть в файлы, чтобы их поменять.

Зато эффекты в нем выглядят очень реалистично. Надо отдать должное разработчикам.

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

Самым легким в тесте оказался Content- Slider.

В целом не плохой слайдер, с большим выбором настроек, хоть и имеет всего 6 эффектов. Я был готов взять его, пока не наткнулся на одну маленькую хитрость в Nivo, позволившую мне одним махом скинуть вес этого слайдера более чем в 2 раза.

Второй важный момент, который и определил мой выбор в пользу Nivo, он оказался самым неприхотливым и сразу же заработал на сайте. Остальные поначалу капризничали и отказывались запускаться, конфликтуя с каким-то плагином. Как я позже выяснил им оказался скрипт формы подписки. После того, как я его заменил, слайдеры успешно заработали.

Вариаций Nivo-слайдера в интернете, множество. В качестве слайдов часто используются миниатюры к статьям, но мне нужна была возможность загружать собственные слайды, и я нашел такой плагин, называется — Nivo Slider for WordPress:

 

Ставим Nivo Slider for WordPress на сайт

Устанавливаем плагин обычным образом.

Далее идем в настройки «Options» и выставляем все важные опции, отмеченные на рисунке ниже.

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

Слайдер nivo-slider-for-wordpress

Еще одна удобная опция, это “image quality” — качество слайдов. Поигравшись с этим параметром, можно уменьшить вес слайдов до приемлемого качества, тем самым увеличив скорость их загрузки.

Когда меняете это значение, важно заново сохранить слайды. Зайдите в меню “Add/Edit image”, откройте свойства каждого и покликайте по кнопке Сохранить.

Я обычно выставляю этот параметр в 100%, а слайды предварительно редактирую в Photoshop.

После того как настройки сделаны, можно загрузить сами слайды.

Выбираем пункт меню “Add/Edit image” и с помощью кнопки “Add new Image» добавляем картинки.

Слайдер nivo slider for wordpress

 

Слайдер nivo-slider-for-wordpress

 

Изображения для слайдов лучше сразу подогнать по размеру, в том же Photoshop, но можно этого и не делать, так как Nivo имеет что-то типа встроенного редактора.

Можно выбрать, либо показывать все изображение, либо произвольную область.

 

 

 

Последний шаг — вешаем слайдер на сайт. Для этого необходимо добавить следующий код в файлы темы.

1
<?php if (function_exists('nivoslider4wp_show')) { nivoslider4wp_show(); } ?>

Я решил, что слайдер для краткого обзора статей, удачнее всего будет смотреться в сайдбаре и поэтому поместил код в файл sidebar.php. В моей теме он выглядит так:

1
2
3
4
5
6
7
8
9
10
<div id="sidebar">
<div class="widgets"><ul>
 
<!-- Nivo Slider for Wordpress --> 
<?php if (function_exists('nivoslider4wp_show')) { nivoslider4wp_show(); } ?>
 
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar') ) : ?> 
<?php endif; ?></ul>
</div>
</div>

На этом все.

Думаю, статья была Вам полезна. Желаю успехов!

2 комментариев к “Выбираем слайдер на сайт”

  • Михаил Суздаль:

    Здравствуйте, подскажите,плагин совместим ли с вордом 3.6 версии.
    С уважением М.С.

  • Здравствуйте Михаил.
    Да, плагин работает и на WordPress 3.6

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>