Меню
ГлавнаяИгры

Плагин слайдер на главную страницу wordpress. Простой и функциональный слайдер на WordPress

В этой статье я расскажу про слайдер на WordPress, который отличается простой в использовании, однако при этом не обделён функциями и возможностями. Речь пойдёт о дополнении Meta Slider.

Вот какие достоинства в нём следует выделить:

  • Плагин прост в настройке.
  • Интерфейс на русском языке.
  • Есть возможность настроить атрибуты Title и Alt для изображений слайдов.
  • Можно назначить ссылки каждому слайду.
  • Имеется четыре готовых дизайна.
  • Есть несколько эффектов переходов.
  • Слайдер получается адаптивным.

Как сделать слайдер на WordPress с помощью Meta Slider

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

Наведя мышь на вкладку с названием слайдера, вы можете изменить его наименование. А нажав на кнопку «Добавить слайд», вы можете добавить изображения в слайдер.

Каждый добавленный слайд имеет настройки из трёх вкладок.

  • Основное. Здесь задаётся описание для картинки и при необходимости ссылка для неё. Можно сделать, чтобы ссылка открывалась в новой вкладке.
  • СЕО. Здесь можно задать Title и Alt для картинки, что положительно скажется на SEO-оптимизации слайдера для WordPress.
  • Обрезать. Опции обрезки картинки.

В боковой колонке справа слайдер на WordPress имеет опции для настройки.

  • Кнопка «Просмотр» позволяет взглянуть на слайдер до публикации.
  • Кнопка «Сохранить» сохраняет внесённые изменения.
  • Четыре кнопки ниже позволяют выбрать дизайн для слайдера.
  • Ширина. Задаёт ширину слайдера в пикселях.
  • Высота. Задаёт высоту слайдера в пикселях.
  • Эффект. Можно выбрать эффект перехода. В бесплатной версии список немного ограничен.
  • Дизайн. Можно дополнительно выбрать дизайн для слайдера. В бесплатной версии ограниченно.
  • Стрелочки. Включает или выключает стрелки для переключения слайдера.
  • Навигация. Включает или выключает точки под слайдером.

Немного ниже есть ещё один блок настроек, который можно развернуть – это «Расширенные настройки».

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


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

Рассмотрим на конкретном примере, как без особого труда и довольно быстро установить слайдер в шапку сайта WordPress.

Подготовка шаблона

Рассмотрим реализацию данного проекта на примере шаблона WordPress « Twenty Thirteen», который уже предустановлен по умолчанию в системе.

В нашем случае, устанавливая слайдер в шапке сайта, для начала необходимо скрыть эту самую шапку, вместо которой мы хотим установить наше слайд-шоу. В этом нам поможет функция «просмотр кода элемента » имеющаяся в Google Chrome и в других популярных браузерах. Для вызова функции щелкните правой клавишей мыши по шапке страницы и в открывшемся контекстном меню выберите "Просмотр кода элемента ". Во время наведения курсора компьютерной мыши на код, можно увидеть подсветку элементов, за которые этот код отвечает, и, таким образом, находим необходимые строчки кода.

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

Воспользуемся функционалом WordPress Content Slide для установки слайдера в «шапке» темы. Для установки и активации Content Slide используйте стандартную функцию WordPress поиска и установки плагинов или скачайте последнюю версию с его страницы по адресу - wordpress.org/plugins/content-slide/ . ВНИМАНИЕ! В настоящее время архив плагина недоступен для скачивания, автору письмо отправил, но тот пока молчит. На моем сервере он присутствует, скачать плагин WordPress content-slide можно по ссылке.

Перед выполнением работ по настройке плагина, необходимо поместить его код вызова в то место, куда хотим установить слайдер. Код находится в файле «README», который в свою очередь "сидит" в папке установленного плагина.

Откройте файл текстовым редактором и из мануала по установке скопируйте сам код.

Чтобы облегчить вам жизнь, привожу этот код ниже:

& lt; ?php if (function_exists ("wp_content_slider" ) ) { wp_content_slider() ; } & gt;

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

Установим код слайдера в шапке сайта WordPress перед закомментированным кодом шапки темы.

Теперь можно приступить к настройке Content Slide.

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

Основные настройки Content Slide

