Как создать слайдер на WordPress, с использованием Twitter Bootstrap

В данном уроке я расскажу вам, как с ипользованием Twitter Bootstrap создать автоматическую карусель(слайдер) на WordPress. В последнее время фреймворк Bootstrap стал очень популярен, он обладает огромным функционалом и не использовать его функции просто глупо. Конечно слайдер можно установить используя различные плагины, но если вы не хотите этого делать, данный урок для вас.

Основы

Мы будем использовать стандартную карусель Twitter Bootstrap, поэтому данный урок подойдет только тем, у кого шаблон использует данный фреймворк. Прочтите наш курс уроков в случае, если вы хотите создать шаблон для WordPress с использованием Twitter Bootstrap.

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

Вставляем код карусели

Для того чтобы вставить код карусели, определитесь где вы хотите ее выводить, например, чтобы вывести перед контентом на главной странице, перед выводом контента в файле index.php вставьте код:


<div id="myCarousel" class="carousel slide" data-ride="carousel">
 <!-- Indicators -->
 <ol class="carousel-indicators">
 <li data-target="#carousel-example-generic" data-slide-to="0"></li>
 <li data-target="#carousel-example-generic" data-slide-to="1"></li>
 <li data-target="#carousel-example-generic" data-slide-to="2"></li>
 </ol>

<!-- Wrapper for slides -->
 <div class="carousel-inner">
 <?php query_posts( 'meta_key=slide&showposts=3' ); ?>
 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<div class="item">
 <img src="<?php echo wp_get_attachment_image_src( get_post_thumbnail_id(), ‘custom-thumbnail‘); ?>" alt="<?php the_title(); ?>">
 <div class="carousel-caption">
 <h2><?php the_title(); ?></h2>
 </div>
 </div>

 <?php endwhile; endif; ?>
 <?php wp_reset_query(); ?>
 </div>

<!-- Controls -->
 <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
 <span class="glyphicon glyphicon-chevron-left"></span>
 </a>
 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
 <span class="glyphicon glyphicon-chevron-right"></span>
 </a>
</div>

Чтобы слайдер заработал, вам нужно выполнить еще пару шагов.

  1. В первую очередь, нужно создать отдельную миниатюру или использовать стандартную, в прошлых уроках я рассказывал, как создать миниатюру в WordPress. После чего в строке, где выводиться изображение, замените custom-thumbnail, на название вашей миниатюры.
  2. Следующим этапом, создаем дополнительное поле с названием slide, значение поля неважно, вы можете в него прописывать любые заметки, они нигде не будут видны.

Обратите внимание, слайдер будет выводить последние 3 записи(ниже о том как изменить количество слайдов), которые используют дополнительное поле slide. С помощью фильтра по дополнительному полю, вы сможете управлять слайдами, удаляя дополнительные поля.

Скорость прокрутки слайдера

Чтобы слайдер окончательно заработал, нужно в файле footer.php, либо после подключения jquery, вставить код:


<script>
jQuery(document).ready(function($){
 $("#myCarousel .carousel-indicators li:first").addClass("active");
 $("#myCarousel .carousel-inner .item:first").addClass("active");
 $("#myCarousel").carousel({
 interval: 4000
 })
});

</script>

Поле interval отвечает за время, через которое слайд перейдет к следующему.

Больше слайдов

Чтобы добавить еще слайды, вам нужно в начале кода слайдера (тот который вставляли в файл index.php), вставьте еще один пункт li, для этого копируем строчку:

</pre>
<pre><li data-target="#carousel-example-generic" data-slide-to="2"></li></pre>
<pre>

Вставляем скопированную строчку после самой себя. После чего, в атрибуте data-slide-to изменяем число на следующее, в данном случае на 3. Так как отсчет ведется с нуля, то 3 означает 4 слайда. Если хотите больше, проделываем данную манипуляцию несколько раз.

После данной манипуляции, в коде ниже в строке query_posts изменяем значение showposts= на нужное количество.

Внимание! Количество пунктов li в начале кода, должно соответствовать значению в showposts.

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

Если данная статью была вам полезна, либо просто понравилась, буду признателен и благодарен за лайки и репосты. Помните, каждый лайкт, мотивирует меня делиться с вами новым материалом, для меня это своеобразная плата :)

Хотите подобный функционал, верстку либо помощь в настройке вашего сайта?
Свяжитесь со мной

6 Комментария к “Как создать слайдер на WordPress, с использованием Twitter Bootstrap”

  • mk ·
    01.09.2014 в 16:04
    #

    при выводе слайдера на страницу не выводится миниатюра. firebug говорит что не найдено изображение

    • Admin ·
      01.09.2014 в 19:13
      #

      Скорее всего ошибка в строке изображения
      < ?php echo wp_get_attachment_image_src( get_post_thumbnail_id(), ‘custom-thumbnail‘); ?>
      Предполагаю что вы не создали миниатюру, или название миниатюры в коде и у вас разные.

  • mk ·
    02.09.2014 в 13:33
    #

    строка вот такая:

    <img src="” alt=””>

    • Admin ·
      25.09.2014 в 01:51
      #

      Посмотрите пожалуйста еще раз урок, сначала нужно создать миниатюру, потом при выводе в коде нужно указать название миниатюры аналогично созданному
      в уроке эта строка
      < ?php the_title(); ?>

  • Артем ·
    11.09.2015 в 02:09
    #

    Пишу шаблон, хочу прикрутить карусель, делаю все по инструкции, но фото не подгружается, посты отсортированные появляются, листаются и тд, а картинка не появляется. Помогите разобраться пожалуйста. В фунции все прописал, везде одинаковое название.. Актуальна ли инструкция для последней 3ей сборки бутсрапа и работает ли на wp4.3?

    • Admin ·
      01.10.2015 в 19:24
      #

      Возьмите карусель с 3 версии бутстрепа, и внедрите в нее код (функции) из данного урока. Должно работать.

  • Оставить отзыв

    (обязательно)

    (обязательно)


    Наши друзья
    - ARTtime - Блог о Photoshop и Дизайн
    - Блог о дизайне и арте
    Реклама