Как на Wordpress создать слайдер, с использованием Twitter Bootstrap
Опубликовано: 01.09.2018
В данном уроке я расскажу вам, как с ипользованием Twitter Bootstrap создать автоматическую карусель(слайдер) на WordPress. В последнее время фреймворк Bootstrap стал очень популярен, он обладает огромным функционалом и не использовать его функции просто глупо. Конечно слайдер можно установить используя различные плагины, но если вы не хотите этого делать, данный урок для вас.
Адаптивный СЛАЙДЕР с помощью Twitter Bootstrap | Уроки по Bootstrap 3
Основы
Мы будем использовать стандартную карусель 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>Чтобы слайдер заработал, вам нужно выполнить еще пару шагов.
В первую очередь, нужно создать отдельную миниатюру или использовать стандартную, в прошлых уроках я рассказывал, как создать миниатюру в WordPress . После чего в строке, где выводиться изображение, замените custom-thumbnail, на название вашей миниатюры. Следующим этапом, создаем дополнительное поле с названием 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.
На данном этапе, слайдер должен работать, если вдруг что то не получилось, задавайте вопросы в комментарии, с радостью помогу и отвечу.
Если данная статью была вам полезна, либо просто понравилась, буду признателен и благодарен за лайки и репосты. Помните, каждый лайкт, мотивирует меня делиться с вами новым материалом, для меня это своеобразная плата ????
Похожие записи
Хотите подобный функционал, верстку либо помощь в настройке вашего сайта?
Свяжитесь со мной