1 Image width - ширина изображений (в пикселях) height - высота
Border width - толщина рамки (если поставить нулевое значение, рамки вообще не будет) Border Color - цвет рамки
Font family - шрифт текста описания
Text font size - размер шрифта текста Text color - цвет шрифта текста
Heading font size - размер шрифта заголовка Heading color - цвет шрифта заголовка
Background color - цвет фона

Эффекты и настройки анимации Content Slide

7 Squares per width - пропорции эффектов анимации по ширине Squares per height - пропорции эффектов анимации по высоте
Delay between images in ms - время задержки смены изображений в мил.сек. Delay beetwen squares in ms - время задержки панели навигации в мил.сек.
O pacity of title and navigation – непрозрачность заголовка и элементов навигации
Speed of title appereance in ms – скорость смены заголовка
Effect - эффект:
  • random - случайный;
  • swirl - вихрь;
  • rain - дождь;
  • straight - перелистывание;
  • fade - выцветание.
Mouse Over Pause (Stop Animation on mouseover) - остановить анимацию наведением курсора мыши?
Navigation Previous/Next (Previous/Next buttons on image) - кнопки навигации (предыдущий/следующий)
Navigation Buttons (Square buttons at bottom) - кнопки навигации быстрого перехода по слайдам
Navigation Buttons Color (Square buttons at bottom) - цвет кнопок навигации

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

16 Display Heading and Text? - выводить заголовок и описание? No. of chars - количество символов в описании
Open Images/Links In New Window? - по клику открывать ссылку слайдера в новом окне?
Order Images Randomally - показывать изображения в случайном порядке
Use custom images? - использовать собственные изображения? Yes, Custom Images - да, собственные изображения
Number of custom Images – число собственных изображений
CustomImage 1 - первое собственное изображение
  • Image 1 SRC - адрес изображения;
  • Image 1 Link - ссылка слайда;
  • Image 1Heading - заголовок;
  • Image 1 Text - описание.
No, Using Posts from a Category - нет, использовать миниатюры постов из выбранных категорий
Select a Category - выбрать категорию
No. Of posts/images - количество постов/изображений

Ну вот и все, с настройками Content Slide покончено, не забудьте сохранить изменения.

И по завершении проделанной работы, моя главная страница выглядит так:

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

Возможности плагина Content Slide, благодаря его богатому функционалу, позволяют создавать слайд-шоу практически любых размеров и в любой части страницы сайта (для установки слайдера на отдельную страницу или в сайдбар сайта при помощи текстового виджета, вам дополнительно понадобится плагин ) .

Установка слайдера на сайт WordPress позволит наглядно продемонстрировать содержание интернет-ресурса, удерживая посетителей как можно дольше на страницах проекта, или привлечь его внимание к своим или партнерским продуктам, увеличивая продажи. Желаю удачи!

Обновлено: Июнь 18, 2017 автором: Роман Ваховский

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

Множество WordPress тем содержат встроенные слайдеры, но если у вас его всё ещё нет - рекомендую данный список. Здесь мы собрали лучшие WordPress плагины, которые добавят красивый и быстрый слайдер на ваш сайт.

Meta Slider

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

Стоимость: Бесплатно

Slider Revolution

Если вы используете премиум темы для WordPress , то наверное уже слышали о Slider Revolution. Это один из наиболее популярных слайдеров с красивым дизайном и потрясающим быстродействием. Плагин позволит создать слайдер любых размеров. Содержит множество анимаций и панель администрирования для упрощенной настройки.

Стоимость: $19

Mega Slider

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

Стоимость: $18

Hero Slider

Это хорошо оптимизированный платный слайдер, который можно полностью настроить под свои нужды. Плагин полностью адаптивный и содержит конструктор для редактирования дизайна. Можно настроить стрелки, кнопки, а также пустить на фон слайдера видео.

Стоимость: $18

Soliloquy

Soliloquy это ещё один качественный слайдер для WordPress . Настраивать плагин настолько просто, что даже неопытные пользователи сразу же с ним разберутся.

Стоимость: от $19

Accordion Slider

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

Стоимость: $21

Smart Slider 2

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

Стоимость: Бесплатно (есть версия PRO)

Slider Pro

Slider Pro - полнофункциональный премиум плагин с полным набором возможностей по добавлению и настройке слайдера на WordPress сайт.

