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/.

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

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

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

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

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

  2. Эрик (1 комм.):
    http://pravonazhizn.com/

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

    • Виталий (1674 комм.):
      http://mojWP.ru/

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

  3. Дмитрий (1 комм.):
    http://info-curs.com/

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

  4. name nika (4 комм.):
    http://olgworld.com

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

  5. vova (2 комм.):
    http://24roil.com/

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

    • Виталий (1674 комм.):
      http://mojWP.ru/

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

  6. vova (2 комм.):
    http://24roil.com/

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

  7. Альберт (1 комм.):

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

  8. Юлия (1 комм.):

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

  9. ss (3 комм.):

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

    • LoR (1 комм.):

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

      • ss (3 комм.):

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

  10. ss (3 комм.):

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

  11. celena (1 комм.):

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

  12. Сергей (2 комм.):

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

  13. Евгений (1 комм.):

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

    • Виталий (1674 комм.):
      http://mojWP.ru/

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

  14. Polina (1 комм.):

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

    • Виталий (1674 комм.):
      http://mojWP.ru/

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

  15. Наталья (1 комм.):
    http://otpusk-zdorovo.ru/

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

  16. Данил (1 комм.):
    http://www.36comphelp.ru

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

  17. Евгений (3 комм.):
    http://azbl.ru

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

  18. Катя (1 комм.):

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

  19. Сергей (1 комм.):

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

  20. Светлана (1 комм.):
    http://hitsovet.ru

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

  21. Алексей (1 комм.):

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

    • Виталий (1674 комм.):
      http://mojWP.ru/

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

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

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

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