Интеграция jquery слайдера NivoSlider с CMS WordPress без плагинов

Начали мы урок с правок. Сделали меню во всю ширину экрана, а также доработали шапку. И для логотипа подключили уникальный шрифт.

А далее пойдет подробная пошаговая схема для внедрения слайдера, в соответствии с видеоуроком.

ШАГ 1

Скачиваем jQuery плагин NivoSlider на GitHub-е разработчика плагина: https://github.com/gilbitron/Nivo-Slider
Скачиваем архив по кнопке «Download ZIP»
Разархивируем.

ШАГ 2

Создаем папку «nivoslider» в папке с библиотеками вашей темы: themes/имя_вашей_темы/libs/
Копируем туда все файлы из архива.ШАГ3

Подключаем js и css — файлы в functions.php нашей темы:

//nivoslider styles
wp_enqueue_style( ‘nivo-style’, get_template_directory_uri(). ‘/libs/nivoslider/nivo-slider.css’, array(), » );
wp_enqueue_style( ‘nivo-style-default’, get_template_directory_uri(). ‘/libs/nivoslider/themes/default/default.css’, array(), » );

//script nivoslider
wp_enqueue_script( ‘nivo-script’, get_template_directory_uri() . ‘/libs/nivoslider/jquery.nivo.slider.pack.js’, array( ‘jquery’ ));

Обязательно подключайте все css файлы библиотек перед вашим кастомным файлом стилей style.css.
А также все js-скрипты подключайте перед вашим кастомным файлом скриптов common.js.
Для того чтобы ваши кастомные стили переопределяли все остальные, а ваши кастомные скрипты работали с уже подключенными скриптами.ШАГ4

Работаем с шаблоном для вывода страниц WordPress — page.php
Добавляем разметку для вывода слайдера в то место, где хотим чтобы выводился слайдер:

<section class=»nivoslider_section»>
<div class=»container»>
<div class=»row»>
<div class=»col-md-12″>
<?php get_template_part( ‘slider’ ); ?>
</div>
</div>
</div>
</section>

Здесь мы использовали функцию get_template_part( ‘slider’ );
То есть всю разметку для слайдера мы вывели в отдельный файл. Это удобно, т.к. если вы в будущем захотите добавить слайдер где-то еще, вы просто
воспользуетесь функцией get_template_part( ‘slider’ ); А также если нужно будет внести какие-то изменения в слайдер, вы будете вносить их только в slider.php, а не на каждой странице со слайдером.ШАГ5

Вам нужно создать этот файл slider.php и положить его в корень с вашей темой. Вот код этого файла:

<?php
global $post;
$args = array( ‘numberposts’ => -1, ‘post_type’ => ‘slider’, ‘orderby’ => ‘ID’, ‘order’ => ‘ASC’ );
$myposts = get_posts( $args );
$tmpl_url = get_bloginfo(‘template_url’);
?>

<div class=»slider-wrapper theme-default»>
<div class=»ribbon»></div>

<div id=»slider» class=»nivoSlider»>

<?php
foreach( $myposts as $post ){
setup_postdata($post);
$imgpath=get_post_meta($post->ID, ‘Путь к картинке относительно шаблона(например /images/nivoslider/slider0.jpg)’, true);
?>

<img src=»<?php echo $tmpl_url.$imgpath;?>» alt=»» />

<?php
}
wp_reset_postdata();
?>

</div>
</div>

Данная разметка уже выводит слайдер из записей WordPress. А точнее из нового типа записей Slider — который мы создадим на следующем шаге.

ШАГ 6

Создаем отдельный тип записей «Слайдер» — регистрируем новый тип записей в functions.php:

//slider nivo
/*****создание типа записи "Слайдер" ***********************/
// Slider
function create_slider() {
 register_post_type('slider', array(
 'labels' => array(
 'name'            =>  'Слайдер',
 'singular_name'   =>  'Слайдер',
 'add_new'         =>  'Добавить слайд',
 'add_new_item'    =>  'Добавить слайд',
 'edit'            =>  'Редактировать слайд',
 'edit_item'       =>  'Редактировать слайд',
 'new_item'        =>  'Новый слайд',
 'all_items'       =>  'Все слайды',
 'view'            =>  'Посмотреть',
 'view_item'       =>  'Посмотреть слайд',
 'search_items'    =>  'Искать слайды',
 'not_found'       =>  'Не найдено',
 ),
     'public' => true, // show in admin panel?
     'menu_position' => 5,
     'supports' => array( 'title', 'custom-fields'),
     'taxonomies' => array( '' ),
     'has_archive' => true,
     'capability_type' => 'post',
     'menu_icon'   => 'dashicons-admin-site',
     'rewrite' => array('slug' => 'slider'),
     ));
}
add_action( 'init', 'create_slider' );

Сохраняем, и в админке WordPress уже должен появиться новый тип записей Слайдер.
Реализуем добавление новых слайдов через произвольные поля.

ШАГ 7

Добавляем через админку новые слайды.
Для каждого слайда добавляем новое произвольное поле, назовем его ‘Путь к картинке относительно шаблона(например /images/nivoslider/slider0.jpg)’ — название должно совпадать с тем, что вы получаете значение в slider.php. Я назвал так, потому что сразу понятно за что отвечает поле,а также подсказка какую информацию в него вводить.
В качестве значения для произвольного поля — указываем /images/nivoslider/1.jpg
Создайте и опубликуйте столько слайдов, сколько вам нужно.

ШАГ 8

Не забудьте создать структуру папок /images/nivoslider/ внутри вашей темы и положить туда все ваши фотографии для слайдов.
Картинки, использованные в видеоуроке, можно скачать по следующей ссылке: https://yadi.sk/d/zHxxBAjOpGacH
Это стоковые бесплатные фотографии, которые вы можете использовать в своих проектах, или в качестве обоев для рабочего стола.

ШАГ 9

Осталось только добавить js-код для запуска слайдера в наш кастомный файл скриптов common.js:

//slider nivo js
	$('#slider').nivoSlider({
    effect: 'fade',                 // Specify sets like: 'fold,fade,sliceDown'
    slices: 15,                     // For slice animations
    boxCols: 8,                     // For box animations
    boxRows: 4,                     // For box animations
    animSpeed: 300,                 // Slide transition speed
    pauseTime: 4000,                 // How long each slide will show
    startSlide: 0,                     // Set starting Slide (0 index)
    directionNav: true,             // Next & Prev navigation
    controlNav: true,                 // 1,2,3... navigation
    controlNavThumbs: false,         // Use thumbnails for Control Nav
    pauseOnHover: true,             // Stop animation while hovering
    manualAdvance: false,             // Force manual transitions
    prevText: 'Prev',                 // Prev directionNav text
    nextText: 'Next',                 // Next directionNav text
    randomStart: false,             // Start on a random slide
    beforeChange: function(){},     // Triggers before a slide transition
    afterChange: function(){},         // Triggers after a slide transition
    slideshowEnd: function(){},     // Triggers after all slides have been shown
    lastSlide: function(){},         // Triggers when last slide is shown
    afterLoad: function(){}         // Triggers when slider has loaded
  });

Можете поиграться с этими настройками, подобрать необходимые эффекты для вашего слайдера.
Вот и все. Мы с вами установили слайдер на сайт и интегрировали его с WordPress!
Если у вас что-то не получилось, напишите в комментариях здесь или на ютубе.
А также обязательно подпишитесь на новые уроки на моем канале, и на новые статьи в блоге.