Как сделать слайдер (карусель) на wordpress

Как сделать слайдер (карусель) на wordpress:

Всем привет! Про слайдер для wordpress я обмолвился в статье про промежуточные итоги работы над блогом. Там я обещал рассказать как легко и быстро установить так называемый слайдер (или по-другому карусель) к себе на блог. Так вот рассказываю . Как всегда подробно и пошагово.

Речь будет идти о плагине для wordpress – RC-Tiny. Автор плагина Роланд Чанишвили. Пример слайдера можете видеть у меня на блоге перед заголовками постов и на главной странице. Он легко устанавливается и гибко настраивается. Слайдер отлично вписывается в дизайн, экономит много место на блоге, а также является симпатичным мультимедиа.

8 несложных шагов, которые организуют карусель на вашем блоге:

1) Скачиваем сам плагин;

2) Заливаем его на сервер в папку wp-content/plugins/ и активируем;

3) Создаем папку big в корневом каталоге блога (где папки wp-content, wp-admin и другие). Можно и другую, но по умолчанию плагин проверяет наличие именно этой папки. Эта директория будет нужна для заливки картинок, которые будут отображаться в слайдере.

4) Теперь самое интересное . Как привязать картинку к определенному посту на блоге? Для этого в плагине существует несколько методов. Они зависят от того какая у вас стоит “система постоянных ссылок”. Если у вас:

— ЧПУ как у меня, то для привязки используется имя поста или статьи. Для того, чтобы привязать этот пост, я должен создать картинку slider-karusel-wordpress.jpg. Теперь посмотрите на адрес этой страницы и вам станет понятней. Этот метод в админке стоит по умолчанию и называется slug.jpg.

— номера постов в урле страниц (когда страница выглядит так http://sosnovskij.ru/?p=1339), то для этого нужно создать картинку с именем 1339.jpg. В админке этот метод называется post_id.jpg. Кстати для корректной работы плагина используйте только расширение jpg.

А сейчас конкретный пример моего слайдера:

Урлы постов:

— http://sosnovskij.ru/readers-without-ads/

— http://sosnovskij.ru/konkurs-na-luchshuyu-fotografiyu-blogera/

— http://sosnovskij.ru/foto-bloggerov/

Имена картинок:

— readers-without-ads.jpg

— konkurs-na-luchshuyu-fotografiyu-blogera.jpg

— foto-bloggerov.jpg

5) После того как стало понятно как привязывать картинки к постам идем в админку, указываем размеры картинок (именно такие размеры придется использовать), метод привязки и выбираем, что показывать в слайдере. Можно показывать:

— последние 3 добавленные картинки (+ отмеченные);

— случайные картинки;

— отмеченные картинки.

6) Заливаем картинки в папку big (чем меньше будут весить картинки, тем быстрее будет загружаться слайдер) и в необходимом месте шаблона wordpress вставляем код: 

<?php if(is_object($rctiny)) $rctiny->show(); ?>

Я вставил этот код в index.php и в single.php – в остальных файлах думаю смысла нет. Смотрим что получилось. Если отображение нравится, то всё поздравляю вас – плагин установлен. Если же оформление не нравится, то переходим к пункту 7.

7) Изменяем оформление слайдера. Пункт “добавить к CSS”. Есть 3 позиции:

— #information a:hover{color:#000000} – это цвет текста (вместо 000000 поставить свой цвет);

— #information {background:#D9F0FF} – цвет фона (вместо D9F0FF свой цвет);

— {border:1px solid #ссс} – размер рамки и ее цвет (1px – это один пиксель, вместо ссс – свой цвет).

Изменяем тут по вкусу.

8 ) Можно редактировать размер текста, который выводится в слайдере. По умолчанию это 200 знаков. Если надо, то редактируем файл rc-tiny.class.php. Находим там 74 страочку и изменяем число на необходимое.

Теперь точно все плагин установлен и настроен . Он достаточно легкий и не сильно грузит движок. Как вам?

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

____________

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

Итак, для начала напомню, что каждый плагин для WordPress тормозит его работу, увеличивает глючность и мешает нахождению причины неисправностей. Я не спорю, но бывают плагины, без которых невозможно обойтись: на написание кода у вас уйдёт не одна неделя, а если вы не располагаете ни временем, ни знанием языка программирования – то тут и речи не может идти об замене плагина собственными скриптами.

Другое дело, когда речь идёт об плагинах, интегрирующих в WordPress скрипты других разработчиков. В качестве примера можно сразу вспомнить миллион реализаций плагинов, добавляющих Light Box эффект к вашим изображениям. Все они делают одно и то же: подключают JS – библиотеку и используют её функции.

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

Отгоним пессимистические мысли: всё в наших руках, и вернёмся к нашей карусели.

Плагин написан с использованием скрипта отличного программиста Michael Leigeber’a. Наверное, по причине занятости, автор поленился написать хорошее руководство для своего скрипта, но, зато, представил несколько примеров. Рассмотрим один из них.

