Как добавить карусель в WordPress с помощью Owl Carousel 2 и ACF

На данный момент имеется большое количество статей по установки карусели на сайт, однако я постараюсь рассказать все довольно подробно, затронуть проблемы с которыми пришлось столкнуться.

Устанавливать я буду на сайт с админкой WordPress с готовой темой.

Для начала нам нужно установить плагин Advanced Custom Fields, теперь в меню админки появилась вкладка “Группы полей”. Заходим в группы полей и выбираем “Добавить”.

Нажимаем “добавить поле” и пишем название, например “Иконка”, в Типе поля выбираем “Изображение” (если вам нужно описание создаем ещё одно поле и выбираем “Текст”).

В отображении полей выбираем “Таксономия” = “Рубрика” (желательно, чтобы на сайте уже были готовые рубрики). И нажимаем “Опубликовать”. При редактировании рубрик у нас появилось поле “Иконка”, в ней можно предварительно загрузить фотографию для карусели.

Теперь нужно скачать сам плагин карусели, и установить его на сервер. Переходим на сайт разработчика плагина и нажимаем “Download”. Распаковываем файл и переходим OwlCarousel2-2.3.4\dist\assets. Копируем файл owl.carousel.min.css и owl.theme.default.min.css на сервер и добавляем их в header на сайт:

<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">

<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">

<script src="jquery.min.js"></script>

<script src="owlcarousel/owl.carousel.min.js"></script>

Теперь самое важное, добавляем php код на сайт в месте

<?
$categories = get_terms( array( 'taxonomy' => 'category' ) );
?>
<section class="hero-section">
<div class="row" id="service_content_section">
	<!-- карусель 1 -->
<div class="container">
	<div class="owl-carousel owl-theme">
<?
foreach($categories as $key => $val) {	?>
	<?
	$term = get_term( $val->term_id );
	$size_larger = "larger"; 
	?>
        <div class="post text-center wow flipInX animated" data-wow-delay=".5s">		
           <figure class="post-thumbnail">	
		<a href="<? echo get_category_link($val->term_id); ?> ">
		       <? echo get_field('ikonka','taxonomy_' .$val->term_id);?>
		       <? //echo $val->term_id; ?>
		</a>
           </figure>
	<!-- картинки карусели -->
           <div class="entry-header">
		<h4 class="entry-title">  
                     <a href="<? echo get_category_link($val->term_id); ?>">
		     <? echo $val->name; ?></a>
		</h4>
           </div>
           <div class="entry-content">
	       <p><img src="<? 
               echo get_field('opisanie',$term);
                echo wp_get_attachment_image_url(get_term_meta( $val->term_id, 'ikonka', true ), $size);
	       ?>">
	       </p>
            </div>
   	</div>
	<?
	} 
	?>
<!-- foreach end -->
     </div> <!-- end owl -->	
</div>
</div>
</section>

После этого создаем новый js файл на сервере, например scripts.js и добавляем его на сервер в footer:

<script type='text/javascript'src='https://it1.space/wpcontent/themes/honeypress/owl.car/scripts.js' ></script>

По инструкции разработчика нам нужно просто добавить этот код для работы карусели:

$(document).ready(function(){
  $(".owl-carousel").owlCarousel();
});

Однако у меня ничего не работало, и помогло только добавление приставки jQuery, вместо $ вначале:

jQuery(document).ready(function($) {
$('.owl-carousel').owlCarousel({
});

На этом этапе карусель уже работает, можно заняться стилями. Карусель ровно села на сайт, поэтому осталось поменять только стандартные стрелки перелистывания.

На этом коде .owl-carousel это основная карусель, а .owl-prev, .owl-next это стрелка влево и вправо.

<style>
	.owl-carousel{
	height: 150px;
	}
	.owl-prev, .owl-next {
  	background-repeat: no-repeat;
  	background-size: 100% 100%;
  	display: block;
  	cursor: pointer;
  	width: 32px;
  	height: 32px;
  	text-indent: -99999px;
  	position: absolute;
 	top: calc(50% - 16px);
	}
	.owl-prev{
	background-image: url(/wp-content/uploads/2022/09/left1.png);
	}
	.owl-next {
	background-image: url(/wp-content/uploads/2022/09/right1.png);
	} 
</style>

В итоге получилась вот такая карусель для сайта.