Добавить owl carousel вместо миниатюр сообщений в цикле архива WordPress

Question

Я работаю над темой Wordpress, которая внедрила мета-поле галереи для контента каждого сообщения. Я хотел бы использовать изображения из этой галереи, чтобы добавить сова-карусель вместо миниатюры сообщения на странице архива.

Основная проблема заключается в том, что внутри моей петли я буду обматывать свою карусель в div div и давать ей идентификатор динамически, который будет связан с идентификатором текущей должности id="owl-archive-<?php the_ID();?>", поэтому он будет уникальным для каждого сообщения, которое появляется в архиве. Затем я должен вызвать динамически функцию сова-карусели в файле js для каждого из этих идентификаторов, и это моя проблема.

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();?> вместо #owl-archive

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

Answer 1

Мне удалось решить его самым простым способом. data attr.

<div data-archive="<?php the_ID();?>" id="owl-archive-<?php the_ID();?>" 

И тогда мой JS

$('.owl-carousel').each(function(){ 
    var the_id = $(this).data('archive') 
    $('#owl-archive-' + the_id).owlCarousel({ 
     navigation : false, 
     slideSpeed : 300, 
     singleItem:true, 
     autoPlay:false, 
     navigation:false, 
     pagination:false, 
     lazyLoad : true, 
     autoHeight : true 
    }); 
}); 

Answer 2

Вы можете использовать wp_localize_script(), эта функция используется для обработки PHP переменных в файле JS.

Вы можете прочитать и найти все, что вам нужно here

Надеются, что это помогает!