кнопка наверх

Устанавливаем слайдер на WordPress блог

jquery_slider_5 Всем привет! Если Вы хотите иметь на своем блоге jquery слайдер, и не совсем понимаете, как его добавить то в этой статье я постараюсь все доступно объяснить. Для добавления слайдера на WordPress мы будем использовать плагин Nivo slider for wordpress – этот плагин очень прост в настройке и без всяких проблем вставляется в тему.

Nivo slider for wordpress,

Установка плагина nivo slider for wordpress

1) Качаем плагин по этой ссылке

2) Распаковываем архив с плагином и кидаем папку nivo-slider-for-wordpress в деректорию (wp-content/plugins/).

3) Активируем плагин

Основные настройки плагина nivo slider for wordpress

После активации плагина Вам нужно будет вставить этот код

1
<?php if (function_exists('nivoslider4wp_show')) { nivoslider4wp_show(); } ?>

Если Вы хотите чтобы слайдер для WordPress отображался только на главной странице и других страницах Вашего блога, то Вам нужно будет вставить в начале файла Index.php код, который выше.

Или же Вы можете сделать, чтобы слайдер отображался только на страницах с постами. В этом случае Вам нужно вставить код, который выше в файл Single.php

Внешний вид слайдера для WordPress

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

Как Вы уже наверно заметили в низу администраторской панели, у Вас появилась новая вкладка:

Nivo slider for wordpress

Нажимаете на вкладку Add/Edit image и в открывшейся странице нажимаем на “Add New image”

Nivo slider for wordpress

После чего выбираете картинки на вашем компьютере, которые Вы будете вставлять в слайдер и нажимаете на “Send picture and configure” .

После того как картинка будет загружена на сервер у Вас должна будет появиться новая настройка “Slide preview”

Nivo slider for wordpress

1) Вы можете указать текст, который будет отображаться на этой картинке.

2) А здесь указываете ссылку, куда будет вести эта картинка.

Теперь переходим во вкладкуOptions” и продолжаем настройку слайдера.

Nivo slider for wordpress

1) Можете изменить ширину и высоту картинок.

Для справки: Enable “Включить” Disable “Отключить”

Nivo slider for wordpress

2) Здесь можете выбирать эффект перехода.

3) Скорость слайда.

4) Время паузы между переходами.

5) Стрелки навигации.

6) Показывать стрелки навигации, когда мышка находиться на слайде.

7) Показывать навигационные стрелки.

8)) Не знаю что это.

9) Останавливать анимацию при наведении курсора мыши на слайд.

10) Не совсем понял для чего это.

11) Цвет фона для описания.

12) Цвет текста.

13) Прозрачность фона для заголовка.

Nivo slider for wordpress,

14) Качество картинки (указывать в %).

15) Это можно и не трогать.

После всех изменений обязательно сохраняемся. В конечном итоге у меня получился вот такой слайд:

Nivo slider for wordpress,


1 звезда2 звезды3 звезды4 звезды5 звезд (4 оценок, среднее: 5,00 из 5)
Загрузка...
like
Понравилось?
Подпишитесь на блог и получайте новые статьи!
Добавляйтесь в соц. сетях:
  1. владимир:

    Полезный пост. Сразу применил на практике. Единственное неудобство — слепое выравнивание ширины картинок под ширину основной колонки блога. Спасибо. Успехов

    Ответить
  2. Майя:

    Да, пост поучительный, но поздно нашла. Теперь у меня тема с встроенным слайдером. Обрыла всю админку, но где заменить картинки не нашла. Подскажите, пожалуйста, кто знает (тема: Cinema Blog)?

    Ответить
    • Влад:

      Настройки слайдов, нужно искать в самой теме, зайдите в Внешний вид --> Cinema Blog, и ищите там настройки слайдов.

      Если не найдете пишите!

      Ответить
  3. Майя:

    Здравствуйте Влад. Нашла в настройках текст, который перевела в Googl: «Тема Блога кино — Чтобы Поместить известное изображение в каждое сообщение, загрузите изображение в ‘известном изображении’ в левых на странице постредактирования. Чтобы Отредактировать Ползунок читает файл, ‘Как отредактировать ползунок’, расположенный в папке темы». Подскажите, пожалуйста: как это понимать? А дальше идут разделы «Название и описание сайта» и «Статическая главная страница».

    Ответить
  4. Миша:

    В какой именно файл нужно вставлять этот код?

    Ответить
    • Влад:

      Там все написано, этот код нужно вставить в начале файла Index.php

      1
      
      <?php if (function_exists('nivoslider4wp_show')) { nivoslider4wp_show(); } ?>
      Ответить
  5. Exotic Family:

    Там все написано, этот код нужно вставить в начале файла Index.php

    В какой index.php , где он находится?

    Ответить
  6. Вадимос:

    видать автор не знает английского) очень понравилось вот это: 8)) Не знаю что это. 8 — это возможность использовать стрелки на клавиатуре для смены слайдов

    Ответить
  7. Деловой:

    А есть такой русский плагин??

    Ответить
  8. Владислав:

    Отличный плагин, настройка очень простая! Одна незадача, небольшое пространство остается « фон сайта, между слайдером и шапкой сайта». Как не увеличавать и не уменьшать размер, пробел остается, подскажи как его убрать!

    Ответить
    • Владислав:

      И подскажите где мне такую же ракету достать как у вас? что бы нажал и вверх)

      Ответить
      • Влад:

        Саму ракету? или кнопку подняться вверх?

        Ответить
    • Влад:

      В CSS стилях шаблона, класс #slider убери отступ 30px (margin: 0 0 30px 0;)

      Ответить
      • Владислав:

        Кнопку, ты не мог бы мне ссылку на установку дать и как анимацию кнопки поменять!?

        спасибо помогло!!! вот ещё не задача, с права по краю, в самом слайдере пара мм отсутствует и видно фон, и при перелистывании фото дергается, а сверху видны части предыдущих фото... как нибудь исправить это можно?!

        лучше на сайте посмотри, так может непонятно...

        Ответить
  9. Илья:

    Как сделать чтобы слайдер показывался только на главной странице сайта?

    Ответить
  10. Павел:

    Подскажите если можно по подробнее (для чайников) — Как вытащить слайдер на главную страницу, тема стандартная Twenty Thirteen, заранее спасибо...

    Ответить
  11. Oksana:

    Установила nivo а теперь не могу закачать обычные медиафайла...что за хрень? Кто-нибудь подскажет?

    Ответить
  12. Надежда:

    Здравствуйте. Так понятно все написано, что даже хочется удалить установленный слайдер и поставить этот. дело в том, что я вчера поставила метеорслайдер. вроде все работает, но между слайдером и нижестоящими записями образовалось пустое место. Вы не подскажете, как это исправить?

    Ответить
    • Анна:

      напишите адрес сайта, я посмотрю!

      Ответить
  13. Надежда:

    Буду очень благодарна за помощь!!!

    Ответить
    • Анна:

      у вас справа от слайдера пустой квадратный блок, видимо для рекламы <div id="ad_top"> </div> он съехал на следующую строку. удалите его.

      Ответить
  14. Алекс:

    В моей теме есть слайдер, но почему то не работает.

    Установил так как написано у вас, но тоже ни чего не работает!

    В чем дело, подскажете?

    Ответить
Ваш комментарий: