Meta Slider — бесплатный слайдер для WordPress

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

Использовать слайдшоу Meta Slider вы можете как на главной странице, так и в любой записи, либо сайдбаре (боковой колонке сайта). Настройки до безобразия просты, а внедрение слайдера на сайт WordPress еще проще.

Сам плагин на английском языке. Я уже сел делать русскую локализацию, но понял, что это "сизоф труд", т.к. с обновлением Meta Slider может изменить функционал. Поэтому поясню самые основные моменты текстом и на скриншотах. А саму работу плагина можете посмотреть на странице http://www.metaslider.com/examples/.

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

Шаг 1: создаем первое слайдшоу

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

slide1

Кликаем по нему и попадаем на страницу, где сверху увидим такое

slide2

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

slide3

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

Шаг 2: загружаем картинки в слайдер

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

Meta Slider - бесплатный слайдер для WordPress

Нажимаем и добавляем картинки для выбранного слайдшоу. Сам процесс добавления стандартный для сайтов на WordPress. После этого появится вот такое:

Добавляем текст к каждому изображению

Клик для увеличения

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

Галка в поле New Window сделает так, что по клику на картинку выбранная ссылка откроется в новом окне. Остальное понятно из скриншота.

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

Шаг 3: настройка эффектов для слайдера

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

slide6

Чтобы вы не делали в выбранном слайдшоу, необходимо по окончании изменений его сохранить. Для этого используем кнопки Save, либо Save&Preview (сохранить и сразу посмотреть как будет выглядеть).

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

slide7

Обратите внимание, что ширину (width) и высоту (height) я задал ровно такую, какого размера у меня изображения. Вы ставите свои размеры. Красная стрелка показывает на поле эффекта, с которым будет отрабатывать слайдер на сайте.

В нашей бесплатной версии плагина Meta Slider эффектов не сильно много, но их достаточно, чтобы посетители вашего сайта положительно оценили ваш сайт. Кто хочет, может купить PRO версию Meta Slider за 19$ (ссылку увидите).

slide9

D этом блоке мы ставим галку, если нужны стрелки навигации влево и вправо (Arrows), а также можем спрятать нижнюю навигацию (Hidden), либо отображать её в виде точек

slide8

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

Далее у нас идет блок Advanced Settings. Здесь мы можем точечно настроить стиль отображения: время задержки, чередование, направление и т.п. Можете смело поэкспериментировать, чтобы найти нужные для себя параметры. Если я начну описывать каждый, то статья будет невероятно длинной.

Шаг 4: внедряем созданный слайдер на сайт

Как все сделали и нажали сохранить, снизу находим вот такой блок

slide10

Мы можем внедрить слайдер на сайт при помощи шорткода, либо функции PHP. Шорткод удобно использовать в статье, а функцию прописывать в файл шаблона. Сами решаете как вам лучше сделать.

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

Включаем шорткоды в стандартном виджете сайдбара Text

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

Открываем functions.php и сразу после открывающего <?php, на новой строке, вставляем следующее:

add_filter('widget_text', 'do_shortcode');

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

Для тех, кто сомневается и боится

Если боитесь пробовать что-то новое, боитесь "поломки" сайта, то меняйте отношение к жизни. Ставьте смело Meta Slider: сайт он вам не "сломает". Для начала попробуйте все на стандартных настройках, а потом пробуйте менять эффекты и оформление.

Если вдруг плагин не захочет "работать", то убедитесь что у вас подключен jQuery, притом версии поновее. Если что, в помощь ПЛАГИН. Других проблем с активацией Meta Slider не наблюдал.

Требуемая версия WP:  3.5+
Рассмотренная версия плагина:  2.3
Скачать плагин

Привет.

Меня зовут Виталик. Я автор этого блога и Магазина WordPress https://wp-r.ru/.


Оказываю услуги по созданию и настройке сайтов на WordPress (верстка, натяжка).

Отблагодарить Z888279575784 R109400923968 или ЯД 41001651742138

Мои Контакты. Я в Twitter @mojWP. Смотри на Youtube. Читай RSS блога.