1. Первым делом решим, куда мы будем вставлять нашу карусель. Я думаю, небольшой опыт в написании и редактировании тем для WordPress у вас есть. По крайней мере, кому, как ни вам знать, как называются у вас шаблоны, отвечающие за вид главной страницы, страницы с постом, страницы с архивами. Напомню, что в стандартной теме они носят названия: index.php, single.php, arhive.php соответственно. Также вы можете пользоваться функциями вродe is_home(), is_single и т.д, и/или разместить код в footer.php.

2. Скачиваем скрипт.

3. Распаковываем его куда-нибудь, я бы посоветовал в папку с темой, в которую вы его вставляете. Нам надо 2 файла и 1 папку: compressed.js, script.js, IMAGES.

4. Подключаем библиотеку:

<script type=”text/javascript” src=”<?php bloginfo(’stylesheet_directory’);?>/carusel/compressed.js”></script>

В случае, если вы записали файлы в папку carusel в директорию с вашей темой для WordPress.

5. Вставляем JavaScript код:

<script type=”text/javascript”>

$(’slideshow’).style.display=’none’;

$(’wrapper’).style.display=’block’;

var slideshow=new TINY.slideshow(”slideshow”);

window.onload=function(){

slideshow.auto=true;

slideshow.speed=5;

slideshow.link=”linkhover”;

slideshow.info=”information”;

slideshow.thumbs=”slider”;

slideshow.left=”slideleft”;

slideshow.right=”slideright”;

slideshow.scrollSpeed=4;

slideshow.spacing=5;

slideshow.active=”#fff”;

slideshow.init(”slideshow”,”image”,”imgprev”,”imgnext”,”imglink”);

}

</script>

Это функция вызова скрипта. Далее я разберу отдельно каждую строчку.

6. Добавляем код с картинками.

<ul id=”slideshow”>

<li>

<h3>TinySlideshow v1</h3>

<span><?php bloginfo(’stylesheet_directory’);?>/carusel/photos/orange-fish.jpg</span>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>

<a href=”#”><img src=”<?php bloginfo(’stylesheet_directory’);?>/carusel/thumbnails/orange-fish-thumb.jpg” alt=”Orange Fish” /></a>

</li>

<li>

<h3>Sea Turtle</h3>

<span><?php bloginfo(’stylesheet_directory’);?>/carusel/photos/sea-turtle.jpg</span>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>

<img src=”<?php bloginfo(’stylesheet_directory’);?>/carusel/thumbnails/sea-turtle-thumb.jpg” alt=”Sea Turtle” />

</li>

</ul>

Это содержание нашей карусели. Оно оформлено в виде списка. Каждая новая картинка находится в виде отдельной строчки <li></li>. Написанное в теге <h3></h3> будет отображаться как заголовок во всплывающем окне. В теге <span></span> содержится ссылка на полное изображение. В нашем случае, это изображение находится в подпапке PHOTOS папки CARUSEL в директории темы нашего WordPress. То, что написано в <p></p> будет отображаться во всплывающем окне.

Последним тегом пропишем ссылку, которая откроется по нажатию на изображение. Если в качестве якоря ссылки поставить изображение (как видно в примере), то оно будет отображаться внизу карусели в виде слайд шоу. Изображение надо будет сохранить в папку THUMBNAILS, естественно уменьшенный вариант. Кстати, в плагине нет слайд шоу.

Теперь самое интересное: смотрим на JavaScript функцию, которую мы видели выше. Видите строчку $(’slideshow’).style.display=’none’; ? Это значит, что список, который мы написали выше отображаться не будет. Сейчас страница выглядит также как и до того, как мы что-то писали. Следующим шагом  будет вставка div’а, в котором это всё будет отображаться.

7. Мой догадливый читатель подумал, что div будет называться также как в строчке JavaScript’а:

$(’wrapper’).style.display=’block’;

Всё правильно! А выглядеть наш код будет примерно вот так:

<div id=”wrapper”>

<div id=”fullsize”>

<div id=”imgprev” class=”imgnav” title=”Previous Image”></div>

<div id=”imglink”></div>

<div id=”imgnext” class=”imgnav” title=”Next Image”></div>

<div id=”image”></div>

<div id=”information”>

<h3></h3>

<p></p>

</div>

</div>

<div id=”thumbnails”>

<div id=”slideleft” title=”Slide Left”></div>

<div id=”slidearea”>

<div id=”slider”></div>

</div>

<div id=”slideright” title=”Slide Right”></div>

</div>

</div>

Большой div “wrapper” содержит в себе два div’а поменьше: “fullsize” и “thumbnails”, являющихся полным размером и слайд шоу в виде превьюшек соответственно.

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

8. Разбираемся с JavaScript функцией.

Итак:

var slideshow=new TINY.slideshow(”slideshow”);

window.onload=function(){

}

Это копируем не задумываясь. Зачем нам сейчас разбираться в теории создания классов в JavaScript?

