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

От автора: в этой статье мы с вами познакомимся с еще одним полезным и замечательным плагином для WordPress — это плагин Meta Slider. Это плагин слайдер для WordPress, с помощью которого вы сможете быстро и просто организовать на страницах вашего сайта слайдер или слайдшоу. Приятным бонусом будет возможность выбора различных вариантов слайдера, его простая настройка, а также адаптивность из коробки.

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

Есть ли плагин слайдера для WordPress? Есть и плагинов таких — огромное количество, выбирай — не хочу

Могу порекомендовать остановить свой выбор на плагине Meta Slider, который я упоминал выше. Начнем с того, что установив этот плагин вы в результате получите не один вариант слайдера, а сразу четыре популярных на данный момент слайдера:

Впечатляет, не правда ли? Давайте переходить от слов к делу. Установим плагин Meta Slider и посмотрим, как же просто производится настройка слайдера с этим плагином WordPress. Итак, идем в меню добавления новых плагинов и ищем плагин слайдшоу по запросу meta slider.

Устанавливаем и активируем найденный плагин слайдер — Meta Slider. После установки в меню вы увидите новый раздел, название которого совпадает с названием плагина.

Из названий пунктов меню понятно, что плагин предлагается в двух версиях: бесплатной и PRO. Можно предположить, что платная версия имеет больше настроек, но, на мой взгляд, настроек в бесплатной версии слайдера более чем достаточно. Большим преимуществом платной версии является поддержка видео слайдов с сервисов YouTube и Vimeo, так что если вам необходим подобный функционал, тогда стоит задуматься над приобретением платной версии плагина.

Переходим на главную страницу плагина, где нам предлагают создать первое слайдшоу.

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

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

Первая же настройка в блоке справа позволяет выбрать вариант слайдера, по умолчанию это Flex Slider. Но мы можем выбрать и любой другой. Далее мы можем настроить эффект смены слайдов, размеры слайдера, навигацию по слайдшоу, тему слайдера (светлая, темная и т.п.). Это лишь основные настройки. В блоке расширенных настроек их куда больше — попробуйте поиграться с ними и подобрать конфигурацию на свой вкус.

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

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

Кроме того, плагин можно вставить даже в шаблон, например в шапку вашего сайта (шаблон header.php). Необходимый код для вставки в шаблон мы можем взять во вкладке Вставка в шаблон.

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

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

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

Слайдер TN3 Gallery

Слайдер для WordPress TN3 Gallery обладает достоинствами других слайдеров, как то превью картинок, хорошая вёрстка и прочие вкусности, упомянутые выше при описании других плагинов.

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

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

Страница плагина

Слайдер WordPress Content Slide

Слайдер для WordPress под названием WordPress Content Slide предназначен для организации слайдеров изображений на собственном ресурсе.

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

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

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

Слайдер ISlidex

Слайдер ISlidex можно смело назвать довольно неплохим плагином, обладающим поддержкой одновременно нескольких тем.

Как обещают сами разработчики, со временем будет добавлена возможность SEO-вёрстки, автоматической обрезки и кэширования изображений, поддержка WordPress 3.x. и кроссбраузерность вплоть до IE7.

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

Слайдер RoyalSlider

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

Слайдер для WordPress под названием RoyalSlider может показать пользователю всё, что он только захочет.

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

По моему скромному мнению, RoyalSlider – это лучший слайдер на сегодняшний день. Стоимость такого удовольствия составляет всего лишь 12 долларов, при этом все последующие версии будут для вас бесплатными.

Кроме того, по заверениям самих разработчиков, RoyalSlider – это единственный плагин на сегодня, который в состоянии поддерживать в полном объёме IE10, установленный в Win8.

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

С 2013 года всевозможные исследования пророчат слайдерам скорый уход со страниц интернета, но их популярность до сих пор не угасает. Что ни говорите, они «оживляют» портал, привлекают внимание к информации. На них так и хочется нажать. Конечно, если слайдер красив и грамотно составлен, но к этому мы еще вернемся.

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

Ну что, приступим?

Meta Slider

Для начала мне бы хотелось рассказать вам про лучший плагин для сайта на ВордПресс. Редкий случай, когда удается найти что-то ценное и бесплатное одновременно.

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

Ну что ж, давайте я покажу как работать с программой.

Установка

Итак, подробную статью о том, на WordPress вы можете прочитать в моем блоге. Кратко повторим что делать в конкретной ситуации. Заходим в раздел плагины и выбираем из списка опцию «Добавить новый» в поисковую строчку в правом верхнем углу вбиваем: «Meta Slider» и Enter. Как только страница с нужным приложением открывается, жмем «Установить».

Не забудьте активировать Meta Slider через вкладку «Установленные» или в открывшемся окне после установки.

В результате в панели управления справа должна появиться новая категория. Вы можете купить Pro-версию за 19$ или пользоваться бесплатной, на мой взгляд ее функций вполне хватает, так приобретение совсем не обязательно.

Возможности

Теперь давайте разберемся как создать и вставить карусель, иногда слайдер называют еще и так. Проходим в приложение по ссылке справа (в панели администратора ВордПресс) и жмем на плюс рядом фразой «Добавить новый».

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

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

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

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

Помимо 4 основных вариаций дизайна вы можете выбрать еще одну из четырех цветовых схем.

Помимо этого всего, есть еще и дополнительная настройка. Если вы хотите предоставить читателю возможность управления перемоткой, нужно поставить галочку рядом со словом «Стрелки». Навигация также возможна посредством точек. Обязательно давайте читателю возможность самостоятельного управления, особенно если это рекламный блок.

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

Далее идут «Расширенные настройки». Тут можно увеличить или уменьшить длительность показа кадров и скорость анимации. Они не должны двигаться очень быстро, иначе с вашего сайта уйдут. Если фотографий много лучше разрешить показ картинок вразнобой.

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

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

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

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

Интеграция в блог

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

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

Выбираем из списка нужное название и кликаем «Вставить слайдшоу».

Готово. В моем случае на сайте это будет выглядеть вот так.

Чтобы поставить блок на главной странице зайдите в категорию «Внешний вид» — «Виджеты». В верхней части вы увидите «Meta Slider».

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

На моем тестовом сайте блок справа выглядит так.

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

Отображение на сайте сразу изменится.

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

Пока не сможете развиться в этой области, советую прибегнуть к помощи фрилансеров. Сделать это можно на сайтах WebLancer.net и FL.ru . Первый чуть проще, а на втором вы можете повстречать настоящих профессионалов.

Цена зависит от вашего бюджета, но думаю, что картинка обойдется вам максимум в 500 рублей. За эту сумму можно купить и три, но в этом случае желающих исполнить заказ будет меньше, а значит и результат вы получите хуже.

Я желаю вам успехов и если эта статья вам понравилась – подписывайтесь на рассылку. До новых встреч.

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

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

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

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

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

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

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

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

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

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

< ?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, который отличается простой в использовании, однако при этом не обделён функциями и возможностями. Речь пойдёт о дополнении Meta Slider.

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

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

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

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

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

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

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

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

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

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

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