高級自定義字段（ACF Pro）+平滑滑塊+ Wordpress

Question

我正在使用ACF Pro與Slick Slider制作滑塊輪播。 我可以將其與基本庫字段一起使用，但是當我嘗試顯示具有多個子字段的轉發器字段時，甚至無法顯示它。 我不確定自己在做什么錯，但是我已經玩了一段時間了，我覺得自己已經差不多一半了。

工作的PHP

<!-- Slider 1 -->


<?php
//Fields
//slider_portfolio = Gallery Field

  $images = get_field('slider_portfolio');

  if( $images ): ?>

  <div class="slider-for">

  <?php foreach( $images as $image ): ?>

  <div class="slick-container">
    <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
  </div>

  <?php endforeach; ?>

  </div>

<?php endif;  ?>

非工作PHP

這是我嘗試使用的版本。 當前是轉發器字段中的一個圖像子字段。

領域：

lider_image =字段（中繼器字段）

Portfolio_slider =子字段（圖像字段）

<!-- Slider 2 -->


        <?php
        //Image Slider
        //slider_image = field (repeater field)
        //portfolio_slider = subfield (image field)

        function agero_slider() {

          if( have_rows('slider_image') ):
              echo '<div class="slider-for">';
             // loop through the rows of data

          while ( have_rows('slider_image') ) : the_row();

             // display a sub field value
             //vars
             $image = get_sub_field('portfolio_slider');
          ?>

          <div><img src="<?php echo $image['url']; ?>"/></div>

        <?php

          endwhile;
            echo '</div>
             <div class="slider-nav">';
             // loop through the rows of data
          while ( have_rows('slider_image') ) : the_row();
             // display a sub field value
             //vars
          $image = get_sub_field('portfolio_slider');

        ?>

        <div><img src="<?php echo $image['url']; ?>"/></div>

        <?php
          endwhile;
            echo '</div>';
          else :
             // no rows found
          endif;
        }

        ?>

JS代碼 即使我需要在此基礎上，它也能正常工作。

jQuery(document).ready(function($){
$('.slider-for').slick({
   slidesToShow: 1,
   slidesToScroll: 1,
   dots: true,
   arrows: false,
   asNavFor: '.slider-for',
   focusOnSelect: true,
   fade: true,
   autoplay: false
  });
});

我不確定為什么第一個代碼有效，而第二個代碼卻無效。

相關鏈接：

ACF- https://www.advancedcustomfields.com/resources/code-examples/

光滑-http: //kenwheeler.github.io/slick/

我用作入門入門指南的教程-http : //wpbeaches.com/coding-a-slider-with-slick-and-acf-pro-in-wordpress/

如果有人可以建議我做錯了什么，或者建議一種具體的方法來顯示多幻燈片輪播中的多個自定義字段，其中文本字段隨每個幻燈片圖像而變化。 完成這項工作后，我可以通過將每個轉發器字段做成一張可以通過UI更新的幻燈片來擴展它。

我想也許我正在解決這個錯誤。 也許我需要在靈活的內容字段中添加所有內容？ 目前尚不確定，但是第二個示例似乎應該起作用。

Answer 1

領域：

lider_image =字段（中繼器字段）

Portfolio_slider =子字段（圖像字段）

ACF中繼器映像代碼：

<?php
if( have_rows('slider_image',get_the_ID()) ) {

    if( have_rows('slider_image',get_the_ID()) ):
    while ( have_rows('slider_image',get_the_ID()) ) : the_row();
        ?>
        <img src="<?php echo get_sub_field('portfolio_slider', get_the_ID()); ?>"/>
        <?php
    endwhile;
    endif;

} 
?>

Answer 2

好吧，我想通了！ 設置有些不同，但是效果很好。

PHP / HTML工作代碼

<section class="dev-slider-wrppr">
  <div class="dev-slider-row">
    <div class="slider-for">
      <?php if( have_rows('slider_content') ): ?>
        <?php while( have_rows('slider_content') ): the_row(); ?>
           <?php
            $slideimage = get_sub_field('slider_image');
            $slidetitle = get_sub_field('slider_title');
            $slidebdycpy = get_sub_field('slider_body_copy');
            ?>
            <div class="slick-container">
              <h4 class="info-title text-center"><?php echo $slidetitle; ?></h4>
              <p class="description"><?php echo $slidebdycpy; ?></p>
              <img src="<?php echo $slideimage['url']; ?>" alt="<?php echo $slideimage['alt']; ?>" />
            </div>
        <?php endwhile; ?>
    <?php endif; ?>
  </div>
</section>

JS工作代碼

jQuery(document).ready(function($){
$('.slider-for').slick({
   slidesToShow: 1,
   slidesToScroll: 1,
   dots: true,
   arrows: false,
   asNavFor: '.slider-for',
   focusOnSelect: true,
   fade: true,
   autoplay: false
   });
});

我的ACF設置

現在，這只是基本功能。 如果有人想使用它，他們仍然必須做一些額外的CSS和JS。