Как установить слайдер на сайт?

Статья читается: 1 мин.

Приветствую всех на блоге zacompom.ru!

Хотите, чтобы у вас была собственная фотогалерея для сайта? Ваш сайт или блог работает на wordpress?

Если ваш ответ «Да!», то хочу рассказать вам один несложный способ, как установить к себе на сайт слайдер для wordpress.

Небольшое предисловие к установке галереи:

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

В своих постах я использую много объемных картинок — скриншотов для более ясного истолкования информации, порою сложной для понимания и восприятия начинающими пользователями компьютера и блоггерами, о процессах работы с различными программами, приложениями, плагинами и другим софтом.

Использование большого числа больших картинок характерно практически всем блогам моей ниши. Так вот размер картинок в постах иной раз совсем запредельный, от 600 до 1200 пикселей в ширину, что, конечно, не вмещается в границы статьи по ширине и вылазит за её пределы. Это можно наблюдать на моем блоге и сейчас, так как переделывать некоторые статьи уже очень проблематично.

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

Слайдер устанавливается на сайт с помощью плагина Image Horizontal Reel Scroll Slideshow. Кратко расскажу об особенностях этого плагина:

  1. он легко настраивается в специальном меню, в панели администрирования wordpress;
  2. поддерживается всеми популярными браузерами;
  3. при наведении курсора на картинку, она замедляется, поэтому её легко рассмотреть;
  4. существует возможность вставить гиперссылку в любое изображение фотогалереи для сайта, что позволит, например, создать отдельную страничку с описанием товара или услуги, на которую будет ссылаться определенная картинка;
  5. можно задать различный цвет фона прокрутки слайдера;
  6. есть возможность установить разный по скорости интервал между сменой картинок, а также очередность их демонстрации.

Итак, перейду к установке фотогалереи на сайт.

Как установить слайдер для wordpress?

Скачиваем к себе на компьютер zip-архив с плагином Image Horizontal Reel Scroll Slideshow.

Устанавливаем и активируем плагин через административную панель сайта. О том, как это сделать, читайте в статье «Как установить плагин на wordpress«.

В консоли управления wordpress заходим в меню Параметры, выбираем плагин Image Horizontal Reel Scroll Slideshow.

В появившемся меню мы можем добавлять новые изображения (как показано ниже на картинке №1 слайдера), настраивать слайдер (как показано на картинке №2), настраивать добавляемое изображение (как показано на картинке №3).

Screenshot_1
Screenshot_2
Screenshot_3

Для остановки картинки, достаточно навести на нее курсор. Рассмотреть картинку получше — кликните на неё левой кнопкой мышки.

Чтобы добавить новую группу картинок для трансляции (по умолчанию в плагине 12 групп, а это означает, что вы не сможете использовать слайдер с различными фотографиями более, чем в 12 статьях сайта), мы можем добавить новые группы в исходный html-код двух файлов плагина. Первый файл — image-horizontal-reel-scroll-slideshow/pages/image-management-add.php, второй — image-horizontal-reel-scroll-slideshow/pages/image-management-edit.php.

Внести в эти файлы изменения можно, пройдя во вкладку Плагины→Редактор, и в правом верхнем углу выбрав плагин Image Horizontal Reel Scroll Slideshow. Картинки кликабельны!

Затем перейти непосредственно к редактированию вышеуказанных файлов. Ищем коды, которые отвечают за размещение групп картинок в слайдере, копируем строчку с любой из групп, добавляем её ниже и меняем в строчке название группы на любое другое. Для примера я добавил группу «Slider», как это видно в скриншоте фотогалереи для wordpress на картинке №4 и картинке №5.

Screenshot_4
Screenshot_5

Не забываем сохранять изменения в редактируемых файлах!

Итак, чтобы добавить фотогалерею в статью сайта, после: а)настройки слайдера, где нужно указать размеры экрана фотогалереи (я поставил 600*400 пикселей), скорость и очередность прокрутки слайдов и т.п; б)добавления картинок в слайдер, где важно правильно прописать путь к файлам изображения, а также выбрать группу картинок для трансляции в фотогалерее.

Вставляем специальный код слайдера для wordpress в любое место записи, прямо в визуальный редактор. Этот код, вы можете выделить мышкой и скопировать. Либо просто набрать в тесте статьи следующую строчку, где вместо «Slider» укажите свою группу картинок:

[ihrss-gallery type="Slider" w="600" h="400" speed="1" bgcolor="#000000" gap="5" random="No Only"]

В этой строчке кода ihriss-gallery type — означает группу изображений для показа, w — задает ширину слайд-шоу фотогалереи, h — высоту слайд-шоу, speed — скорость прокрутки картинок в слайдере, bgcolor — цвет фона прокрутки слайдера, gap — расстояние в пикселях между транслируемыми картинками, random — очередность демонстрации слайдов. Важно не забыть прописывать этот код между двумя закрывающими скобками [ ].

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

Ну вот и всё! В этом посту я рассказал, как установить к себе на сайт слайдер для wordpress. Если возникают вопросы, обязательно спрашивайте! Может вам нравится какая-либо другая фотогалерея для сайта? Расскажите о ней, возможно она более функциональнее, чем Image Horizontal Reel Scroll Slideshow.

С вами был, ваш Юрич!

Вам понравилась статья?
плохохорошо (+1 баллов, 1 оценок)
Загрузка...
Обо мне
Юрич:
Занимаюсь созданием сайтов на ВордПресс более 5 лет. Работал в нескольких веб-студиях, да и сейчас работаю. Иногда подрабатываю на фрилансе, как на нашем так и на зарубежном. Везде зарекомендовал себя очень хорошо. Если нужен сайт на вордресс, шаблон для сайта или лендинг - не стесняйтесь - пишите. Рад буду помочь!