От картинок к слайдам — обзор слайдеров для WP

Создаем красивый функциональный слайдер для сайта WordPress. Неверняка вы часто видели на современных сайтах красивые слайдеры с меняющимися изображениями или даже с кратким содержанием новости. В интернете существует множество вариантов слайдера для сайта — их еще называют карусель, однако в них много общего и в принципе достаточно иметь в своем наборе несколько подобных скриптов, чтобы сделать слайдер для любого оформления. Если он который грамотно вписан в дизайн, то не только станет отличным украшением блога, но и функциональным средством создания дайджеста последних новостей, который привлечет внимание посетителей.

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

Слайдер картинок я подключал и на данном блоге. Его можно устанавливать как в шапку сайта, так и просто в тело текста в любом необходимом месте. Так давайте же перейдем от слов к делу и рассмотрим несколько интересных и функциональных слайдеров для сайта — каруселей WordPress.

Плагины — слайдеры для сайта

Скачать плагины слайдера

Слайдер для сайта без плагина

Как вы понимаете, слайдеры для сайта можно добавить в любой дизайн — не обязательно подключать дополнительные плагины. Поэтому теперь останемся пообщаться с продвинутыми в html, чтобы посмотреть, как встроить слайдер в шаблон WordPress без плагинов — как известно, они дополнительно нагружают систему лишними запросами. Использовать будем удобный и простой в установке, но в то же время достаточно разнообразный по настройкам Easy Slider, который я как раз иногда активирую на данном блоге. Сначала скачайте дистрибутив с официального ресурса разработчика и залейте по ftp в корневую папку своей темы папку easyslider1.7.

После этого открываем файл шапки шаблона header.php в редакторе и добавляем перед тегом </head> следующие строки, подключая скрипт слайдера:

<script type="text/javascript" src="путь к папке темы/easyslider1.7/js/jquery.js"></script>
<script type="text/javascript" src="путь к папке темы/easyslider1.7/js/easySlider1.7.js"></script>





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

prevId: 		'prevBtn',
prevText: 		'Previous',
nextId: 		'nextBtn',	
nextText: 		'Next',
controlsShow:		true,
controlsBefore:	        '',
controlsAfter:		'',	
controlsFade:		true,
firstId: 		'firstBtn',
firstText: 		'First',
firstShow:		false,
lastId: 		'lastBtn',	
lastText: 		'Last',
lastShow:		false,				
vertical:		false,
speed: 		        800,
auto:			false,
pause:			2000,
continuous:		false, 
numeric: 		false,
numericId: 		'controls'

А теперь расшифруем, что за что отвечает.

prevId
Атрибут ID кнопки на предыдущий слайд. По умолчанию — «prevBtn».

prevText
Текст кнопки на предыдущий слайд. По умолчанию — «Previous».

nextId
Атрибут ID кнопки на следующий слайд. По умолчанию — «nextBtn».

nextText
Текст кнопки на следующий слайд. По умолчанию — «Next».

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

speed
Скорость анимации в миллисекундах, по умолчанию равна 800.

controlsShow
отвечает за отображение кнопок навигации. По умолчанию они включены («true»), но можно их убрать, написав «false». Тогда скроллинг будет происходить автоматически без возможности регулировки со стороны пользователей.

controlsBefore и controlsAfter
Для вставки кода до и после навигационных кнопок. Это позволяет задать им своем оформление, поместив например внутри блока <div> с заданным классом стилей.

controlsFade
Отключает одну из кнопок, когда достигается последнего слайда. по умолчанию включено, чтобы отключить эту опцию, задайте параметр на «false».

firstShow и lastShow
Эти параметры отвечают за отображение кнопок «К началу» и «В конец»

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

pause
С помощью этого параметра можно настроить время показа картинок в миллисекундах.

continuous
При помощи него можно включить автоматическое повторение всего цикла с самого начала — скроллинг не остановится на последнем кадре. Для этого задайте значение «true».

numeric
Установив этот атрибут на «true», вы включите вместо кнопок «Предыдущий/Следующий» нумерованную навигационную панель по слайдам.

numericId
С его помощью можно задать ID для нумерованного списка слайдера для сайта, чтобы использовать при оформлении в CSS.

Чтобы было проще, покажу реальные примеры. Чтобы было так:

слайдеры для сайта

придется сразу после тех скриптов, которые мы уже прописали в файл header.php и прямо перед закрывающим тегом </head> вписать такой код:

<script type="text/javascript">
$(document).ready(function(){	
	$("#slider").easySlider({
		auto: true,
		continuous: true 
	});
});	
</script>

Это означает, что у нас разрешен автоскроллинг по картинкам и что он будет повторяться с начала до конца неограниченное количество раз без остановки.

А если вот так:

слайдер для сайта wordpress

То код будет выглядеть вот таким образом:

<script type="text/javascript">
$(document).ready(function(){	
	$("#slider").easySlider({
		auto: true,
		continuous: true,
		numeric: true
	});
});	
</script>

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

Обратите также внимание в этих примерах на 3ю строку:

$("#slider")

Это ID слайдера. С его помощью можно установить несколько слайдеров на одной странице, задав им разные идентификаторы.
Например, если хотите использовать оба этих варианта одновременно, то будем писать так:

