Как вставить jquery слайдер в wordpress, баннерокрутилка, плагин менеджер баннеров
Отборные материалы о дизайне, seo, wordpress

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

Я достаточно много уже писал о разных плагинах-слайдерах 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 код.

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


 

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



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


9643e5d7

  1. Максим:

    Спасибо что ответили! Буду вникать! )

  2. Максим:

    Все сделал как вы тут описываете, вроде все нормально, но jquery явно не запускается.. Крутится иконка подрузки фоток, но сами фотки не подгружаются. Хотя в ХТМЛ коде страницы ссылки на них правильные выдаются. И все ссылки на css и java-script есть.

    Есть идеи почему?

  3. Максим:

    А не знаете, из за чего может возникать такая вот ошибка плагина: Orbit почему то думает что у меня там не 2 картинки, а 3 (вообще всегда на одну картинку больше чем на самом деле, по фатку, в коде есть..)

    • ETNO:

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

  4. :

    Здравствуйте. А Вы не знаете, по какой причине wp bannerize удваивает выводимое число показов баннеров?

  5. :

    Мне нравится плагин Easing Slider — легкие настройки, загрузка картинок прямо из редактора плагина. Переходов разных только нет, а так быстро работает и не грузит систему

  6. Роман:

    Зачем заново подключать jquery, есть же wp_enqueue_script