Как сделать слайдер на wordpress? (Контент слайдер). При создание сайта разработчики часто сталкиваются со слайдерами и их размещением. Существует масса плагинов под WordPress используя которые можно разместить слайдер с картинками, с новостями и прочим материалом, но очень мало slider-плагинов, которые можно скачать и использовать под свой дизайн. В этом уроке я хочу показать как можно легко создать слайдер контента для своего сайта.
Для создания слайдер-контента я буду использовать bxslider скачать его можно с офицального сайта http://bxslider.com/ там же можно посмотреть все возможности, которыми он обладает.
Этапы которые нужно проделать для подключения
- Подключить скрипты и стили в файле header.php
- Вставить код слайдера в свой шаблон.
Первый этап
Подключение не много отличается от того что дано на официальном сайте у меня по их примеру не получилось подключить слайдер.
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> <!-- bxSlider Javascript file --> <script src="<?php echo get_template_directory_uri(); ?>/js/jquery.bxslider.min.js"></script> <!-- bxSlider CSS file --> <link href="<?php echo get_template_directory_uri(); ?>/css/jquery.bxslider.css" rel="stylesheet" /> <script type="text/javascript"> $(document).ready(function(){ $('.slider1').bxSlider({ slideWidth: 150,//ширина слайдера maxSlides: 5,//максимальное количество слайдов moveSlides: 1,//количество слайдов для смещения при анимации auto: true,//Автоматическая смена слайдов autoStart: true,//автоматический старт slideMargin: 10//отступ между слайдами }); }); </script>
Фрагмент кода:
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.bxslider.min.js"></script>
В этом фрагменте указываем путь до скриптов и стилей, а именно до jquery.bxslider.min.js и jquery.bxslider.css у меня файл jquery.bxslider.min.js лежит в папке js которая находится в папке с шаблоном поэтому я указал js в вашем случае это может быть любая другая папка и соответственно jquery.bxslider.css находится в папке css
Второй этап
Найдите то место в шаблоне где хотели бы выводить свой слайдер и прописываете следующий код
<!--BXSLIDER--> <div class="slider1"> <?php $args = array('cat'=>'1,2','showposts' => 10,'order' => 'DESC' ); query_posts($args); while ( have_posts() ) : the_post(); ?> <div class="slide"> <a href="<?php the_permalink() ?>"><?php the_post_thumbnail('thumbnail'); ?></a> </div> <?php endwhile; wp_reset_query(); ?> <?php $wp_query1 = $temp_query1; ?> </div>
Здесь все настройки по выводу постов берутся из настроек аргумента это стандартная настройка wordpress. В данном случае ‘showposts’ => 10 означает выводить 10 постов в слайдер, а ‘order’ => ‘DESC’ означает сортировку по убыванию. Сюда же можно добавить и выбор категории и дату вообщем все параметры которые можно использовать в запросе query_posts. К примеру чтобы еще добавить параметр категории можно добавить cat. В следующем коде я буду выбирать все посты из 5,6,7 категории.
$args = array('cat'=>'5,6,7','showposts' => 10,'order' => 'DESC' );
При необходимости можно также выводить заголовки постов для этого надо добавить
<!--BXSLIDER--> <div class="slider1"> <?php $args = array('cat'=>'1,2','showposts' => 10,'order' => 'DESC' ); query_posts($args); while ( have_posts() ) : the_post(); ?> <div class="slide"> <a href="<?php the_permalink() ?>"><?php the_title();?></a> <a href="<?php the_permalink() ?>"><?php the_post_thumbnail('thumbnail'); ?></a> </div> <?php endwhile; wp_reset_query(); ?> <?php $wp_query1 = $temp_query1; ?> </div>
Результат
ValueError thrown
Unknown format specifier "a"