Стоимость: $29

All Around

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

Стоимость: $18

Master Slider

Master Slider это один из наиболее популярных слайдеров на WordPress. Имеет полностью адаптивный дизайн , хорошо оптимизирован и содержит более 25 для упрощённой настройки. Слайдер умеет отображать контент любого типа, также можно добавить видео на фон .

Стоимость: $20

Cloud Slider

Cloud Slider полностью адаптивный WordPress слайдер с 18 разными темами, которые можно легко настроить под свой сайт. С этим плагином вы сможете создать слайдер любого типа.

Стоимость: $18

Smooth Slider

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

Стоимость: Бесплатно

для своего WordPress-сайта? Устали от тестирования сотен плагинов, стараясь выявить лучший? Прекрасно, значит вы стоите на верном пути. В данной статье мы сравним четыре самых популярных плагина, которые позволяют подключить слайдеры в WordPress, отметив их скорость, простоту использования, а также иные возможности. Целью нашего тестирования будет поиск наилучшего плагина для реализации слайдера в WordPress.

Многие читатели нашего сайта быстро вырастают с уровня новичков и переходят к настройкам темы. Один из наиболее популярных вопросов, задаваемых нашими читателями: какой слайдер для WordPress самый лучший? В данной статье мы попытаемся ответить на этот вопрос, приведя сравнения популярных слайдеров по производительности и качеству.

Проблема WordPress-слайдеров

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

Еще один корень зла WordPress-слайдеров – простота использования. Большая часть слайдеров перегружена разными опциями и поставляется с массивной документацией для новичков.

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

Разве реально протестировать сотни слайдеров и проверить все эти пункты? Нет, да и не нужно этого делать. Мы провели тестирование за вас, и чуть ниже вы узнаете, какой слайдер является самым лучшим по всем показателям. Продолжайте чтение.

Претенденты на звание лучшего слайдера для WordPress

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

Скорость

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

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

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

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

Простота использования

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

Soliloquy

Мы протестировали многочисленные слайдеры для WordPress, но мы не нашли настолько простых плагинов, как Soliloquy. Установка плагина и создание слайдов в нем являются удивительно простыми действиями.

Почему же он настолько прост в использовании? Ответ лежит на поверхности: он отвечает основным советам по написанию кода и отлично вписывается в родной интерфейс администратора WordPress. Слайдер обладает простым, но в то же время интуитивным пользовательским интерфейсом, позволяющим создавать слайды, используя стандартный загрузчик медиа-файлов в WordPress.

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

SlideDeck

SlideDeck – второй по простоте использования плагин, который мы обнаружили. Создание нового слайд-шоу в SlideDeck отличается удивительной простотой, вы можете легко добавлять многочисленные слайды. Также вы можете создавать слайд-шоу путем добавления контента с динамических ресурсов: Flickr, Vimeo, YouTube.

Плагин обладает множеством настроек для управления поведением вашего слайд-шоу. Существует возможность лайв-превью. Интерфейс администратора SlideDeck несколько запутанный, выглядит чужим в среде WordPress. Однако важно отметить, что с точки зрения дизайна интерфейс является достаточно симпатичным.

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

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

Nivo Slider

Создание слайдера с помощью Nivo Slider – простой процесс. Вы можете выбирать изображения из медиа-загрузчика, загружать различные изображения. Вы можете также менять порядок слайдов. Через интерфейс, такой же как в загрузчике, вы можете добавлять подписи, ссылки, текст Alt к вашим слайдам. Плагин имеет шорткоды и теги шаблонов, которые позволяют вам добавлять слайдер к записям, страницам и шаблонам.

Nivo Slider не поддерживает видео и иные типы мультимедиа. Плагин позволяет создавать только слайд-шоу из изображений. Он поставляется с прекрасным набором тем, которые вы можете использовать, а также с многочисленными эффектами перехода. Настройка плагина, создание слайд-шоу, добавление слайдов к записям/страницам происходят очень легко и быстро. Однако если вам важны параметры и опции, то в таком случае Nivo заметно отстает от SlideDeck 2 и Soliloquy.

Meteor Slides