А вот то, что внутри, нам уже интересно. Рассмотрим то, что на примере:

slideshow.auto=true; – прокручивается ли карусель автоматически. По умолчанию – false.

slideshow.speed=5; – скорость прокрутки. По умолчанию – 10.

slideshow.link=”linkhover”; – это название класса отображения ссылки. Вернёмся к нему, когда будем рассматривать каскадные стили.

slideshow.info=”information”; – информация. Указывает id div’а, содержащегося в “fullsize”.

slideshow.thumbs=”slider”; – id div’а в котором будет отображаться слайд шоу. Если удалить строчку – слайд шоу не будет.

slideshow.left=”slideleft”; slideshow.right=”slideright”; – id div’ов, отвечающих за прокрутку слайд шоу. Как можно заметить, все 3 div’а находятся в “thumbnails”. Как вы их расположите, значения не имеет.

slideshow.scrollSpeed=4; – скорость, с которой будет крутиться слайдер. Чем больше число – тем выше скорость.

slideshow.spacing=5; – расстояние между превьюшками.

slideshow.active=”#fff”; – цвет граница активной превьюшки.

slideshow.init(”slideshow”,”image”,”imgprev”,”imgnext”,”imglink”); – то, без чего это всё вообще работать не будет. “slideshow” – это id списка, о котором я писал в пункте 6. “image”,”imgprev”,”imgnext”,”imglink” – это div’ы изображения, кнопки «вперёд», «назад» и ссылки соответственно. Всё это содержится в “fullsize”.

9. Опишем это всё с помощью CSS. Тут замечу, что подргузка лишнего CSS занимает  много времени, а при реализации карусели посредством плагина без загрузки лишней каскадной таблицы стилей обойтись нельзя было.

Я очень мучился и извращался, когда создавал свой плагин G_Buzz_Button, пытаясь обойтись без дополнительной CSS. Мне это стоило больших нервов и времени, но я всё сделал и получил очень аккуратный и лёгкий код на выходе.

Реализовывая карусель моим методом, мы сможем добавить всё нужное для таблицы стилей в CSS нашей темы. Добавим такой код:

#slideshow {list-style:none; color:#fff}

#slideshow span {display:none}

#wrapper {width:506px; margin:50px auto; display:none}

#wrapper * {margin:0; padding:0}

#fullsize {position:relative; width:500px; height:300px; padding:2px; border:1px solid #ccc; background:#000}

#information {position:absolute; bottom:0; width:500px; height:0; background:#000; color:#fff; overflow:hidden; z-index:200; opacity:.7; filter:alpha(opacity=70)}

#information h3 {padding:4px 8px 3px; font-size:14px}

#information p {padding:0 8px 8px; font-size: 10px}

#image {width:500px}

#image img {position:absolute; z-index:25; width:auto}

.imgnav {position:absolute; width:25%; height:306px; cursor:pointer; z-index:150}

#imgprev {left:0; background:url(images/left.gif) left center no-repeat}

#imgnext {right:0; background:url(images/right.gif) right center no-repeat}

#imglink {position:absolute; height:306px; width:100%; z-index:100; opacity:.4; filter:alpha(opacity=40)}

.linkhover {background:url(images/link.gif) center center no-repeat}

#thumbnails {margin-top:15px}

#slideleft {float:left; width:20px; height:81px; background:url(images/scroll-left.gif) center center no-repeat; background-color:#222}

#slideleft:hover {background-color:#333}

#slideright {float:right; width:20px; height:81px; background:#222 url(images/scroll-right.gif) center center no-repeat}

#slideright:hover {background-color:#333}

#slidearea {float:left; position:relative; width:456px; margin-left:5px; height:81px; overflow:hidden}

#slider {position:absolute; left:0; height:81px}

#slider img {cursor:pointer; border:1px solid #666; padding:2px}

Я не буду сейчас рассказывать о том, что такое CSS, вы должны об этом знать и так. Как видите, тут описаны все наши id и class’ы. Вы можете оставить так, как есть, а можете редактировать как вашей душе угодно.

Кстати, хочу сделать важное замечание: все названия вы можете изменять как вам угодно, главное, чтоб они все были согласованны в div’ах, в JavaScript’е и в CSS.

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

__________

Спасибо, Андрею за подробную инструкцию.

А сейчас о приятном. Планка в 400 подписчиков преодолена – сегодня feedburner показал цифру 404 (прям как одноименная страница об ошибке), что несказанно радует. А еще вчера на столе я обнаружил следующий конверт.

Это 1400 рублей на рекламную кампанию adwords. Такой бонусный купон можно было получить, оплатив какой-то сервис или воспользовавшись чьими-нибудь услугами (в пределах участников акции). Но самое интересно, что в акции я не участвовал, то есть купон пришел мне просто так, как участнику google adsense . Может быть кому-то тоже такие купончики приходили?

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

Статьи по теме:

• Апгрейд 404 – делаем красивую страницу об ошибке