mojwp.ru
Назад

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

Опубликовано: 28.09.2013
39
3032

слайдер для 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 не наблюдал.
[downpg wp="3.5+" vp="2.3" href="http://wordpress.org/plugins/ml-slider/"]Скачать Meta Slider[/downpg]

Автор:
Виталий
Поделиться
Похожие записи
Черкани пару строк
  • Андрей
    Опубликовано: 29.09.2013 Ответить на сообщение

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

  • Эрик
    Опубликовано: 30.09.2013 Ответить на сообщение

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

    • Виталий
      Опубликовано: 30.09.2013 Ответить на сообщение

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

  • Дмитрий
    Опубликовано: 30.09.2013 Ответить на сообщение

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

  • name nika
    Опубликовано: 24.10.2013 Ответить на сообщение

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

  • vova
    Опубликовано: 05.11.2013 Ответить на сообщение

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

    • Виталий
      Опубликовано: 05.11.2013 Ответить на сообщение

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

  • vova
    Опубликовано: 05.11.2013 Ответить на сообщение

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

  • Альберт
    Опубликовано: 28.11.2013 Ответить на сообщение

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

  • Юлия
    Опубликовано: 24.01.2014 Ответить на сообщение

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

  • ss
    Опубликовано: 03.02.2014 Ответить на сообщение

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

    • LoR
      Опубликовано: 13.02.2014 Ответить на сообщение

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

      • ss
        Опубликовано: 14.03.2014 Ответить на сообщение

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

  • ss
    Опубликовано: 14.03.2014 Ответить на сообщение

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

  • celena
    Опубликовано: 17.06.2014 Ответить на сообщение

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

  • Сергей
    Опубликовано: 21.10.2014 Ответить на сообщение

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

  • Евгений
    Опубликовано: 31.10.2014 Ответить на сообщение

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

    • Виталий
      Опубликовано: 01.11.2014 Ответить на сообщение

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

  • Polina
    Опубликовано: 04.12.2014 Ответить на сообщение

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

    • Виталий
      Опубликовано: 04.12.2014 Ответить на сообщение

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

  • Наталья
    Опубликовано: 09.01.2015 Ответить на сообщение

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

  • Данил
    Опубликовано: 08.04.2015 Ответить на сообщение

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

  • Евгений
    Опубликовано: 17.05.2015 Ответить на сообщение

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

  • Катя
    Опубликовано: 16.06.2015 Ответить на сообщение

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

  • Сергей
    Опубликовано: 14.10.2015 Ответить на сообщение

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

  • Светлана
    Опубликовано: 19.06.2016 Ответить на сообщение

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

  • Алексей
    Опубликовано: 01.12.2016 Ответить на сообщение

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

    • Виталий
      Опубликовано: 02.12.2016 Ответить на сообщение

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

  • Владимир
    Опубликовано: 04.04.2017 Ответить на сообщение

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

  • Максим
    Опубликовано: 11.06.2017 Ответить на сообщение

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

  • Роман
    Опубликовано: 18.08.2017 Ответить на сообщение

    День добрый!

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

    • Андрей
      Опубликовано: 29.10.2017 Ответить на сообщение

      Решили проблему?

  • Роман
    Опубликовано: 18.08.2017 Ответить на сообщение

    Ага сделал вставил этот код add_filter('widget_text', 'do_shortcode'); и у меня сайт весь сломался , выдает 500 ошибку ППЦ (((((((((((

    • Виталий
      Опубликовано: 18.08.2017 Ответить на сообщение

      В последней версии WP эта функция идет по умолчанию.
      Вы видимо вставили неправильно, поэтому выдало такую ошибку. Внимательнее будьте.
      Удалите функцию и все будет ок.

  • Виа
    Опубликовано: 25.11.2017 Ответить на сообщение

    Подскажите, а если на странице темы нельзя использовать штрихкоды, как это включить?

  • Виа
    Опубликовано: 25.11.2017 Ответить на сообщение

    Простите, шорткоды

  • Виа
    Опубликовано: 25.11.2017 Ответить на сообщение

    Уже всё наладилось, спасибо

  • Елена
    Опубликовано: 26.04.2019 Ответить на сообщение

    Здравствуйте. Хоть и настройки плагина приобрели другой вид, мне Ваша статья все равно помогла. Посмотрите, пожалуйста kukla-24.ru Внизу изображения образуется пустота, хотя в настройках 300Х300 пикселей. Почему? и как можно убрать эту пустоту?

  • Юлия
    Опубликовано: 13.10.2021 Ответить на сообщение

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

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.