WP-THEME.EU

Темы для WordPress европейского качества

Создание слайд-шоу в Вордпресс. Часть III.

Создать красивый и многофункциональный слайдер (слайд-шоу) в WordPress на самом деле проще простого. Достаточно всего 10-12 минут Вашего драгоценного времени. В этой статье я покажу Вам, как создавать интересное слайд-шоу с помощью плагина EasingSliderи удачно внедрять слайдер в Вашу тему для WordPress– скаченную ли у нас на WPTheme.euили на любом другом ресурсе. Кстати, слайдер ВЫ скачаете в русской версии. Т.е. проблем быть не должно вовсе.

Посмотреть демо слайдера Вы можете тут …

 

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

Скачать русскую версию плагина на жесткий диск Вашего компьютера Вы можете тут…

После загружаем  zip-архив в директорию плагинов Вашего блога или сайта на WordPress, и активируем.

Если Вы всё сделали правильно, то в панели навигации (консоль) Вашего блога/сайта должна появиться учетная запись Easing Slider – как показано на рисунке ниже.

 

Настройки слайдера

Кликаем на указанную учетную запись Easing Slider и указываем нужные нам настройки слайдера. Всего у Вас 3 раздела:

1.       Пользовательские графики – здесь Вы загружаете Ваши фотографии и графики, которые после будут отображаться в слайд-шоу. Путь к графику лучше указывать прямой, т.е. http://washsite.ru/papkadlyafotografij/samofoto.jpg — поддерживаемые форматы: jpg, jpeg, png, gif.

 

Далее, в поле «Ссылка с графика» Вы можете ввести ссылку на статью или страницу – свобода выбора не ограниченна.

2.       Настройки слайдера – здесь Вы задаёте внешний вид слайдера: отступы, расстояния от внешних границ, тень, задний фон, номер графика, с которого начнется слайд-шоу (по умолчанию первый), цвет рамки, иконки для навигации и, самое главное, эффект перехода от фотографии к фотографии (стиль анимации / эффект).

 

Всего у Вас 5 эффектов на выбор:

  • Slide – фото меняются справа налево, с легким эффектом торможения;
  • Smooth – фото меняются справа налево, без эффекта торможения, плавно и легко;
  • Fade – фото замещают друг друга с эффектом растворения;
  • Swipe – фотографии переходят справа налево, эффектно приостанавливаясь и прыгая по краю;
  • Bounce – фотографии «постукиваются» о левый край при переходе и торможении.

 

Рекомендуется попробовать все эффекты в действии, дабы выбрать тот эффект, который на Ваш взгляд наиболее оптимально подходит к Вашему сайту и/или дизайну.

Не забывайте про «Сохранить изменения», после каждой сделанной замены.

 

3.       Настройки для использования – здесь ВЫ можете включить или отключить слайдер, задать разрешения для библиотеки, например, отключить подгружаемую библиотеку jQuery. Это действие имеет смысл в том случае, когда библиотека jQuery уже подключена к Вашему сайту.

 

С версии Wordpres 3.3 данная библиотека встроена в систему изначально. Многие современные темы для вордпресс также уже имеют подключенную библиотеку jQuery, и грубо говоря, двойное подключение может, во-первых, вызвать дополнительные конфликты. Во-вторых, привести к дополнительной нагрузке на базу данных и сервер.

 

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

 

Если Вы желаете отображать в слайдере фотографии и статьи с фотографиями из одной определённой категории, то здесь же у Вас есть возможность выбрать категорию и задать количество отображаемых записей. Рекомендуется 5 записей. Фотографии в данном случае добавляются путем добавления произвольных полей. Название поля: easing. Значение: прямой путь (url)к фотографии.

 

Кстати есть и другой вариант: Вы можете отображать в слайдере фотографии и графики сразу из нескольких категорий. Т.е. статья «А» из категории «Б» и наоборот, статья «Б» из категории «А» и т.д..  

Для этого выбираем в «настройках для использования», графа «Откуда берем фотографии для слайдера», «Все категории». Далее работаем через произвольные поля, название easing, значение – прямой путь к фото.

 

Добавляем слайдер в тему для WordPress

Теперь самое интересное: добавляем слайдер в любую тему для вордпресс.

В принципе, добавлять можно в любое место в теме или шаблоне. Ограничений никаких. Для этого добавляем следующий код туда, куда Вашей душе угодно:


Это примерно выглядит так:

Это может быть «шапка» и файл header.php, основная страница index.php или же подвал footer.php..

Если Вы используете одну из тем скаченных или полученных на заказ на сайте WPTheme.eu, то именно для этого случая весьма рекомендуется именно шапка сайта.

P.S.

Кстати тему слайдера (слайд-шоу)  для Вордпресс я уже затрагивал в статье «Создание слайд-шоу для Вордпресс»..

 

Короткая ссылка на эту запись для публикации в соцсетях и для друзей: http://wp-theme.eu/?p=1857

Будут вопросы — добро пожаловать в комментарии или на имейл.

Ваш РГ

16 комментариев: Создание слайд-шоу в Вордпресс. Часть III.

  • Спасибо всё расписали и это слайдшоу мне подошло!

    • Всегда пожалуйста! Рады помочь. Спасибо Вам за комментарий.
      РГ

      P.S.: покажите нам сайт, на котором слайдер работает? Был бы очень признателен.

  • РГ (к сожалению не знаю Вашего имени), доброе время суток!

    Подскажите пожалуйста: у меня стоит вордпресс 3.4.1, как вставить слайдшоу в виджет?

    С уважением,
    Анатолий

    • Анатолий, доброго времени суток!

      Меня зовут Резо, рад познакомиться!

    • Это слайдшоу в виджет можно вставить тем же путем, что я и описал в статье: используя код (см. выше). Не знаю какую вы используете тему и куда именно вы бы хотели слайдер вставить, но как вариант можно просто в файл sidebar.php или его производные. Но для этого нужен допуск через фтп и минимальные знания того, что Вы будете делать.

      Буду рад, если смог вам помочь.
      РГ 🙂

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

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

    • Самое главное есть результат!!! Я очень рад, что статья помогла.
      С наступающим Вас Новым годом и заходите еще.

      РГ

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

  • Подскажите, пожалуйста, в какое место файла header.php вставлять вышеупомянутый код. Я вставил в контейнер между
    Ничего не отображается.
    Что я неправильно сделал?
    Спасибо!

    • Попробуйте поставить в index.php до записи have_posts

      Если не получится скиньте ссылку на страницу, я помогу.
      РГ

  • Можно мне добавить ссылку на ваш сайт, на эту статью в мой блог?

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

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