При создании слайд-шоу в Meteor Slides вам нужно загружать каждый отдельный слайд индивидуально. Это сильно ест время, и многим новичкам это может показаться слишком запутанным шагом. После установки плагина переходим в раздел Slides - Add New. Даем отдельному слайду название, после чего щелкаем по пункту Set featured image для загрузки следующего слайда.

Если вы хотите, чтобы ваш слайд ссылался на страницу, то в таком случае введите URL. Наконец, вам нужно будет выбрать подходящее слайд-шоу из мета-поля Slideshows.

Вы не можете поменять порядок слайдов в слайд-шоу. Вы не можете добавлять видео-слайды, не можете задавать текст над слайдом. Все это сильно урезает функционал Meteor Slide. Однако он остается полезным, если вы хотите просто добавить слайд-шоу.

Возможности

Если вы хотите просто создать простое слайд-шоу из изображений, то в таком случае вам подойдут Nivo Slider и Meteor Slides.

Однако Soliloquy и SlideDeck 2 позволяют вам делать гораздо больше всего со слайд-шоу. В плане возможностей SlideDeck и Soliloquy идут практически рядом. Они оба имеют прекрасные возможности и предлагают широкий список средств управления над представлением ваших слайдов.

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

Slide Deck и Soliloquy поддерживают различные типы контента. Вы можете добавлять изображения, записи, текст и мультимедиа в слайды. Оба плагина позволяют редактировать отдельные слайды, добавлять расширенную информацию, такую как подписи, перекрывающий текст, кнопка призыва к действию.

Цена

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

В результате сравнения плагинов можно прийти к выводу, что самый лучший WP-плагин для создания слайдеров – это Soliloquy.

Победитель определен!

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

SlideDeck – второй с точки зрения функционала. К тому же он чуть медленнее, чем Soliloquy.

Слайдеров, сегодня хочу представить несколько плагинов, на которые эти исходники можно накрутить. Плюс, небольшое описание каждому плагину, чтобы не качать «кота в мешке». Лишний раз проверять, что умеет плагин и его работоспособность никому не нравится, верно? Скажу сразу — все слайдеры в формате плагинов для WordPress, поэтому проблем с установкой и настройкой быть не должно.

Coin Slider

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

Nivo Slider


Поистине король слайдеров. Честно говоря, не очень рекомендую пользоваться именно плагином для WordPress по причине того, что он давненько не обновлялся, в отличии от скрипта. А последняя версия для WordPress — платная. Ну или как вариант — приспособить новый скрипт к старой оболочке плагина, но тут нужны знания посерьёзнее. 16 вариантов смены картинки, поддержка тем, превью, отличная и валидная верстка, богатые настройки. Я пока не встречал скрипта, который бы уделал Nivo.

Content Slider от SlideDeck


Еще один весьма навороченный слайдер, но теперь это слайдер контента. Очень богатые настройки, интеграция в редактор постов, несколько тем в комплекте. Есть возможность вставить разные слайдеры в каждый пост. Есть Pro версия, которая может ещё кучу всяких клёвых штук, но цена в 99$ за слайдер меня очень и очень смущает.

Meteor Slides


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

Slideshow Gallery


Этот слайдер тоже умеет дружить с редактором постов WordPress, тоже может встраиваться шорткодом и у него есть превью картинок. Поддержка локализации, с помощью po/mo файлов. Плюс, для больших картинок поддерживается лайтбокс, то есть увеличение картинки по клику.

TN3 Gallery


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

WordPress Content Slide


Что сказать про этот плагин? Он маленький, полностью настраиваемый внешне, неплохие настройки из админки. И он работает.

ISlidex


Очень неплохой слайдер с поддержкой нескольких тем. Авторы обещают SEO-верстку, автоматическую обрезку и кэширование изображений, кроссбраузерность вплоть до IE7 и поддержку WordPress 3.x. Также умеет встраиваться в виджет, что существенно повышает его ценность.


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

Он сможет показать вам все, что вы захотите. Больше 10 шаблонов вывода в комплекте, собственное API, поддержка мобильных устройств и куча других вкусностей. Поверьте — на сегодняшний день это лучший слайдер. И стоит всего 12$ , конечно же, все последующие версии бесплатны. Да, как заявляет разработчик — этот плагин единственный, кто поддерживает в полном объёме IE10, который установлен в Win8.