WordPressのアーカイブループで投稿のサムネイルの代わりにフクロウカルーセルを追加

Question

私は、各投稿のコンテンツのギャラリーメタフィールドを実装しているWordpressのテーマに取り組んでいます。このギャラリーの画像を使用して、アーカイブページに投稿のサムネイルの代わりにフクロウカルーセルを追加したいと思います。

主な問題は、ループ内で私のカルーセルをowl divにラップし、現在の投稿のID id="owl-archive-<?php the_ID();?>"に関連するIDを動的に与えるため、アーカイブに表示される各投稿ごとに一意になります。次に、これらのidのそれぞれについて、私のjsファイル内で動的に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 
} 
} 

どのように私はあなたがwp_localize_script()を使用することができます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

から私のID動的に呼び出すことができ、この関数は、JSファイルでPHPの変数を処理するために使用されます。

あなたはより多くのを読んで、あなたはhere

はそれが役に立てば幸い必要なものすべてを見つけることができます！