ACF+WP+SLICK幻灯片重复器幻灯片组PHP不显示

时间:2017-06-07 作者:rw1982

我正在使用ACF Pro制作一个带滑头的滑动旋转木马。我可以让它与基本的gallery字段一起工作,但当我试图显示包含多个子字段的repeater字段时,我甚至无法让它显示出来。我不确定我到底做错了什么,但我已经玩了一段时间了,我觉得我已经有一半了。

Working 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;  ?>
Non-Working PHP

这是我正在尝试的版本。它当前是中继器字段中的一个图像子字段。

字段:

slider\\u image=字段(中继器字段)
公文包\\u 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 Code This works, even though I need to build on it.

jQuery(document).ready(function($){
$(\'.slider-for\').slick({
   slidesToShow: 1,
   slidesToScroll: 1,
   dots: true,
   arrows: false,
   asNavFor: \'.slider-for\',
   focusOnSelect: true,
   fade: true,
   autoplay: false
  });
});
我不知道为什么第一个代码可以工作,但第二个代码不能工作。

相关链接:

Slick - http://kenwheeler.github.io/slick/

The Tutorial that I am using as a rough guide to get started - http://wpbeaches.com/coding-a-slider-with-slick-and-acf-pro-in-wordpress/

如果有人可以建议我做错了什么,或者可以建议一种具体的方法,在多张幻灯片旋转木马中显示多个自定义字段,其中文本字段随每张幻灯片图像的变化而变化。一旦我能做到这一点,我就可以通过使每个转发器字段成为一张幻灯片来扩展它,可以通过UI进行更新。

我想我可能做错了。我想知道我是否需要在一个灵活的内容字段或其他内容中添加所有内容?现在还不确定,但第二个中继器示例似乎应该可以工作。

1 个回复
最合适的回答,由SO网友:rw1982 整理而成

好吧,我想出来了!设置有点不同,但效果很好。

PHP / HTML Working Code

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

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

现在这只是基本功能。如果有人想使用它,他们仍然需要做一些额外的CSS&;JS。

结束
ACF+WP+SLICK幻灯片重复器幻灯片组PHP不显示 - 小码农CODE - 行之有效找到问题解决它

ACF+WP+SLICK幻灯片重复器幻灯片组PHP不显示

时间:2017-06-07 作者:rw1982

我正在使用ACF Pro制作一个带滑头的滑动旋转木马。我可以让它与基本的gallery字段一起工作,但当我试图显示包含多个子字段的repeater字段时,我甚至无法让它显示出来。我不确定我到底做错了什么,但我已经玩了一段时间了,我觉得我已经有一半了。

Working 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;  ?>
Non-Working PHP

这是我正在尝试的版本。它当前是中继器字段中的一个图像子字段。

字段:

slider\\u image=字段(中继器字段)
公文包\\u 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 Code This works, even though I need to build on it.

jQuery(document).ready(function($){
$(\'.slider-for\').slick({
   slidesToShow: 1,
   slidesToScroll: 1,
   dots: true,
   arrows: false,
   asNavFor: \'.slider-for\',
   focusOnSelect: true,
   fade: true,
   autoplay: false
  });
});
我不知道为什么第一个代码可以工作,但第二个代码不能工作。

相关链接:

Slick - http://kenwheeler.github.io/slick/

The Tutorial that I am using as a rough guide to get started - http://wpbeaches.com/coding-a-slider-with-slick-and-acf-pro-in-wordpress/

如果有人可以建议我做错了什么,或者可以建议一种具体的方法,在多张幻灯片旋转木马中显示多个自定义字段,其中文本字段随每张幻灯片图像的变化而变化。一旦我能做到这一点,我就可以通过使每个转发器字段成为一张幻灯片来扩展它,可以通过UI进行更新。

我想我可能做错了。我想知道我是否需要在一个灵活的内容字段或其他内容中添加所有内容?现在还不确定,但第二个中继器示例似乎应该可以工作。

1 个回复
最合适的回答,由SO网友:rw1982 整理而成

好吧,我想出来了!设置有点不同,但效果很好。

PHP / HTML Working Code

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

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

现在这只是基本功能。如果有人想使用它,他们仍然需要做一些额外的CSS&;JS。

相关推荐

无法在模板函数.php中使用IS_HOME

我试图在标题中加载一个滑块,但只在主页上加载。如果有帮助的话,我正在使用Ultralight模板。我正在尝试(在template functions.php中)执行以下操作:<?php if ( is_page( \'home\' ) ) : ?> dynamic_sidebar( \'Homepage Widget\' ); <?php endif; ?> 但这行不通。现在,通过快速的google,我似乎需要将请