WordPress + Owl Carousel
Подключение файлов Owl Carousel в WordPress тему производится в файле functions.php
Предполагается, что в корне темы созданы папки /css и /js и записаны соответствующие файлы плагина.
название-темы/css
owl.carousel.min.css
owl.theme.default.min.css
название-темы/js
owl.carousel.min.js
Подключаем стили.
Файл owl.carousel.min.css подключается всегда. Файл owl.theme.default.min.css подключается если будет использоваться навигация.
// owl.carousel
wp_enqueue_style( 'owl-css', get_template_directory_uri().'/css/owl.carousel.min.css' );
wp_enqueue_style( 'owl-theme', get_template_directory_uri().'/css/owl.theme.default.min.css' );Подключаем js файл.
Важный момент – указать последний параметр array( ‘jquery’ ). Это указание WordPress загрузить owl.carousel после загрузки jQuery. Порядок загрузки важен.
wp_enqueue_script( 'owl-js', get_template_directory_uri() . '/js/owl.carousel.min.js', array( 'jquery' ) ); Слайдеры карусели могут состоять не только из фотографий или рисунков. Слайдеры могут представлять собой обычные html блоки.
Приводим кусок нашего front-page.php
Сама карусель помещается в <section class=”portfolio-slider owl-carousel owl-theme”>
Классы owl-carousel owl-theme нужны для работы скрипта. Класс owl-carousel обязательный. Класс owl-theme для включения навигации.
К классу portfolio-slider будем обращаться из скрипта. Если бы на одной страницы были бы несколько разных каруселей, нужно было бы объявить для каждой карусели свой уникальный класс.
Здесь мы собираем слайдеры карусели для портфолио так:
заведена рубрика portfolio
запись в ней состоит из заголовка и описания, к записи прикрепляется миниатюра
в цикле выбираем последние 6 записей и формируем html блок в отдельном <div class=”box-portfolio”>
Так будет выглядеть часть файла php в которой собираются слайдеры (пример портфолио этого сайта)
<h2>Наше портфолио</h2>
<section class="portfolio-slider owl-carousel owl-theme">
<?php
$posts = get_posts( array(
'category_name' => 'portfolio',
'posts_per_page' => 6
) );
if( $posts ):
// если есть записи
foreach( $posts as $post ):
setup_postdata( $post );
echo '<div class="box-portfolio">';
echo '<a href="'.get_permalink().'">';
$thumbnail = get_the_post_thumbnail_url( get_the_ID() ); // post-thumbnail, small, medium , large, full
echo '<img src="'.$thumbnail.'">';
echo '<hr>';
the_title( '<h6>', '</h6>' ); // выводим заголовок
echo '</a>';
echo '</div>'; // class="box-portfolio"
endforeach;
wp_reset_postdata();
endif;
?>
</section>Такой html этого блока получит браузер
на самом деле блоков будет 6, оставили 3 – экономим место
<h2>Наше портфолио</h2>
<section class="portfolio-slider owl-carousel owl-theme">
<div class="box-portfolio">
<a href="https://orata.ru/portfolio/orata-this-site/">
<img src="https://orata.ru/wp-content/uploads/orata.ru_.jpg">
<hr>
<h6>Orata — этот сайт</h6>
</a>
</div>
<div class="box-portfolio">
<a href="https://orata.ru/portfolio/nextbed/">
<img src="https://orata.ru/wp-content/uploads/nextbed.ru_.jpg">
<hr>
<h6>NextBed — промо сайт</h6>
</a>
</div>
<div class="box-portfolio">
<a href="https://orata.ru/portfolio/crovatti/">
<img src="https://orata.ru/wp-content/uploads/crovatti.ru_.jpg">
<hr>
<h6>Crovatti — интернет магазин</h6>
</a>
</div>
........
</section>Для того чтобы заработало, надо добавить js обработчик.
Добавляем его в общий js файл темы.
Можно добавить и отдельным файлом, только не забыть его загрузить в тему и не забыть сам jQuery
jQuery( function($) {
........
});$(document).ready(function(){
$('.portfolio-slider').owlCarousel( {
center: true, // центральный item получит дополнительный класс center, будет class="owl-item active center"
loop: true, // Зацикливаем слайдер
autoWidth:true, // обрезаются левая и правая часть, полная ширина только по центру
dots: false, // не показываем точки
nav: true, //
items: 3 // The number of items you want to see on the screen
// navText: ['налево', 'направо'],
} );
});Краткое описание схемы работы Owl Carousel – https://orata.ru/blog/owl-carousel-2/