Одним из самых популярных скриптов для вывода изображений в виде слайдера является Nivo Slider – на основе этого бесплатного скрипта создано множество плагинов, он часто используется в премиум-темах, скрипт имеет множество настроек. Если вы хотите, чтобы в постах, содержащих изображения, они автоматически показывались в виде слайдера, то можете использовать этот скрипт.
Для начала вам нужно скачать скрипт. Из скачанного вам потребуются только два файла:
- jquery.nivo.slider.pack.js – jQuery-плагин
- 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"]
