Видео: Как добавить слайдер в тему WordPress

По просьбам трудящихся написал статью про добавление слайдера в тему WordPress. Статья будет универсальной,  т.е. на ее основе можно добавить слайдер в любую тему WP. Разбирать этот вопрос мы будем на примере темы Pinbin.  Ссылка на тему и на все файлы из урока будет после статьи.
Это новый формат статей с видео. Особенно важно узнать, что понравилось в видео, а что нет. Своими мнениями делитесь в комментариях под этой статьей.
Внимание! Если вам дороги ваши нервы и время, то закажите сайт проффесионалам. Заказать можно здесь. Тык!
Приятного просмотра!

А для тех, кто любит читать, текстовая версия.

Подготовительные работы

Если вы не знаете основ JavaScript и не знакомы с библиотекой JQuery, то крайне советую вам почитать информацию в ссылках ниже:

  1. Современный учебник по JavaScript
  2. Вики по JQuery

Также советую почитать про PHP и основы программирования на WordPress. В этом вам поможет:

  1. Руководство по PHP
  2. Кодекс WordPress (англ. версия)
  3. Перевод основных функций WP на русский

Прежде, чем начинать какое либо дело нужно предварительно ознакомиться с исходными материалами. У нас на руках имеется тема Pinbin. И она адаптивная. А это значит, что подстраивается под различные разрешения экрана. В том, числе и мобильные устройства. Соответственно нам нужен адаптивный слайдер.
Мы конечно будет использовать готовые решения на JQuery.
В качестве слайдера я взял ResponsiveSlides. Он адаптивный и достаточно простой в установке. Ссылку на описание и документацию найдете после статьи. Это все, что нам нужно. Поехали.

Готовим структуру под слайдер

Слайдер будем выводить только на главной. Поэтому открываем файл index.php и перед началом вывода постов, т.е. перед строчкой <?php if (have_posts()) : ?> пишем HTML код:

<div class="slider_box">
  <ul id="slider">
    <li><img src="<?php bloginfo('template_directory') ?>/images/slide_1.jpg" alt="" /></li>
    <li><img src="<?php bloginfo('template_directory') ?>/images/slide_2.jpg" alt="" /></li>
    <li><img src="<?php bloginfo('template_directory') ?>/images/slide_3.jpg" alt="" /></li>
  </ul>
</div>

Разберемся, что к чему. Мы сделали основной элемент для слайдера и назвали его slider_box. Далее в него поместили элемент slider  для инициализации (подключения) слайдера. В слайдере списком выводится изображения. особое вниманию уделяю на код <?php bloginfo(‘template_directory’) ?>. Это php код. который подставляет директорию папки с темой, т.к. WP понимает абсолютные пути, этот код обязательно надо вставить перед путем к картинке и вообще любому файлу.

Подключаем слайдер

Теперь нужно подключить слайдер. В скачанном архиве со слайдером находим файл responsiveslides.min.js и копируем его в папку js. что находится в корневой папке темы.  Далее из папки demo/themes копируем файл themes.gif в папку images корневой папки темы.
Открываем файл header.php и перед закрывающим тегом </head> подключаем скрипт слайдера

 <script src="<?php bloginfo('template_directory') ?>/js/responsiveslides.min.js" type="text/javascript"></script>

Слайдер подключен, но пока не работает. Все потому, что мы его не инициализировали. Давайте сделаем это.
Идем в папку js темы и находим файл functions.js. Откроем его. И пропишем следующий код внутри jQuery(document).ready следующего содержания:

$(function() {
  $("#slider").responsiveSlides({
     pager: true,
     nav: true
  });
});

Мы подключили слайдер с навигацией и стрелками переключения.
В данном слайдере еще много настроек. Весь список вы можете найти в документации. Знание англ. языка приветствуется.

Подключаем стили

Все хорошо, но слайдер выглядит некрасиво. Оформить его, как нам нужно, поможет файл стилей. Находится он в корневой папке темы и называется style.css. Открываем его и в самый конец добавляем код:

