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

Я достаточно много уже писал о разных плагинах-слайдерах wordpress, но часто задают вопросы о том, что делать если есть какой-то интересный слайдер, но нет для него плагина. Как сделать так, чтобы его вставить в шаблон и при этом можно было обновлять прямо с админки.

Способов очень много для этого, я опишу тот, которым пользуюсь чаще всего.

Что представляет собой обычно слайдер – это набор изображений и ссылки с этих изображений, иногда описание. Поэтому я чаще всего, чтобы интегрировать слайдер – использую обычный плагин для организации баннеров wp-bannerize.

В чем его преимущества? Он довольно прост в использовании, а главное позволяет управлять html кодом выводимых изображений и поддерживает прокрутку. Я не буду описывать все преимущества плагина, их довольно много и скажу, что это единственный из где-то 5 опробованных плагинов, который прост в использовании и не разу нt глючил ни на одном хостинге.

Давайте разберем на примере.

По просьбе одного комментатора – возьмем плагин orbit.

Для начала подключим все нужные скрипты к шаблону (предварительно конечно же залив его в папку темы)

<script src="<?php bloginfo('template_url'); ?>/js/jquery.min.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_url'); ?>/js/jquery.orbit.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/orbit.css">

Теперь смотрим саму верстку слайдера, судя по демке она такая

<div id="featured">
     <img src="overflow.jpg" alt="Overflow: Hidden No More" />
     <img src="captions.jpg"  alt="HTML Captions" />
     <img src="features.jpg" alt="and more features" />
</div>

Как видим просто слой с id=”featured” и в нем просто изображения без каких либо дополнительных слоев. Значит вставляем в шаблон туда, где вам нужно вывести слайдер сам слой и подключаем к нему скрипт, будет вот так

<script type="text/javascript">
     $(window).load(function() {
         $('#featured').orbit();
     });
</script>
<div id="featured"></div>

Пока оставим так, теперь нужно настроить плагин баннеров. Идем в настройки плагина и добавляем Add new – загружаем сюда изображение, и если нужно, то ссылку куда будет вести изображение. Также пишем group на латинице и что важно, все последующие картинки нужно будет загружать и прописывать им одну и ту же группу название которой предварительно где-то запишите.

Допустим группа будет slider.

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

<script type="text/javascript">
     $(window).load(function() {
         $('#featured').orbit();
     });
</script>
<div id="featured"><?php if(function_exists( 'wp_bannerize' )) wp_bannerize('group=slider&no_html_wrap'); ?></div>

Немного объяснений.

no_html_wrap-убирает все оформления, которые идут в плагине по умолчанию

group- это та группа, которой ранее мы присваивали изображения

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

Идем в settings плагина и если нужно убрать сбор статистики кликов, то убираем первые 2 галочки, также убирайте галочку с Support WP Bannerize, если не хотите, чтобы на вашем сайте появилась ссылка на сайт автора плагина. Некоторые дополнительные настройки еще доступны на вкладке tools. В нашем примере они не нужны, но если, допустим верстка самого слайдера имеет другой вид и сами изображения нужно обернуть в слой какой-то, то это можно указать в этих настройках в графе HTML Tag before banner и HTML Tag after banner:

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

Похожие статьи:

• Jquery валидация форм
• Image cms – хороший движок для дизайнера
• Плагин и скрипт выезжающей панели на jquery
• Несколько интересных jquery слайдеров
• Вставляем форму добавления статей на сайт – создаем социальную сеть на базе wordpress. Часть 3.