Использование скрипта Nivo Slider для автоматического создания слайдера из изображений, добавленных в пост

Одним из самых популярных скриптов для вывода изображений в виде слайдера является Nivo Slider – на основе этого бесплатного скрипта создано множество плагинов, он часто используется в премиум-темах, скрипт имеет множество настроек. Если вы хотите, чтобы в постах, содержащих изображения, они автоматически показывались в виде слайдера, то можете использовать этот скрипт.

Для начала вам нужно скачать скрипт. Из скачанного вам потребуются только два файла:

1. jquery.nivo.slider.pack.js – jQuery-плагин
2. nivo-slider.css – CSS стили для оформления слайдера

Распакуйте их в папку используемой темы и подключите эти файлы, добавив в файл functions.php:

function nivo_scripts_and_styles() {
	wp_enqueue_style( 'nivocss', get_stylesheet_directory_uri() . '/nivo-slider.css' );
	wp_enqueue_script( 'jquery' );
	wp_enqueue_script( 'nivojs', get_stylesheet_directory_uri() . '/jquery.nivo.slider.pack.js', array('jquery'), null, true );
}

add_action( 'wp_enqueue_scripts', 'nivo_scripts_and_styles' );

Определите размер миниатюр, который вы будете использовать в слайдере. Для этого добавьте в файл functions.php:

add_image_size( 'sliderthumb', 960, 540, true );

Откройте файл single.php, добавьте в том месте, где вы хотите выводить слайдер, этот код:

 $post->ID,
	'post_type' => 'attachment',
	'orderby' => 'menu_order', // сортировка по порядку, установленному вами при закачке в блог 
	'order' => 'ASC',
	'numberposts' => 4, // максимальное количество изображений в слайдере
	'post_mime_type' => 'image'
);
if ( $images = get_children( $args ) ) {
	echo '
<div id="sliderbody" style="width: 960px; height: 540px;">
<div id="slider">'; foreach( $images as $image ) { echo wp_get_attachment_image( $image->ID, 'sliderthumb' ); } echo '</div>
</div>
'; } ?>

Если в посте есть изображения, то они будут выводится в слайдере размерами 960 на 540 пикселей. Если же изображений в посте нет, то ничего выводиться не будет.

Для активации скрипта откройте файл footer.php, найдите в нем закрывающийся тег [codei lang="css"][], и вставьте перед ним следующий код:

jQuery(function($){
	$('#slider').nivoSlider({
		effect: 'random',
		randomStart: false,  
		animSpeed: 600,    
		pauseTime: 3000,   
		directionNav: true,
		controlNav: true,  
		pauseOnHover: true,
		manualAdvance: false,
 		prevText: 'Назад',  
		nextText: 'Вперед',
	});
});

Подробнее о параметрах скрипта вы можете прочитать в полной документации на странице разработчиков. На этом все – скрипт работает без нашего вмешательства. Единственное, что от нас требуется – это не забывать добавлять стандартным способом изображения в посты.

[dl12 dlurl1="http://dev7studios.com/plugins/nivo-slider/" dlurl2="https://dl.dropboxusercontent.com/u/2027201/Wordpress/Scripts/nivoslider.zip" name="Nivo Slider"]