Я хочу циклически прокручивать карусель совы в WordPress. Я использовал этот код, но ничего не работает.

Вопрос или проблема

<div class="container">
   <div class="row">
     <div class="col-md-12">
        <div class="owl-carousel"  id="product-slider">
          <?php while ($loop->have_posts()): $loop->the_post();?>
              <div class="product">
            <?php $loop = new wp_Query(array(
           'post_type' => 'home_producten',
           'orderby' => 'post_id',
            'order' => 'ASC',
            ));?>
           <?php if (has_post_thumbnail()) { // проверка на изображение
            the_post_thumbnail();}?>
            <h3 class="title">
            <?php the_title();?>
            </h3>
            <p class="description">
            <?php the_content();?>
            </p>
            <a class="btn btn-warning text-uppercase" href="https://wordpress.stackexchange.com/questions/329815/<?php 
           the_permalink();?>">
            Смотрите больше
            </a>
         </div>
        <?php endwhile;?>
      </div>
   </div>

 </div>
 <!-- ==== КОНЕЦ КАРУСЕЛИ ===== -->

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="owl-carousel" id="product-slider">
        <?php $loop = new wp_Query(array(
           'post_type' => 'home_producten',
           'orderby' => 'ID',
            'order' => 'ASC',
        )); ?>
        <?php while ($loop->have_posts()): $loop->the_post(); ?>
        <div class="product">
          <?php if(has_post_thumbnail()){ the_post_thumbnail(); } ?>
          <h3 class="title">
            <?php the_title(); ?>
          </h3>
          <p class="description">
            <?php the_content(); ?>
          </p>
          <a class="btn btn-warning text-uppercase" href="https://wordpress.stackexchange.com/questions/329815/<?php the_permalink(); ?>"> Смотрите больше </a> </div>
        <?php endwhile;?>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
jQuery(document).ready(function () {
  jQuery("#product-slider").owlCarousel({
    loop: true,
    items: 3,
    itemsDesktop: [1000, 3],
    itemsDesktopSmall: [979, 2],
    itemsTablet: [768, 2],
    itemsMobile: [650, 1],
    margin: 10,
    nav: true,
    autoPlay: true,
    dots: false,
    autoHeight: false,
  });
});
</script>

.

Ответ или решение

Ваша проблема с созданием карусели на основе Owl Carousel в WordPress может быть связана с несколькими аспектами. Давайте внимательно рассмотрим предоставленный вами код, структуру вашего запроса и настройки JavaScript для успешной работы карусели.

1. Источник данных для карусели

Ваша начальная проблема заключается в том, что переменная $loop не инициализируется до того как вы начинаете цикл while. Это приводит к тому, что в первую итерацию данное значение не определено, и выполнить вывод постов не получается. Это видно на примере вашего первого кода:

<?php while ($loop->have_posts()): $loop->the_post();?>

Обратите внимание, что $loop должен быть инициализирован перед циклом. В исправленном коде, который вы привели, инициализация переменной $loop происходит раньше, что решает эту проблему. Полный исправленный фрагмент кода выглядит следующим образом:

<?php
$loop = new WP_Query(array(
    'post_type' => 'home_producten',
    'orderby' => 'ID',
    'order' => 'ASC',
));
while ($loop->have_posts()): $loop->the_post();
?>
<div class="product">
    <?php if (has_post_thumbnail()) { the_post_thumbnail(); } ?>
    <h3 class="title"><?php the_title(); ?></h3>
    <p class="description"><?php the_content(); ?></p>
    <a class="btn btn-warning text-uppercase" href="<?php the_permalink(); ?>">See More</a>
</div>
<?php endwhile; wp_reset_postdata(); ?>

2. Настройки Owl Carousel

Ваше JavaScript для инициализации Owl Carousel также нуждается в доработке. Убедитесь, что библиотека Owl Carousel и jQuery подключены на вашей странице. Вы можете добавить следующий код в файл вашего шаблона:

<script type="text/javascript">
jQuery(document).ready(function () {
    jQuery("#product-slider").owlCarousel({
        loop: true,
        items: 3,
        itemsDesktop: [1000, 3],
        itemsDesktopSmall: [979, 2],
        itemsTablet: [768, 2],
        itemsMobile: [650, 1],
        margin: 10,
        nav: true,
        autoplay: true,
        dots: false,
        autoHeight: false,
    });
});
</script>

3. Подключение необходимых файлов

Убедитесь, что вы корректно подключили стили и скрипты Owl Carousel в вашей теме. Обычно это делается в файле functions.php. Вот пример:

function enqueue_owl_carousel() {
    wp_enqueue_style('owl-carousel', get_template_directory_uri() . '/path/to/owl.carousel.min.css');
    wp_enqueue_script('jquery');
    wp_enqueue_script('owl-carousel', get_template_directory_uri() . '/path/to/owl.carousel.min.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_owl_carousel');

4. Проверка консоли браузера

Если по-прежнему ничего не отображается, откройте консоль вашего браузера (обычно F12) и проверьте наличие ошибок JavaScript. Это может быть полезным для диагностики проблем с инициализацией карусели.

Заключение

Убедитесь, что вы правильно инициализируете ваш запрос, используете корректные настройки для Owl Carousel и подключаете необходимые скрипты и стили. После исправлений представленный код должен корректно выводить карусель с вашими постами. Если вам нужно дополнительное объяснение или помощь, не стесняйтесь обращаться!