.slider_box{
max-width:1500px;
position: relative;
}
#slider {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
#slider li {
-webkit-backface-visibility: hidden;
list-style-type:none;
position: absolute;
display: none;
width: 100%;
padding:0;
left: 0;
top: 0;
}
#slider li:first-child {
position: relative;
display: block;
float: left;
}
#slider img {
max-width:1500px;
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
.rslides_nav {
background: url(images/themes.gif) no-repeat scroll left top rgba(0, 0, 0, 0);
height: 61px;
left: 0;
margin-top: -45px;
opacity: 0.7;
overflow: hidden;
position: absolute;
text-decoration: none;
text-indent: -9999px;
top: 52%;
width: 38px;
z-index: 2;
}
.rslides_nav.next {
background-position: right top;
left: auto;
right: 0;
}
.rslides_tabs {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
box-shadow: 0 0 1px rgba(255, 255, 255, 0.3), 0 0 5px #000000 inset;
font-size: 18px;
list-style: none;
margin: 0 auto 50px;
width: 100%;
padding: 10px 0;
text-align: center;
width: 100%;
}
.rslides_tabs li:first-child {
margin-left: 0;
}
.rslides_tabs li {
display: inline;
float: none;
margin-right: 1px;
}
.rslides_tabs .rslides_here a {
background: none repeat scroll 0 0 rgba(255, 255, 255, 0.3);
color: #FFFFFF;
font-weight: bold;
}
.rslides_tabs a {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
display: inline;
height: auto;
line-height: 20px;
padding: 9px 20px;
width: auto;
text-decoration:none;
}

Этот css код визуально изменяет слайдер и делает его более привлекательным.

Заключение

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

Полезные ссылки

Тема Pinbin: с нашего сайтас wordpress.org

Слайдер: ссылка и документация

Готовая тема: ссылка

16 комментариев

  1. Владимир   /  08.02.2014, 15:03 Ответить

    Спасибо огромное за статью! Буду разбираться!)
    По данному принципу, можно сайдбар добавить!? Создаем сайд бар в function.php. подключаем его в single.php. и подключаем стиль в style.css!?
    Или нужно, что-то еще?

    • WP-Book   /  08.02.2014, 17:53 Ответить   /  http://www.wp-book.ru/

      Да, сайдбар примерно так же добавляется. Только сайдбары нужно в function.php подключить и вывести в нужном месте его.

  2. Дмитрий   /  06.11.2014, 15:29 Ответить

    Здравствуйте, все сделал как написано но выводит только текст «jstyler SliderJS» . Что я сделал не так? Или может что то не подключил?

  3. Алексей   /  06.01.2015, 00:06 Ответить

    этот слайдер нельзя использовать везде.
    например у меня тема greenive, и в ней нет папки js и вообще ничего похожего js

    • WP-Book   /  10.01.2015, 19:24 Ответить   /  http://www.wp-book.ru/

      Это видео лишь пример, помогающий понять общий принцип. На его основе вы можете добавить любой слайдер к любой теме WordPress.

  4. Антон   /  08.02.2015, 19:42 Ответить   /  http://godis1ove.tk

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

  5. kapko   /  06.03.2015, 13:38 Ответить

    добрый день, очень нравиться ваши ролики по WP, хотелось бы увидеть как вы прикручиваете верстку HTML на cms WP, будем ждать с не терпением. спасибо еще раз за ваши уроки

    • WP-Book   /  06.03.2015, 13:40 Ответить   /  http://www.wp-book.ru/

      Спасибо за Ваш отзыв!
      Обязательно выпустим новые ролики. В том числе и про натяжку верстки на WP. Следите за новостями :)

  6. Татьяна   /  21.05.2015, 06:31 Ответить

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

  7. Елена   /  19.06.2015, 19:31 Ответить

    Подскажите, пожалуйста, как добавить слайдер в шаблон single.php, чтобы в каждом посте были свои картинки: в статье об окнах — слайдер с окнами, в статье о дверях — слайдер с дверьми и т.д.?

  8. Andrew   /  30.08.2015, 20:44 Ответить

    Добрый вечер! А вы не подскажете, каким образом поменять в этом слайдере кнопки со ссылками на слайд (были с номерами слайдов, а я хочу сделать с текстом) и еще сделать ссылки для каждых из картинок слайдов.
    Буду очень благодарен за ответ)

    • WP-Book   /  31.08.2015, 12:41 Ответить   /  http://www.wp-book.ru/

      Здравствуйте!
      Чтобы сделать картинки ссылками оберните тег «img» в тег «a»
      На счет кнопок текстом. Этот плагин такого не позволяет. Вам стоит посмотреть другие решения.

  9. Анастасия   /  13.05.2017, 17:57 Ответить   /  https://gdepost.com

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

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

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