Question

我正在研究一个Wordpress主题，该主题为每个帖子的内容实现了一个画廊元字段。我想使用此图库中的图像在存档页面上添加猫头鹰轮播而不是帖子的缩略图。

主要的问题是，在我的循环中，我将把我的轮播包裹在owl div中并动态给它一个与当前帖子的id id="owl-archive-<?php the_ID();?>"相关的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();?>代替#owl-archive

动态调用我的ID

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

Answer 1

你可以使用wp_localize_script()，这个函数用来处理js文件中的php变量。

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

希望它有所帮助！

Answer 2

我设法以最简单的方式解决它。 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
    });
});

在WordPress存档循环中添加猫头鹰轮播而不是帖子缩略图

2 个答案: