Привет читателям блога SEOBID! Наверняка каждый из вас видел в интернете сайты со слайдерами и хотел себе такой же. Ну, не такой, немного другой, но чтобы работал и не грузил сайт. Но, как известно, плагин, если он работает как слайдер wordpress , нагружает блог или сайт запросами, поэтому не все веб-мастера хотят устанавливать слайдер именно в исполнении плагина.

Популярны становятся слайдеры-карусели, реализованные при помощи php-кода, так называемые скрипты. Однако разобраться с многострочным кодом тоже не всем под силу, и слайдеры-скрипты тоже остаются в большинстве своем невостребованными.

Промежуточное звено — слайдер для wordpress комбинированного типа. То есть, есть плагин, который работает встраиванием кода в шаблон сайта. Таким образом, нагрузка на сайт и БД становится меньше, скрипт плагина вызывается быстрее, а результат – тот же. Сам плагин должен при этом загружаться не в директорию с плагинами /plugins, а в директорию того шаблона, который сейчас работает на сайте. Такое размещение также уменьшает количество запросов к базе данных.

Так что это за конструкция такая — комбинированный слайдер для вордпресс ? Например, распространенный плагин bxslider, который вы не найдете в репозитарии WordPress, но который можно и нужно скачать с официального сайта плагина — http://bxslider.com/. Естественно, плагин содержит все необходимое для организации и работы слайдера на любой странице (страницах) вашего блога, но его нужно закачать на сайт, подключить и настроить. Вот этим мы сегодня и займемся.

Весит слайдер вордпресс bxslider всего 157 кБ, и это уже большой плюс. Работает он на Jquery, а это означает, что нам необходимо будет подключить внешнюю библиотеку Jquery. Таким образом, запросы именно к вашему серверу сокращаются на глазах. Недостаток у этого плагина один – благодаря своей универсальности для каждого шаблона темы WordPress нужно будет подправлять кое-какие настройки в файле css и в основных настройках кода, который мы сейчас научимся вставлять в файлы шаблона сайта.

Всего вам придется вставить три фрагмента кода php. Первый и второй фрагменты – в файл header.php, в любое место между тэгами и . Первым фрагментом кода мы подключаем внешнюю библиотеку Jquery – без нее картинки будут стоять на месте, хотя отображаться все будет правильно.

Вот первый фрагмент:

/js/responsiveslides.min.js" type="text/javascript">

Слайдер подключен, но пока не работает. Все потому, что мы его не инициализировали. Давайте сделаем это.
Идем в папку 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 код визуально изменяет слайдер и делает его более привлекательным.

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

Слайдер будем создавать с помощью популярного плагина Meta Slider , а тестировать его работу — на теме Twenty Sixteen .

Создание слайдера

Итак, после установки и активации плагина в админ-панели появится новый пункт меню Meta Slider , при переходе по которому Вы попадете в основное окно слайдера.

Так как не создано ни одного слайда, тут присутствует только одна единственная кнопка с надписью “Создайте Ваше первое слайд-шоу ”. После ее нажатия откроется окно Вашего первого слайдера.

Итак, Вы создали пустой слайдер, который по умолчанию имеет название Новый слайдер . Если нужно его нужно переименовать, то это можно сделать, щелкнув по вкладке слева вверху и ввести новое имя.

Итак, слайдер создан, теперь нужно в него добавить слайды, что можно сделать, нажав кнопку справа Добавить слайд . После добавления всех фото, окно будет иметь следующий вид:

Перед публикацией слайдера на сайте можно ознакомится с параметрами, которые предлагает плагин.

Первое, о чем следует сказать, — это удаление какого-либо слайда. Для этого потребуется навести курсор на картинку слайда, где появится красный значок корзины, и нажать на нее.

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

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

Итак, после добавления всех нужных слайдов и настройки необходимо нажать кнопку Сохранить . Таким образом Вы создали слайдер фотографий.

Вывод слайдера на сайте

Теперь его нужно вывести на сайте. Для этого плагин предлагает два варианта: показать слайдер на отдельной странице или вставить специальный код в шаблон темы.

Чтобы показать на отдельной странице, первым делом необходимо создать страницу (Страницы -> Добавить новую ), в которой вставить специальный шорткод, который Вам предлагает плагин. Его можно увидеть в окне редактирования слайдера (в нашем случае это ).

После публикации страницы Вы сможете на ней увидеть Ваш слайдер.

Для вставки слайдера в тему Вашего сайта (напомним, что мы используем тему Twenty Sixteen ) необходимо сделать изменения в файлах темы. Для этого следует перейти Внешний вид -> Редактор , выбрать тему Twenty Sixteen и в списке доступных файлов темы найти Заголовок header.php .

Теперь в коде найти строчку