Я достаточно много уже писал о разных плагинах-слайдерах wordpress, но часто задают вопросы о том, что делать если есть какой-то интересный слайдер, но нет для него плагина. Как сделать так, чтобы его вставить в шаблон и при этом можно было обновлять прямо с админки.
Способов очень много для этого, я опишу тот, которым пользуюсь чаще всего.
Что представляет собой обычно слайдер — это набор изображений и ссылки с этих изображений, иногда описание. Поэтому я чаще всего, чтобы интегрировать слайдер — использую обычный плагин для организации баннеров .
В чем его преимущества? Он довольно прост в использовании, а главное позволяет управлять html кодом выводимых изображений и поддерживает прокрутку. Я не буду описывать все преимущества плагина, их довольно много и скажу, что это единственный из где-то 5 опробованных плагинов, который прост в использовании и не разу нt глючил ни на одном хостинге.
Давайте разберем на примере.
По просьбе одного комментатора — возьмем плагин .
<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 явно не запускается.. Крутится иконка подрузки фоток, но сами фотки не подгружаются. Хотя в ХТМЛ коде страницы ссылки на них правильные выдаются. И все ссылки на css и java-script есть.
Есть идеи почему?
есть много разных причин, дайте ссылку если есть — я гляну
Спасибо!
в доке орбита указано, что «make sure jQuery is attached first» — просто сделайте вызов jquery раньше, чем скрипт орбита и все будет работать
блин точно! дурная ошибка! заработало! Спасибо!
А не знаете, из за чего может возникать такая вот ошибка плагина: Orbit почему то думает что у меня там не 2 картинки, а 3 (вообще всегда на одну картинку больше чем на самом деле, по фатку, в коде есть..)
что-то помню и у меня такое было, но не помню как решил. Вообще с orbit у меня часто проблемы были, поэтому стараюсь его не использовать, благо есть куча других слайдеров
Здравствуйте. А Вы не знаете, по какой причине wp bannerize удваивает выводимое число показов баннеров?
к сожалению нет, я статистикой плагина не пользуюсь
Мне нравится плагин Easing Slider — легкие настройки, загрузка картинок прямо из редактора плагина. Переходов разных только нет, а так быстро работает и не грузит систему
Зачем заново подключать jquery, есть же wp_enqueue_script