Видео: Как добавить слайдер в тему WordPress
По просьбам трудящихся написал статью про добавление слайдера в тему WordPress. Статья будет универсальной, т.е. на ее основе можно добавить слайдер в любую тему WP. Разбирать этот вопрос мы будем на примере темы Pinbin. Ссылка на тему и на все файлы из урока будет после статьи.
Это новый формат статей с видео. Особенно важно узнать, что понравилось в видео, а что нет. Своими мнениями делитесь в комментариях под этой статьей.
Внимание! Если вам дороги ваши нервы и время, то закажите сайт проффесионалам. Заказать можно здесь. Тык!
Приятного просмотра!
А для тех, кто любит читать, текстовая версия.
Подготовительные работы
Если вы не знаете основ JavaScript и не знакомы с библиотекой JQuery, то крайне советую вам почитать информацию в ссылках ниже:
Также советую почитать про PHP и основы программирования на WordPress. В этом вам поможет:
Прежде, чем начинать какое либо дело нужно предварительно ознакомиться с исходными материалами. У нас на руках имеется тема 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
Слайдер: ссылка и документация
Готовая тема: ссылка
Спасибо огромное за статью! Буду разбираться!)
По данному принципу, можно сайдбар добавить!? Создаем сайд бар в function.php. подключаем его в single.php. и подключаем стиль в style.css!?
Или нужно, что-то еще?
Да, сайдбар примерно так же добавляется. Только сайдбары нужно в function.php подключить и вывести в нужном месте его.
Здравствуйте, все сделал как написано но выводит только текст «jstyler SliderJS» . Что я сделал не так? Или может что то не подключил?
этот слайдер нельзя использовать везде.
например у меня тема greenive, и в ней нет папки js и вообще ничего похожего js
Это видео лишь пример, помогающий понять общий принцип. На его основе вы можете добавить любой слайдер к любой теме WordPress.
Здраствуйте! Меня интересует, как добавить настройки для слайдера, чтобы их можно было менять прямо из админки????
добрый день, очень нравиться ваши ролики по WP, хотелось бы увидеть как вы прикручиваете верстку HTML на cms WP, будем ждать с не терпением. спасибо еще раз за ваши уроки
Спасибо за Ваш отзыв!
Обязательно выпустим новые ролики. В том числе и про натяжку верстки на WP. Следите за новостями :)
Здравствуйте! Расскажите, пожалуйста, как добавить настройки для слайдера, чтобы их можно было менять прямо из админки!)))
В этом вам поможет плагин ACF. В нем и настройки для сайта добавить можно и для отдельной страницы. Вот тут старая версия моей статьи по этому плагину http://www.wp-book.ru/video-advanced-custom-fields-proizvolnye-polya-i-nastrojki-zapisi-v-wordpress-chast-1/
Новая статья уже пишется :)
Спасибо за ответ! Буду пробовать!
Подскажите, пожалуйста, как добавить слайдер в шаблон single.php, чтобы в каждом посте были свои картинки: в статье об окнах — слайдер с окнами, в статье о дверях — слайдер с дверьми и т.д.?
Используйте форматы записей http://www.wp-book.ru/formaty-zapisej-v-wordpress-segodnya-i-zavtra/
Добрый вечер! А вы не подскажете, каким образом поменять в этом слайдере кнопки со ссылками на слайд (были с номерами слайдов, а я хочу сделать с текстом) и еще сделать ссылки для каждых из картинок слайдов.
Буду очень благодарен за ответ)
Здравствуйте!
Чтобы сделать картинки ссылками оберните тег «img» в тег «a»
На счет кнопок текстом. Этот плагин такого не позволяет. Вам стоит посмотреть другие решения.
На этом все. Конечно, есть еще несколько вещей, которые можно улучшить в плагине. Например, добавить поддержку вариантов для расширенной настройки, которую может предложить FlexSlider, или добавление поддержки названий. Как было сказано, этот плагин дает вам все необходимое для создания действительно простой, легкой в управлении, легкой для вставки версии FlexSlider для WordPress!