Как сделать карусель на wordpress
Слайдер логотипов или горизонтальная карусель для WordPress
На сайтах веб-студий можно часто встретить элемент сладера или точнее будет сказать горизонтальной карусели с логотипами клиентов/заказчиков. Точно также в проектах крупных СМИ размещают блоки партнеров и т.п. Мне недавно пришлось реализовать подобную функцию на одном WordPress сайте, поэтому спешу поделиться найденными плагинами. Искал их в Google и репозитории WordPress, тестировал, сравнивал функциональность, оценивал плюсы/минусы и отобрал парочку действительно интересных. Возможно, какой-то из них вам пригодится для создания слайдера логотипов или горизонтальной карусели из картинок на своем сайте.
Tiny Carousel Horizontal Slider
Данный плагин использует легкий Jquery скрипт горизонтальной карусели.
Скачали его более 5 тыс. раз, хотя оценка не очень высокая (3.5). Тем не менее, модуль весьма актуальный, поддерживает последнюю версию WordPress 4.2.2. Вы можете задать директорию на сайте, где хранятся изображения для слайдера. К сожалению, возможности добавить описание картинкам и ссылки нет.
Особенности Tiny Carousel Horizontal Slider:
В целом, плагин максимально прост, подойдет для демонстрации логотипов клиентов, где не нужна ссылка для перехода на сайт. Или также он может использоваться для декоративной функции — показа ваших работ, например.
Kiwi Logo Carousel
Именно этот плагин я в итоге и выбрал, поскольку он позволяет добавлять для логотипов ссылки. Во всем остальном это традиционный горизонтальный слайдер.
Скачали модуль более 20 тысяч раз, версия официально поддерживается до 4.1.5 (нормально протестировал на 4.2.2). Общая оценка модулю весьма высокая — 4.7 баллов. Он построен на библиотеках bxSlider и Simple Page Ordering. Работает по аналогии с обычными записями блога, используя таксономию: в отдельном разделе создаете элементы логотипов и задаете им принадлежность в определенному слайдеру (как посты и категории).
Основные преимущества Kiwi Logo Carousel:
Одним из плюсов модуля значится адаптивность. К сожалению, с этим возникли определенные проблемы. Я отметил в настройках соответствующие опции, а слайдер при этом работал странно: обычно уменьшаются картинки или число элементов карусели, а здесь просто изменялась область отображения.
Easy Logo Slider
Плагин не особо новый, но по описанию вполне подходил для решения моей задачи — есть логотипы со ссылками и горизонтальный слайдер.
Скачиваний более 8 тысяч, хотя и оценка всего лишь 3.8. Последняя поддерживаемая версия указана WordPress 3.9.6. Работать с модулем достаточно просто, основные его фишки:
«Проблема» Easy Logo Slider в том, что вы не можете выключить автоматическую прокрутку картинок — то есть карусель работает постоянно. По крайней мере я в настройках этого не нашел. Хотя все остальное (в особенности интерфейс) выглядит достаточно неплохо.
Carousel Horizontal Posts Content Slider
Плагин использует jQuery и библиотеку carouFredsel. Отличительная его — автоматический вывод последних записей из нужной вам категории WordPress. То есть можно сделать горизонтальную карусель с лучшими (избранными) статьями.
У меня на разрабатываемом сайте модуль использовался для отображения из раздела «важных событий». Настраивается Carousel Horizontal Posts Content Slider легко, но вы сможете использовать его только один раз. Скачали плагин более 10 тысяч раз, оценка — 4 из 5-ти. Обновлялся в этом году и поддерживает версию вордпресс 4.1.5 (я тестировал на 4.2.2).
Основные фишки плагина:
Есть для модуля и платная Pro версия с гораздо большим числом настроек, но с ней я не работал. Если же резюмировать возможности Carousel Horizontal Posts Content Slider, то понравилась адаптивность, а минусом есть отсутствие возможности создать несколько горизонтальных каруселей. Также не понравилось, что отступы между некоторыми элементами в шаблоне заданы с тегом BR, поэтому пришлось их удалять из самого PHP файла (а это не есть хорошо).
Logo Slider
Чуть было не забыл про модуль, с которого все начиналось. Плагин Logo Slider достаточно популярный (10тыс. загрузок) и актуальный (подходит для WP 4.2.2) с высокой оценкой в 4.3 балла.
В принципе, по функциональности мне здесь все подходило:
Добавить плагин можно и в посты блога с помощью шорткода, и в шаблон через PHP функцию. Ну, прям все необходимое здесь есть.
А не подошел мне модуль потому что для горизонтальной карусели логотипов мне нужно было чтобы «перелистывание» происходило ровно на 1 логотип влево, а здесь (насколько я помню) сменялось сразу несколько. Теоретически можно было покопаться в коде плагина и этот момент подправить, но я выбрал поиск другого решения. Кстати, в бесплатной версии сможете создать всего лишь один слайдер логотипов.
Slick
Напоследок хотелось бы сказать о разных скриптах и библиотеках.
Некоторые из плагинов выше (и большинство других в репозитории WordPress) использует готовые скрипты и библиотеки. Slick — одно из таких решений. Если вы хорошо разбираетесь в веб-разработке, то можете попробовать подключить данный скрипт напрямую в вордпресс через шаблон. Если умеете создавать WordPress плагины, то и вовсе сможете разработать свое уникальное решение. Я, в принципе, находил пару плагинов с использованием библиотеки Slick, но количество скачивания в 50-100 раз, мягко говоря, не впечатляет. У такого решения могут быть глюки, проблемы с обновлением или дыры безопасности.
Итого. Для разрабатываемого сайта я использовал 2 модуля. Слайдер логотипов реализовал с помощью плагина Kiwi Logo Carousel, хотя там и была проблема с адаптивностью. Также для этой цели можно смело использовать Logo Slider. С задачей выводить горизонтальную карусель из выбранных постов блога справился модуль Carousel Horizontal Posts Content Slider. Пришлось подправить немного отображение его элементов на сайте, но зато с адаптивностью здесь никаких проблем.
Если вы знаете еще какие-то работающие и толковые плагины слайдеры логотипов или горизонтальные карусели, пишите в комментариях.
11 WordPress плагинов для слайдера “карусели”
Время на чтение: 6 минут
Не все слайдеры и слайд-шоу подходят для сайта. Порой они слишком большие, и закрывают собой всю остальную информацию. На коммерческих проектах, установленных на WordPress, лучше размещать компактные слайдеры, которые вместились бы в небольшой части страницы, при этом функционально переключались и не нагружали сайт.
Под это описание подходит карусель – это скрипт настраиваемого слайдера, который можно разместить в любой части веб-сайта.
Разумеется, самостоятельно закатывать рукава и печатать скрипт вы не будете – это долго, сложно и недостижимо для новичка. Потому вам лучше использовать плагин JQuery – модуль, который автоматически интегрирует JavaScript в структуру HTML-сайта. Существует множество по-разному оформленных дополнений для добавления слайдера карусель на сайт WordPress. Рассмотрим лучшие из них.
Slick
Разработчики Slick уверены, данный плагин удовлетворит любые потребности вебмастера. Если вам нужен слайдер карусель, то указанный модуль полностью удовлетворит ваш запрос. Им легко управлять – элементы в слайд-лист можно перетаскивать прямо с рабочего стола или папки. К тому же, плагин удобно отображается посетителям вашего сайта WordPress – с анимацией затемнения, либо с автоматической прокруткой. Модуль не займет много места на сайте, и работает оптимизировано, чтобы страницы со слайдами не загружались слишком долго.
Owl Carousel
Недавно вышла уже вторая версия инструмента – плагин Owl Carousel 2.0. Он подходит для тех, кто не любит предварительно подготавливать изображения для загрузки в слайдер карусель. Дополнение автоматически выравнивает пропорции картинок, чтобы пользователь мог видеть плавные, ровные слайды. Данный модуль практически не изменит время ответа страницы на запрос, так как в нем предусмотрена функция отложенной инициализации – изображения начинают загружаться только тогда, когда пользователь их просматривает.
Плагин Owl Carousel для WordPress отлично адаптируется под мобильные устройства – равномерно отображает даже самые большие картинки, при этом сохраняя целостность шаблона. Помимо картинок, вы сможете загрузить в карусель видео и анимацию.
Silver Track
Простой плагин для бесплатного добавления слайдера карусель на сайт WordPress. В нем нет ничего особенного по сравнению с другими модулями, но и явных недостатков он не имеет. Работает прилежно, функционально и корректно отображает картинки в слайдах. При помощи него можно создавать не только карусель, но и галереи фото. А если того требует расположение элементов, можно создать вертикальную прокрутку слайдов. Распространяется плагин Silver Track бесплатно.
AnoSlide
Мощный плагин, которому сложно найти конкурента. Его преимущества:
3D Carousel Gallery
Если вам уже надоели обыкновенные плоские слайдеры, тогда можете установить себе на сайт WordPress трехмерную карусель. Предоставляется плагин бесплатно. Причем каждый пользователь может внести в его код правки. В итоге, вы получите слайдер с плавным трехмерным эффектом перехода. Вот только настроек у этого модуля практически нет. Так что без знания языков программирования вам его не изменить.
3D Carousel Using TweenMax.js & jQuery
С этим слайдером не сравнится ни один из вышеперечисленных. Он позволяет создать по-настоящему 3D карусель. Пользователь сможет один поворотом мыши вращать по кругу отдельные слайды. Причем вращать их можно не только влево и вправо, но и вниз/вверх. Подходит для динамичного просмотра изображений на WordPress, если вам нужно не показать детали, а просто скрасить шаблон сайта какой-нибудь примочкой. Единственный минус плагина для WordPress в том, что он по-разному работает на различных браузерах и устройствах. Лучшая совместимость у этого 3D-слайдера с браузерами Хром и Сафари.
Bootstrap 2 Carousel
Это один из самых простых, и при этом популярных плагинов, основанных на технологии Bootstrap. С ним вы сможете установить на главную широкоформатный слайдер, который будет автоматически переключать квадратные слайды. По бокам интерфейса есть стрелки для переключения, и модуль эффективно адаптируется под другие устройства.
Bootstrap 2 Moving Box Carousel
Это усовершенствованная версия предыдущего плагина для WordPress. Подходит для тех, кому надоела одна большая меняющаяся картинка на фоне главной страницы. Усовершенствование слайдера заключается в том, что он позволяет добавлять в один слайд сразу много картинок. Под каждым изображение можно добавить заголовок и краткое описание. Таким образом вы сможете эффектно и с изюминкой ознакомить пользователей с вашей продукцией и текущими акциями. Скорость автопрокрутки настраивается.
Tiny Circleslider
Это крошеный слайдер карусель, рассчитанный скорее для размещения в постах, нежели на главной странице. Tiny Circleslider отличается от обыкновенных прямоугольных и квадратных каруселей – это круглый модуль. И листается он совсем по-другому принципу – пользователи нажимают на номера слайдов, которые размещены по кругу. Либо вращает красный кружок, быстро переключая слайды между собой. На тех, кто с таким еще не сталкивался, данный плагин обязательно произведет должное впечатление, и ваш сайт WordPress запомнят!
Thumbelina Content Slider
Слайдер для размещения среди контента. Отлично подходит для добавления в статьи с пошаговыми уроками, чтобы аккуратно загрузить обучающие картинки. Хоть с виду это и маленький слайдер, в него можно вставлять крупные изображения. При наведении на большой вариант картинки в слайде, изображение автоматически увеличится в заданной области. Размещать слайдер можно как горизонтально, так и вертикально. Работает со всеми веб-браузерами, а также отлично отображается на смартфонах и других устройствах iOS и Android.
Wowslider
Слайдер WordPress, который содержит в себе более 50 различных анимационных эффектов переключения слайдов. Достаточно установить данный модуль, чтобы карусель на вашем сайте всегда была уникальной и неповторимой. Сможете добавить функцию предварительного просмотра слайда при наведении на пункты, описания картинок, визуальные эффекты перехода и многое другое. Wowslider предоставляется бесплатно!
Как выбрать правильную карусель для своего сайта WordPress?
Выбранный вами слайдер должен работать со всеми устройствами. Правильно определите размер плагина: для заголовка нужны большие слайды, а в постах – маленькие. Следите, чтобы модуль не тормозил сайт, и не добавляйте слишком много каруселей на страницы.
Карусель записи товары видео фото плагин WordPress
Для товаров Woocommerce вы сможете настроить отображение цены, рейтинга, заголовка, кнопки “Добавить в корзину”, скидки. Можно добавить кнопку для быстрого просмотра товара в лайтбокс окне. Можно добавить товары из категории, метки или выбрать определённые товары.
Плагин карусель слайдер WordPress
Установить плагин Carousel Slider вы сможете прямо из админ-панели WordPress. Перейдите на страницу: Плагины – Добавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.
Далее, на странице создания карусели, возле параметра “Slide Type”, вам нужно выбрать, что будет отображаться в карусели, записи, товары, видео или изображения. Я покажу вам как настроить карусель для товаров Woocommerce.
Query Type, здесь вам нужно выбрать откуда будут выводиться товары, из категорий, меток, либо сами выберите определённые товары.
– Product per page, укажите сколько товаров должно отображаться в карусели.
– Show Title, показывать заголовок товара.
– Show Rating, показывать рейтинг товара.
– Show Price, показывать цену товара.
– Show Cart Button, показывать кнопку “Добавить в корзину”.
– Show Sale Tag, показывать скидку товара.
– Show Wishlist Button, показывать кнопку “Добавить в избранное”, если у вас установлен плагин YITH WooCommerce Wishlist.
– Show Quick View, показывать кнопку “Быстрый просмотр”.
– Title Color, выберите цвет заголовка товаров.
– Button Background Color, цвет фона кнопок.
– Button Text Color, цвет текста в кнопке.
– Carousel Image size, можно выбрать размер изображений.
– Lazy load image, можно включить функцию постепенной загрузки изображений.
– Slide By, по умолчанию в карусели сдвиг слайдера на один товар.
– Margin Right(px) on item, размер границ карусели в пикселях.
– Inifnity loop, можно продублировать последний и первый элементы, чтобы получить иллюзию петли.
– Navigation, включить навигацию.
– Dots, включить отображение точек в карусели, которые показывают количество товаров.
– Navigation & Dots Color, цвет пуль (точек).
– Navigation & Dots Color: Hover & Active, цвет активных пуль и при наведении.
– Autoplay, включить авто-воспроизведение карусели.
– Autoplay Timeout, задержка перед авто-воспроизведением.
– Autoplay Speed, скорость авто-воспроизведения.
– Autoplay Hover Pause, включить паузу при наведении.
– Colums, количество колонок в карусели.
– Colums : Desktop, количество колонок на компьютере.
– Colums : Small Desktop, количество колонок на маленьком компьютере.
– Colums : Tablet, количество колонок на планшете.
– Colums : Small Tablet, количество колонок на маленьком планшете.
– Colums : Mobile, количество колонок на мобильных устройствах.
Далее, после создания карусели, на странице “All Slides” вы можете скопировать шорткод карусели. Шорткод вы можете вставить на страницу или в запись, где будет отображаться карусель.
Всё готово! На вашем сайте будет отображаться карусель-слайдер товаров, записей, видео или изображений!
Карусель WordPress
Наверняка многие владельцы своих сайтов хоть раз задумывались над тем, чтобы оснастить свой сайт каруселями. Слайдеры позволяют сделать внешний вид сайта более привлекательным и динамичным. В этой статье мы рассмотрим 7 плагинов, при помощи которых можно добавить на свой сервис карусели.
Каждый из плагинов, которые перечислены ниже, имеет свои достоинства, особенности и недостатки. Очень сложно сказать, какой из них может считаться лучшим и подойдет вашему сайту лучше всего. Возможно, есть смысл просмотреть несколько плагинов, ведь только так вы сможете удостовериться в том, что выбрали действительно оптимальный вариант. Плагин для создания карусели – та вещь, на которой действительно можно сэкономить. Совершенно не обязательно платить бешеные суммы за инструмент с таким функционалом.
Meta Slider
Этот красивый плагин позволяет без труда создавать карусель для вордпресс, имеет очень простой и интуитивно понятный интерфейс, включает в себя легкий в использовании Back End. Стоимость одноразовой лицензии составляет девятнадцать долларов, что говорит о том, что плагин является доступным вариантом.
Он, кстати, включает в себя огромное количество функций, которые можно настраивать. Инструмент отлично оптимизирован для SEO и даёт возможность накладывать HTML. Более того, этот вариант является одним из лучших, если необходимо интегрировать видеозапись. Этот плагин также используется на огромном количестве сайтов, сделанных на WordPress, имеет большое количество скачиваний и пятизвездочных оценок. Людей очень привлекает интуитивно понятный интерфейс и многофункциональность этого инструмента.
Nivo Slider
Главным преимуществом этого плагина карусели WordPress является его очень привлекательный внешний вид. Если Вы хотите оснастить свой сайт красочным слайдером, включающим в себя огромное количество невероятных эффект и дисплей retina-ready – этот вариант отлично Вам подойдет.
Плагин имеет открытый исходный код, а это, в свою очередь, говорит о том, что плагин разрабатывался целой группой программистов, которые внесли огромный вклад в сглаживание максимально возможного количества ошибок. В итоге у разработчиков получился безупречный слайдер, который, поверх всех вышеперечисленных преимуществ, остаётся быстрым и надежным. Но даже это еще не всё – слайдер отличается своей доступностью – стоимость одноразовой подписки составляет двадцать девять долларов.
Smart Slider 2
Этот плагин, позволяющий создать карусель WordPress, отлично закодирован и совместим с большинством самых распространенных браузеров, в том числе и IE. Инструментарий Smart Slider 2 обладает огромной мощностью и включает в себя свыше сотни шрифтов Google, а также огромное количество переходов и стилей, большинство из которых, Вам, скорее всего, даже не понадобится.
Этот вариант является одним из лучших также по соотношению цены и качества – одноразовая лицензия обойдется Вам всего лишь в девятнадцать долларов. Smart Slider 2 отлично подойдет для использования на главной странице Вашего сайта. Этот инструмент встречается на большом количестве сайтов WordPress по всему земному шару, что еще раз подтверждает то, что плагин действительно хорош.
Slide Deck
Эта carousel WordPress очень широко распространена и оснащена рядом очень привлекательных дополнений, благодаря которым сайт становится еще более красочным, привлекательным и динамичным.
Плагин оснащен поддержкой динамических источников контента, а это, в свою очередь, говорит о том, что вы можете без труда в автоматическом порядке извлекать контент из веб-каналов и API-интерфейсов различных сайтов, таких как Flick, YouTube и тому подобных. Вы, конечно, можете вручную добавлять контент – для этого предусмотрен визуальный редактор WordPress.
Стоимость этого плагина составляет сорок девять долларов, но при этом есть возможность установки всего лишь на один сайт. Это, на самом деле, не очень справедливо. Плагин, стоящий таких денег, должен иметь возможность использования на различных сайтах. Хоть плагин и немного переоценен, для многих пользователей он может стать оптимальным вариантом.
Smooth Slider
Этот слайдер позволяет добавлять изображения и другой контент с настраиваемым интервалом слайдов, оснащать переходы эффектами. Этот плагин поддерживает отображения последних сообщений при помощи изображений, которые были добавлены в список избранных. Слайдер обладает интуитивно понятным пользовательским интерфейсом, который не требует от своих пользователей знания языков программирования.
Тем не менее, если Вы разбираетесь в CSS, у Вас получится добавить пользовательские таблицы стилей. Важно отметить, что плагин является абсолютно бесплатным и не имеет дополнительной, более расширенной версии. Это говорит о том, что все функции, которые есть в этом плагине, будут доступны абсолютно любому пользователю.
Easing Slider «PRO»
Этот слайдер карусель для вордпресс является премиум плагином, однако имеет бесплатную версию «lite». Хоть этот инструмент и очень сильно ограничен с точки зрения настраиваемости, он остается отличным легким слайдером, который никак не повлияет на скорость загрузки страниц вашего сайта. В общей сложности слайдер добавляет не более 16 килобайт к размеру страницы после её уменьшения. Это достигается благодаря использованию переходов CSS3 и крайне эффективному использованию JavaScript.
Хоть плагин и включает в себя «lite» версию, пользователи считают её абсолютно бесполезной. Если вы не хотите брать платный плагин – лучше выбрать более подходящий аналог.
Заключение
Проведя черту над всем вышесказанным, становится понятно, что оснащение вашего WordPress сайта каруселью – действительно полезное занятие, которые в дальнейшем принесет свои плоды. Пользователям сайта будет намного приятнее находиться на нем и перемещаться по его просторам, сайт будет иметь привлекательный внешний вид, тем самым заставляя посетителей зайти и изучить его. Если вы задумаетесь над продажей сайта – оснащение его каруселью будет не менее полезным занятием, ведь сервис будет выглядеть очень красиво и динамично.