Слайдер карусель в поисковой выдаче яндекса как сделать

Добавил пользователь Alex
Обновлено: 18.09.2024

🖖 Недавно я опубликовал пост о том, как бесплатно получать ссылки с главных страниц форумов в свой телеграм @sosnovskij. Туда я публикую посты, не попадающих под формат блога. Подключайся! 🔌.

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

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

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

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

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

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

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

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

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

readers-without-ads.jpg
konkurs-na-luchshuyu-fotografiyu-blogera.jpg
foto-bloggerov.jpg

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

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

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

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

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

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

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.

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

TinySlideshow v1

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.

Sea Turtle

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.

Это содержание нашей карусели. Оно оформлено в виде списка. Каждая новая картинка находится в виде отдельной строчки

В теге содержится ссылка на полное изображение. В нашем случае, это изображение находится в подпапке PHOTOS папки CARUSEL в директории темы нашего WordPress.

будет отображаться во всплывающем окне.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

TinySlideshow v1

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.

Sea Turtle

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.

Это содержание нашей карусели. Оно оформлено в виде списка. Каждая новая картинка находится в виде отдельной строчки . Написанное в теге

будет отображаться как заголовок во всплывающем окне. В теге содержится ссылка на полное изображение. В нашем случае, это изображение находится в подпапке PHOTOS папки CARUSEL в директории темы нашего WordPress. То, что написано в

будет отображаться во всплывающем окне.

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

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

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