Как сделать слайдер на wordpress? (Контент слайдер). При создание сайта разработчики часто сталкиваются со слайдерами и их размещением. Существует масса плагинов под WordPress используя которые можно разместить слайдер с картинками, с новостями и прочим материалом, но очень мало slider-плагинов, которые можно скачать и использовать под свой дизайн. В этом уроке я хочу показать как можно легко создать слайдер контента для своего сайта.

Для создания слайдер-контента я буду использовать bxslider скачать его можно с офицального сайта http://bxslider.com/ там же можно посмотреть все возможности, которыми он обладает.

Этапы которые нужно проделать для подключения

1. Подключить скрипты и стили в файле header.php
2. Вставить код слайдера в свой шаблон.

Первый этап

Подключение не много отличается от того что дано на официальном сайте у меня по их примеру не получилось подключить слайдер.

<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>

Результат