需要将高级自定义字段与 Flexslider 2 结合使用的帮助

Question

我正在尝试使用 ACF 和 Flexslider 2 在 Wordpress 中生成一个基本滑块。我想在左侧显示文本，在右侧显示图像，就像我在所附屏幕截图中创建的排列一样。

我希望滑块以完全相同的格式轮换出 2-3 个艺术家简介，并以蓝色背景作为滑块容器。我使用 ACF 中继器成功创建了自定义字段，其中包含名称、标题、个人简介文本和图像的子字段。我遇到的问题是，创建中继器后，flexslider 根本不显示，而是我可以一次看到所有中继器字段，如下所示： theg8.com/about-the-art/

这是我的模板文件中的 PHP：

<li class="mason__grid-col col__full artist-highlight-section">

 <?php if( have_rows('artist_slider') ): ?>

  <div class="col-12 artist-info">

   <?php while( have_rows('artist_slider') ): the_row(); ?>

    <div class="artist-info-left col-lg-6 col-md-6 col-sm-12">

      <h2><?php the_sub_field('artist_name'); ?>

      </h2>

      <h3><?php the_sub_field('artist_title'); ?></h3>

      <p><?php the_sub_field('artist_bio'); ?></p>

     </div>

    <div class="artist-image-right col-lg-4 col-md-6 col-sm-12">

     <figure>

       <?php

         $image = get_sub_field('artist_image');

         $imageurl = $image['sizes']['slider'];

         ?>

       <li class="lazy"><img src="<?php echo $imageurl; ?>"></li>

      </figure>

     </div>

    <?php endwhile; ?>

   </div><!-- ends col-12 -->

 <?php endif; ?>

</li>

有人能帮忙吗？

Answer 1

您将所有滑块信息添加到一张幻灯片中。FlexSlider 对每张幻灯片使用单独的幻灯片<li>，但是您的 ACF 循环位于您的<li>...中，您需要将其移到外部并<li>为您想要的每张幻灯片创建一个新的。假设在添加 ACF 字段之前此 html 适用于您的滑块，您的代码应如下所示（请参阅注释中的 setps 1 和 2，并且不要忘记更改结束标记以匹配！）：<?php&nbsp; /* 1. loop through the ACF rows first... */ ?><?php if( have_rows('artist_slider') ): ?>&nbsp; <?php while( have_rows('artist_slider') ): the_row(); ?>&nbsp; &nbsp;<?php&nbsp; /* 2. then for each 'artist_slider' row,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; create a new <li> and fill it with the details from the ACF row */ ?>&nbsp; &nbsp;<li class="mason__grid-col col__full artist-highlight-section">&nbsp; &nbsp; &nbsp; <div class="col-12 artist-info">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="artist-info-left col-lg-6 col-md-6 col-sm-12">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2><?php the_sub_field('artist_name'); ?></h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3><?php the_sub_field('artist_title'); ?></h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p><?php the_sub_field('artist_bio'); ?></p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="artist-image-right col-lg-4 col-md-6 col-sm-12">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<figure>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<?php&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$image = get_sub_field('artist_image');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$imageurl = $image['sizes']['slider'];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<li class="lazy"><img src="<?php echo $imageurl; ?>"></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</figure>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp; &nbsp;</div><!-- ends col-12 -->&nbsp; &nbsp; </li>&nbsp; <?php endwhile; ?><?php endif; ?>