Как сделать плагин карусель на сайте

Плагин карусель для сайтаПлагин карусель - наверное не совсем точное название. Мы осудим сегодня технические тонкости установки Карусели с Плагином Shortcodes Ultimate.

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

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

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

Или например, как на моем сайте, надо показывать множество скриншотов. А если у Вас сайт, предлагающий какие-либо продукты. Проще - продающий. Тоже очень удобно и наглядно.

Итак, первое что надо сделать - это установить на своем блоге плагин Shortcodes Ultimate. В редакторе статьи появится кнопка - Вставить шорткод.

кнопка - Вставить шорткод

Проходим по ней и находим ссылку - Карусель.

ссылка карусель

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

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

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

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

ссылка слайда

Итак, изображения готовы. Теперь можно их загрузить в библиотеку медиафайлов, не привязывая к определенной статье.

Вот теперь все готово. Начинаем работать с Каруселью.

  • В статье устанавливаем курсор в то место, где будет отображаться карусель.
  • Кликаем на кнопку - Вставить шорткод. Открывается окно настроек.
  • Приступаем к настройкам.Настройки Карусели1. Выбираем медиабиблиотеку. Можно выбрать последние записи, если Вы хотите выложить информацию своих постов. Или Категорию  и так далее...

    2. Лимит. Это количество слайдов. Сейчас установлено - 20. Но если передвигать бегунгок, то можно довести и до 100.

  • Добавляем изображенияДобавляем изображенияНажимаем кнопку - Добавить  изображение, и поочередно загружаем выбранные картинки

    Работа с настройкой ссылок3. Если Вы решили отправить посетителя на определенный ресурс - значит выбираем - Ссылки слайда. Если Карусель будет просто информативная, выбирайте - Нет.
    4. Ссылка, конечно должна открываться в новом окне.


    Ширина и высота5. Настройка ширины. Устанавливайте бегунок по размеру изображения;
    6. Настройка высоты. Точно так же как и высота - размер изображения. Имейте ввиду. что и высота и ширина настраиваются по шкале с шагом в 20 пикселей. Если у Вас рисунок попадет в середину шага - устанавливайте размер больше.
    7. Отзывчивость. при установке да - рисунок будет подогнан точно по ширине ленты блога.

    Кол-во элементов8. Количество элементов для отображения. Выбираете столько, сколько посчитаете нужным;
    9. Количество прокручиваемых. Я всегда выбираю - один. Четкость лучше.
    10. Показывать заголовки или нет - Ваш выбор

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

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

    Как только убедитесь, что все хорошо - кликаем на кнопу - Вставить шорткод. Я так и сделаю сейчас. Все картинки снабжены ссылками. Так что можете посмотреть работу карусели в действии.

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

    шорт кодНу, что же, на сегодня все!
    Успехов и Удачи!


    Ваша Смирнова Ирина

Related Posts Plugin for WordPress, Blogger...

About Смирнова Ирина

Очень рада приветствовать Вас на своем сайте! Моя задача - помочь начинающим интернет-предпринимателям пройти путь к поставленной цели без потерь. Смело перенимайте мой опыт! УДАЧИ!
Плагины Word Press, Permalink

6 комментариев к Как сделать плагин карусель на сайте

  1. Semion says:

    Отличная статья! Главное вовремя! Спасибо Ирина.

  2. Пока у меня нет информации по поводу перегрузки. Я себя не ограничиваю. Это же просто шорткод.

  3. Ольга says:

    Ирина, добрый день. У меня вопрос — есть ли какие-то ограничения по количеству установленных на сайте каруселей (чтобы не перегружать блог) или можно устанавливать сколько хочешь?

  4. Татьяна says:

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

  5. Надежда says:

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

  6. Да! Эффектный плагин! Красивый и зовущий к действию: кликнуть. Надо всё-таки с блогом подружиться и применить эту фишку!

Добавить комментарий