$(document).ready(function(){	
	$("#slider").easySlider({
		auto: true,
		continuous: true,
		nextId: "slider1next",
		prevId: "slider1prev"
	});
	$("#slider2").easySlider({ 
		numeric: true
	});
});

Все вышесказанное касалось настроек слайдеров для сайта. Теперь осталась маленькая, но самая важная деталь — вставить его в шаблон. В то место, где вы хотите его видеть (обычно это шапка), вставляем код:

<div id="slider">
<ul>				
<li><a href="1й пункт меню"><img src="путь к изображению/01.png" /></a></li>
<li><a href="2й пункт меню"><img src="путь к изображению/02.png" /></a></li>
<li><a href="3й пункт меню"><img src="путь к изображению/03.png" /></a></li>
<li><a href="4й пункт меню"><img src="путь к изображению/04.png" /></a></li>
<li><a href="5й пункт меню"><img src="путь к изображению/05.png" /></a></li>			
</ul>
</div>

В значении

<div id="slider">

как раз тот самый ID, который мы только что задали чуть выше в строке

$("#slider")

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

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




Напоследок — подборка лучших плагинов слайдеров для блога на WordPress:

Поделись этой статьей с друзьями!

Это будет интересно прочитать:

  • Дайте ссылочку на урок мм где установить локальный сервер себе на комп)не могу найти этот урок(

  • Здравствуйте! У меня что-то текст не отображается, хотя сдедовала инструкции, никак не могу разобраться в чем дело!

  • Извините за навязчивость! Я установила плагин на другой свой сайт и там все заработала. До этого я использовала тему для WordPress Jarrah 1.7 вот ссылка может в этой теме не прописаны стили какие-то, почему слайдеры не точно работают, конфликтует с темой чтоли? Я столько времени потратила на создание этого сайта, практически сменила полностью дизайн и тут такая «запара», этот слайдер очень нужен! Вы не поможете? Я в отчаянии..(((((((((((

    • Я вам смогу помочь только завтра, и только с доступом к вашему сайту — заочно тут ничего сказать нельзя. Напишите мне через обратную связь, скиньте админские логин и пароль, тогда посмотрю что там к чему.

  • Здравствуйте, Александр.
    Хотела вставить слайдер (content-slide) не в шапку, а в тело статической страницы, но он у меня почему-то не отображается. В шаблон страниц встает, а при редактировании 1 страницы — нет. В чем может быть причина?

    • Вы хотите, как я понял, вставить код слайдера из редактора в отдельную статью? Для вставки php кода из редактора надо установить плагин Exec php

  • Александр, подскажите, пожалуйста, а на один сайт можно поставить несколько слайдеров? На разные страницы или записи?

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

      • Проще будет ставить слайдеры галерей (в смысле — галереи в виде слайдеров): можно хоть на каждой записи и страницы.
        Сначала нашла урок про слайдеры, а про фотогалерею — намного позже, вот и решаю простую задачу через логарифмы)))

        • да, при установке nextgen есть возможность смотреть картинки в виде слайдов ) А конкретно слайдеры обычно именно для оформления используются

  • Александр у меня такой вопрос по WP Content Slide слайдеру, я его поставил вместо стандартного слайдера , всё работает , но вот одна проблемма, при создании под ним новых записей увеличивается число слайдов, например я поставил 5 слайдов потом добавил запись и у меня стало 10 слайдов 3 , 15 и т.д что это может быть заранее спасибо.

    • Странно.. Надо смотреть по месту, так заочно сложно сказать

  • Мне нужна помощь!

    Слайдер на главной странице сайта перестал работать:

    http://wp-voprosov.net/56203c/X0UQSApNHk4RRx5MWRlOUFMUBlJRAlMVUFAJUQEDHE1ZHElIAQNYFg==/

    Ранее там сменяли друг друга 5 картинок — назначенные для последних пяти публикаций.
    Помогите, мож кто уже встречал такое!!!
    Я его пока что отключил чтоб людей не пугать. Вот так выглядит белиберда:
    http://wp-voprosov.net/56203c/X0UQSApNHloVAwACAgVRTBdSHlRXHEZQAQdTCARQBAcYCF0ABU1cdhRedmx7QFNULBdaSVU=/

    • Здравствуйте!
      Он же не просто так перестал работать — до этого работал?
      Вспомните, какие действия вы совершали, прежде чем он стал глючить — новые плагины, изменения в css…

      • Ничего не делал в принципе! Может лишь только автоматически обновлял плагины. Но здесь речь идет о встроенном слайдере.

        Вот еще: На одной из страниц (http://wp-voprosov.net/56203c/X0UQSApNHk4RRx5MWRlOUFMUBlJRAlMVUFAJUQEDHE1ZHElIAQNYFhVRXURbUU4SAF5VFg==/) затесался посторонний код с гиперссылкой, который я не размещал:

        зеленая энергетика

        В общем взлом какой-то произошел. Отследить местоположение этого постороннего кода в файлах не могу. В footer.php и прочих основных файлах шаблона ничего нет.

        Может это оно?
        Как отследить расположение этого гадства ?

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