Опубликовано 30 комментариев
  1. Андрей says:
    http://zarobitok.ru/

    Отличный плагин, благодарю Виталий.

  2. Эрик says:
    http://pravonazhizn.com/

    Здравствуйте.
    Подскажите как изменить положение текста в слайдере? По умолчанию от с низу, а мне надо с лево что бы закрывал слайды только на половину.
    Заранее Благодарен.

    • Виталий says:
      http://mojWP.ru/

      Добрый день.
      В бесплатной версии нет такого шаблона оформления. Необходима версия Pro.
      Другой вариант: "допилить" плагин по стилям самостоятельно.

  3. Дмитрий says:
    http://info-curs.com/

    Отличный слайдер, давно такой искал!

  4. name nika says:
    http://olgworld.com

    Интересный слайдер. Попробую реадизовать а другом шаблоне.

  5. vova says:
    http://24roil.com/

    А видео можно сделать слайдером?
    Как здесь http://jet00cbr.com/

    • Виталий says:
      http://mojWP.ru/

      При помощи данного плагина lite версии не получится. Быть может в Pro есть возможность.
      Для видео есть другие решения бесплатные. Погуглите скрипт подходящий.

  6. vova says:
    http://24roil.com/

    Спасибо.
    Ясно.

  7. Альберт says:

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

  8. Юлия says:

    Большое спасибо! Всё отлично работает. Отдельная благодарность за инструкцию по фключению шорткодов!

  9. ss says:

    спасибо большое, вставила в тему 2014(Twenty Fourteen), и подкорректировала function.php, ив левом и вправом и в записях работает, только в боковом баре-узенько, еще не разобралась как увеличить.

    • LoR says:

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

      • ss says:

        нет, просто в левом сайдбаре и в правом сайдбаре и в запись вставила слайдер, а в заголовке получается только после названия сайта, в файле header.php, после строки вставила .

  10. ss says:

    после строки wp_head: вставила функцию php

  11. celena says:

    Спасибо за статью!Заменила vslider на metaslider!

  12. Сергей says:

    Классный слайдер поставил себе на сайт

  13. Евгений says:

    Здравствуйте! Подскажите пожалуйста, в статье вы пишите, что слайдер можно подключить прямо в виджете "текст". Но у меня уже стоит в сайтбаре номер ICQ и другие контакты, опубликованные как раз с помощью этого виджета. Правильно ли будет использовать несколько виджетов "текст"?

    • Виталий says:
      http://mojWP.ru/

      В сайдбаре сколько угодно раз можете использовать абсолютно любой виджет.

  14. Polina says:

    Добрый день!
    Первый раз работаю с WordPress. И совершенно не понимаю как внедрить слайдер в сайт...
    Куда вставлять Shortcode или template include. В каком месте нужно править код?

    • Виталий says:
      http://mojWP.ru/

      Добрый.
      Шорткод вставляется в тело статьи, или в виджет (тогда нужно его там активировать).
      Инклюд делается непосредственно в код шаблона, в нужно вам место (где будет выводиться). Зачастую это Главная страница. В разных шаблонах ее файл может называться по разному (index.php, home.php, loop.php и пр.).

  15. Наталья says:
    http://otpusk-zdorovo.ru/

    Подскажите, пожалуйста, а есть ли возможность удалить какую-то одну картинку из слайд-шоу? Как это можно сделать?

  16. Данил says:
    http://www.36comphelp.ru

    Подскажите пожалуйста о подготовке самих картинок, по умолчанию плагин их образает, что делает неудобным размещение текста на странице (на том же слайде) ?

  17. Евгений says:
    http://azbl.ru

    Спасибо большое за информацию! Очень подробно все описано!

  18. Катя says:

    спасибо! Отличная статья! Хорошее дополнение по шорткодам! С помощью одной строчки кода всё заработало, благодаря Вам!

  19. Сергей says:

    Спасибо большое, читал статьи других авторов, все сложно у них. У вас же все проще простого)

  20. Светлана says:
    http://hitsovet.ru

    Спасибо! хорошая статья.

  21. Алексей says:

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

    • Виталий says:
      http://mojWP.ru/

      Добрый.
      При помощи CSS параметров

  22. Владимир says:

    Сколько максимум можно добавить на сайт слайдеров? не могу добавить больше 15

  23. Максим says:

    Здравствуйте!
    Как убрать подчеркивание на стрелках перемещения слайдов?
    Заранее благодарю за ответ!

Не держи в себе. Выскажись.

Ваш e-mail не будет опубликован. Обязательные поля помечены *

© 2011-2017 | mojwp.ru | Копирование материала разрешено только с письменного согласия
WordPress: 12.23MB | MySQL:105 | 0,265sec
Премиальные плагины для CMS WordPress
Магазин WordPress WP-R.ru
Спасибо, не показывайте мне эту штуку больше!
Смотри мои обучающие видео на YouTube
Иван только что купил плагин ELT https://wp-r.ru/plaginy/elt.html
Друг, не уходи!