需要将高级自定义字段与 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  /* 1. loop through the ACF rows first... */ ?>

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

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

   <?php  /* 2. then for each 'artist_slider' row, 

                create a new <li> and fill it with the details from the ACF row */ ?>

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

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

          <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>

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

    </li>

  <?php endwhile; ?>

<?php endif; ?>