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

Опубликовано: 24.08.2018

По просьбам трудящихся написал статью про добавление слайдера в тему WordPress. Статья будет универсальной, т.е. на ее основе можно добавить слайдер в любую тему WP. Разбирать этот вопрос мы будем на примере темы Pinbin. Ссылка на тему и на все файлы из урока будет после статьи.

Это новый формат статей с видео. Особенно важно узнать, что понравилось в видео, а что нет. Своими мнениями делитесь в комментариях под этой статьей.

Внимание! Если вам дороги ваши нервы и время, то закажите сайт проффесионалам. Заказать можно здесь. Тык!

Приятного просмотра!

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

How to Create A Slider in WordPress

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

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

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

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

Руководство по PHP Кодекс WordPress (англ. версия) Перевод основных функций 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> подключаем скрипт слайдера

Слайдер подключен, но пока не работает. Все потому, что мы его не инициализировали. Давайте сделаем это.

Идем в папку 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

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

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