Здравствуйте, друзья! Сегодня мы поговорим о том, как установить слайдер изображений на сайт WordPress. Создание и установка слайдера очень проста, и займет не более 5 минут .
Создавать слайдер мы будем с помощью плагина Meta Slider , который в свою очередь является одним из самых популярных бесплатных плагинов (более чем 500,000+ активных установок).
Плагин полностью русифицирован , что также является немалым плюсом.
Итак, начнем!
1. Устанавливаем и активируем плагин Meta Slider .
2. После активации плагина с административной панели переходим в «Meta Slider» .
3. Нажимаем по «плюсику» .
5. Теперь производим необходимые настройки плагина , которых кстати достаточно много (что не может не радовать).
Писать обо всех настройках я не вижу смысла, так как все они полностью русифицированы и вопросов по ним возникнуть не должно. Кроме стандартных настроек размера слайдера, эффектов, дизайна и т.п. можно также выбрать один из четырех типов слайдеров (Flex Slider, R. Slides, Nivo Slider, Coin Slider).
6. После загрузки изображений и настройки слайдера осталось самое простое — добавление слайдера на сайт .
Сделать это можно тремя способами, с помощью обычного шорткода (если нужно добавить слайд на страницу), с помощью вставки кода в шаблон и с помощью кнопки «Добавить слайдер» . Для добавления слайдера на страницу скопируйте код в блоке «Использование», и вставьте его в любую страницу или запись.
Для вставки слайдера в шаблон , перейдите на вкладку «Вставка в шаблон» , скопируйте код и добавьте его в файл шаблона, в котором Вы хотите сделать вывод слайдера.
Добавить слайдер на страницу с помощью кнопки «Добавить слайдер» проще всего. Нажмите по кнопке, выберите созданный слайдер и нажмите «Вставить слайдшоу».
При желании можно добавлять слайдер и на сайдбар . Для этого перейдите в Внешний вид -> Виджеты и воспользуйтесь виджетом «Meta Slider» .
Вот такой слайдер получается в итоге:
Как видите, сложного совершенно ничего нету! Добавление слайдера в WordPress достаточно быстрая и простая задача . В случае если у Вас возникли вопросы — смело пишите в комментариях.
Здравствуйте, друзья! Сегодня мы поговорим о том, как установить слайдер изображений на сайт WordPress. Создание и установка слайдера очень проста, и займет не более 5 минут. Как установить слайдер изображений в WordPress Создавать слайдер мы будем с помощью плагина Meta Slider, который в свою очередь является одним из самых популярных бесплатных плагинов (более чем 500,000+ активных установок). Плагин полностью русифицирован, что также является немалым плюсом. Итак, начнем! 1. Устанавливаем и активируем плагин Meta Slider. 2. После активации плагина с административной панели переходим в "Meta Slider". 3. Нажимаем по "плюсику". 4. Далее нажимаем кнопку "Добавить слайд" и загружаем (или выбираем из уже загруженных) изображения для слайда. Добавить…
Обзор
Рейтинг урока по добавлению слайдера на сайт
100
Ну что, друзья, сегодняшний пост по идеи, надо писать о том, как я сгонял в свое вело путешествие, но я отложу его и сегодня у меня будет технический пост.
Привет — привет, на связи снова я — Александр Быкадоров.
Как сделать слайдер без плагина за 10 минут
Все Вы знаете, что недавно я сменил дизайн блога. Остались еще некоторые недоработки. Верстальщик тупо «динамит». То ли действительно занят, то ли не хочет исправлять недоработки своей работы.
А поработать есть над чем.
Некоторые вещи я исправил сам. Но некоторые — сам не могу и не хочу исправлять. Некоторым нюансам необходимо посвятить целый день, а может быть и больше — у меня этого времени просто нет.
Да и вообще: где это было видано, чтобы блоггер версткой занимался)))
Нет уж, увольте: я и так больше двух лет угрохал на то, что во все нюансы вникал. Нет чтобы продвижением заниматься, еще больше полезного контента выдавать, так нет же — я все возюкался в коде, что то настраивал, улучшал.
Все это позади. Отвлекся я от основной темы.
Зачем нужен слайдер на блоге?
Однако, нет — нет, но меня тянет на разные «подвиги». Так уж я устроен, что люблю до разных вещей доходить сам. Вот и в этот раз, не обошлось без этого.
Задумал я установить на своем блоге, в сайдбаре слайдер…
Ах да, зачем нужен слайдер на блоге? И что такое слайдер вообще?
Слайдер — меняющиеся со временем в автоматическом и ручном режиме разные заставки, картинки. Что бы было понятнее — взгляните в правую колонку моего блога (сайдбар).
В старом дизайне блога, в самом верху главной страницы у меня стоял большой слайдер, на всю ширину страницы. Он был настроен таким образом, что выводил последние 10 записей. Позже я его убрал. Я считал, что он грузит блог.
Слайдер здорово экономит рабочее место блога.
На самом деле, если он грамотно реализован — то загрузка блога будет минимальной. В сети есть большое количество разных плагинов, которые отлично реализуют данную возможность. Но раз сейчас «мода» на избавление от разных плагинов, я так же решил не отставать от этого.
Сейчас у меня на блоге трудится 9 плагинов. Был у меня соблазн настроить вывод слайдера плагином, но я решил, что стоит браться «за старое». Не хочу засорять блог плагинами и все тут.
Поискав информацию в сети, я нашел отличное решение.
Код для слайдера
Сразу: с места — в карьер.
Держите мой код, который я вставил в сайдбар:
Давайте разберемся что за что отвечает:
scrollamount=»3″ — здесь можете поставить число от 1 до 10, оно отвечает за скорость прокрутки (смены) Ваших слайдов (картинок)
hspace=»10″ — расстояние (в пикселях) от правого и левого края, сюда же можете добавить еще один схожий код, а именно vspace=»10″, который указывает на расстояние сверху и снизу.
direction=»up» — между кавычками можно вписать down, left, right — это направлении движения Вашего слайдера, т.е. откуда и куда будут выходить слайды.
width=»250″ height=»250″ — тут все просто. Это размер поля вывода слайдов. Подбирается экспериментальным путем.
Ссылка куда будет переадресовывать при нажатии
«>Ваше описание для Вас
» src=»Ссылка на картинку
«/>
— этот код, не должен ввести людей, немного разбирающихся в html коде в ступор.
Как видите, этих кусочков, которые выводят картинки у меня четыре штуки. Вы их можете добавить сколь угодно.
Таким образом, мне удалось реализовать функцию слайдера без установки плагина. Данный код работает в любых браузерах, не нагружая блог — здорово.
На этот слайдер » я повесил» те бесплатности, которые я раздаю на своем блоге, а именно:
- Курс «Блог своими руками: Начало»
- «7 Величайших обманов сетевого маркетинга»
- Запись моего вебинара: «Эффективный блог — легко»
- «Секретные фишки популярного блога»
Т.е. если бы не слайдер, мне бы пришлось бы размещать все эти слайды (изображения) в сайдбар, выделив каждому свободное место, что накладно.
Куда ставить код на блоге?
Вопрос вполне резонный. Как куда? Туда где он Вам нужен. Если он Вам нужен в сайдбаре, то Вам необходимо пройти в тему Вашего блога, далее «Внешний вид» — «Редактор» и найти справа в колонке такую запись «Sidebar.php» — именно здесь и необходимо редактировать код, для того, чтобы разместить код слайдера.
Внимание: все изменения в коде Вы делаете на свой страх и риск. Т.е. необходимо сначала просто скопировать код и сохранить его первозданный вид, дабы потом, если что либо пойдет не по сценарию, Вы могли его восстановить.
Так же существуют темы для блогов, которые позволяют без проблем размещать код в том же сайдбаре, что называется «по щелчку пальцев».
Идем снова в админку и там, в том же меню «Внешний вид», выбираем «Виджеты».
Теперь просто перетаскиваем вкладочку «Текст» в то место в сайдбаре, где бы мы хотели видеть свой слайдер. Вставляем свой код, редактируем, сохраняем.
Перед этими действиями, нам необходимо, естественно, загрузить все необходимые нам картинки на хостинг. Останется только вписать адреса необходимых картинок в код слайдера и все проверить.
Если все прошло гладко — слайдер тут же начнет работать.
Ну а если не так — пишите, будем разбираться вместе.
Вот вроде бы и все, друзья. Надеюсь данный пост был для Вас полезным. Если это так — не скупитесь, ставьте лайки — буду очень благодарен.
Слайдеров, сегодня хочу представить несколько плагинов, на которые эти исходники можно накрутить. Плюс, небольшое описание каждому плагину, чтобы не качать «кота в мешке». Лишний раз проверять, что умеет плагин и его работоспособность никому не нравится, верно? Скажу сразу — все слайдеры в формате плагинов для 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.
Слайдеры на 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 — это плагин Meta Slider. Это плагин слайдер для WordPress, с помощью которого вы сможете быстро и просто организовать на страницах вашего сайта слайдер или слайдшоу. Приятным бонусом будет возможность выбора различных вариантов слайдера, его простая настройка, а также адаптивность из коробки.
Когда вы публикуете статью или новость, часто недостаточно просто сухого текста. Хочется как-то оживить этот текст, например картинкой или несколькими картинками. Визуальное сопровождение действительно оживляет текст. Ну а если эти картинки будут еще красиво и оригинально поданы — будет вообще супер. Такая статья больше придется по душе читателям. И слайдер является отличным способом украсить статью или страницу.
Есть ли плагин слайдера для WordPress? Есть и плагинов таких — огромное количество, выбирай — не хочу
Могу порекомендовать остановить свой выбор на плагине Meta Slider, который я упоминал выше. Начнем с того, что установив этот плагин вы в результате получите не один вариант слайдера, а сразу четыре популярных на данный момент слайдера:
Впечатляет, не правда ли? Давайте переходить от слов к делу. Установим плагин Meta Slider и посмотрим, как же просто производится настройка слайдера с этим плагином WordPress. Итак, идем в меню добавления новых плагинов и ищем плагин слайдшоу по запросу meta slider.
Устанавливаем и активируем найденный плагин слайдер — Meta Slider. После установки в меню вы увидите новый раздел, название которого совпадает с названием плагина.
Из названий пунктов меню понятно, что плагин предлагается в двух версиях: бесплатной и PRO. Можно предположить, что платная версия имеет больше настроек, но, на мой взгляд, настроек в бесплатной версии слайдера более чем достаточно. Большим преимуществом платной версии является поддержка видео слайдов с сервисов YouTube и Vimeo, так что если вам необходим подобный функционал, тогда стоит задуматься над приобретением платной версии плагина.
Переходим на главную страницу плагина, где нам предлагают создать первое слайдшоу.
Давайте так и сделаем, нажмем на плюсик и приступим к процессу создания слайдера. На открывшейся странице жмем кнопку Добавить слайд и просто выделяем картинки из вашей библиотеки медиафайлов, которые вы хотите вставить в слайдер, или прямо здесь загружаем необходимые картинки в библиотеку медиафайлов.
После добавления картинок мы попадем на страницу, где увидим все выбранные картинки, а также всевозможные настройки. Плагин слайдера для WordPress на русском языке, как вы видите, и это дополнительный плюс.
Первая же настройка в блоке справа позволяет выбрать вариант слайдера, по умолчанию это Flex Slider. Но мы можем выбрать и любой другой. Далее мы можем настроить эффект смены слайдов, размеры слайдера, навигацию по слайдшоу, тему слайдера (светлая, темная и т.п.). Это лишь основные настройки. В блоке расширенных настроек их куда больше — попробуйте поиграться с ними и подобрать конфигурацию на свой вкус.
Для каждой из фотографий слайдера нам предлагают добавить ее описание, также можно установить на слайд ссылку, если вы хотите, чтобы со слайда можно было перейти к какой-либо статье на вашем сайте. Как видим, настроек действительно хватает и настройка слайдера WordPress — довольно несложный процесс.
После окончания настройки слайдера нам остается взять предлагаемый шорткод и добавить его в нужное место статьи или страницы.
Кроме того, плагин можно вставить даже в шаблон, например в шапку вашего сайта (шаблон header.php). Необходимый код для вставки в шаблон мы можем взять во вкладке Вставка в шаблон.
Итак, копируем предлагаемый шорткод и вставляем его в выбранную статью. Результат отличный, в статье появился работающий слайдер и его реализация заняла считанные минуты.
Вот, собственно, и все. Экспериментируйте с настройками слайдера, чтобы получить удачное решение под дизайн вашего сайта. Удачи!