Создание кастомного слайдера в шаблоне страницы на основе BootStrap3 и плагина Advanced Custom Fields Pro

Существует огромное множество плагинов для WordPress, позволяющих вставить слайдер с картинками в запись или страницу. Для большинства популярных слайдеров (MetaSlider, Huge IT и т.д.) администрирование  происходит в отдельном разделе, т.е. вы в начале создаете слайдер, генерируете шорткод и затем вставляете его в текст или шаблон страницы. Настроить такой слайдер под уже нарисованный дизайн бывает очень непросто.

В данном примере я покажу, как используя модуль Carousel от Bootstrap и плагин Advanced Custom Fields создать собственный слайдер с уникальным дизайном и удобным администрированием в редактировании страницы.

Подготовка

  • Создайте дочернюю тему
  • Подключите Bootstrap
  • Создайте файл page-slider.php

1. Базовое наполнение page-slider.php

Для начала впишем в page-slider.php базовую информацию, так чтобы, WordPress понял, что это шаблон страницы, плюс мы могли выводить контент самой страницы.

<?php /* Template Name: Page with Slider */ get_header(); ?>



<div class="wrap">
  <?php while ( have_posts() ) : the_post(); ?>
    <?php the_content(); ?>
  <?php endwhile; ?>
</div>


 
<?php get_footer(); ?>

После этого, создайте новую страницу и выберите для нее шаблон Page with Slider, введите любой текст и нажмите Опубликовать:

Это позволит протестировать, что на данном этапе все сделано правильно.

2. Создаем карусель со статическим наполнением

Для начала идем по ссылке и копируем код с примером карусели, вставляем код в файл page-slider.php внутрь div с классом wrap, но перед циклом WordPress.

<?php /* Template Name: Page with Slider */ get_header(); ?>



<div class="wrap">

<!-- Код слайдера взятый с getBootstrap.com -->


<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  

<ol class="carousel-indicators">
    

<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></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" role="listbox">

<div class="item active">
      <img src="..." alt="...">
      

<div class="carousel-caption">
        ...
      </div>


    </div>


<div class="item">
      <img src="..." alt="...">
      

<div class="carousel-caption">
        ...
      </div>


    </div>


    ...
  </div>



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


<!-- Код слайдера взятый с getBootstrap.com (конец) -->
 


  <?php while ( have_posts() ) : the_post(); ?>
    <?php the_content(); ?>
  <?php endwhile; ?>
</div>


 
<?php get_footer(); ?>

Если Bootstrap подключен корректно к сайту, то на тестовой странице вы должны увидеть пустой слайдер с троеточиями и стрелочками:

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *