javascript - 在 WordPress 存档循环中添加 Owl Carousel 而不是帖子缩略图

Question

我正在开发一个 WordPress 主题，该主题为每个帖子的内容实现了一个图库元字段。我想使用此图库中的图像来添加 Owl Carousel ，而不是存档页面上的帖子缩略图。

主要问题是，在我的循环中，我将我的轮播包装在 owl div 中，并动态地给它一个 id，该 id 将与当前帖子的 id id="owl-archive-<?php the_ID();?>" 相关。因此，对于存档中出现的每个帖子来说，它都是唯一的。然后我还必须在我的 js 文件中为每个 id 动态调用 owl-carousel 函数，这就是我的问题。

if ( have_posts() ) {
 while ( have_posts() ) {
  the_post(); 
  //carousel starts
  <div id="owl-archive-<?php the_ID();?>" class="owl-carousel owl-theme">
    <?php foreach ($gallery_ids as $gallery_id): $gallery_image = wp_get_attachment_image_src($gallery_id,'full'); ?>
      <div class="item">
       <a class="noo-lightbox-item" data-lightbox-gallery="gallert_<?php the_ID()?>" href="<?php echo $gallery_image[0]?>"><?php echo wp_get_attachment_image( $gallery_id, 'full' ); ?></a>
      </div>
    <?php endforeach;?>
  </div>
 //carousel ends
 }
}

我如何从owl-archive-<?php the_ID();?>动态调用我的ID而不是#owl-archive

    $("#owl-archive").owlCarousel({
      navigation : false,
      slideSpeed : 300,
      paginationSpeed : 400,
      singleItem:true,
      autoPlay:true,
    });

Answer 1

您可以使用wp_localize_script()，该函数用于处理js文件中的php变量。

您可以阅读更多内容并找到您需要的所有内容 here

希望对你有帮助!