javascript - 使用高级自定义字段插件和转发器字段在 Wordpress 中制作幻灯片

Question

我正在迈出学习编码的第一步。我在 Internet 上制作了一些类(class)，现在我决定在构建 Wordpress 子主题的同时继续学习经验。

问题是我想制作幻灯片，我在 w3schools 中找到了这个又酷又简单的 http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_self .

真不错!但是如果我想在Wordpress中实现它会有一些问题。

我制作了 10 个图像区域。每一个都是一个空间来放一张我的幻灯片图片。代码将是这样的:

<?php get_header(); ?>

<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";
  }
  x[slideIndex-1].style.display = "block";
}
</script>



<div class="mySlides"><?php the_field("image"); ?></div>
<div class="mySlides"><?php the_field("image_2"); ?></div>
<div class="mySlides"><?php the_field("image_3"); ?></div>
<div class="mySlides"><?php the_field("image_4"); ?></div>
<div class="mySlides"><?php the_field("image_5"); ?></div>
<div class="mySlides"><?php the_field("image_6"); ?></div>
<div class="mySlides"><?php the_field("image_7"); ?></div>
<div class="mySlides"><?php the_field("image_8"); ?></div>
<div class="mySlides"><?php the_field("image_9"); ?></div>
<div class="mySlides"><?php the_field("image_10"); ?></div>


<a class="home-btn-left" onclick="plusDivs(-1)">❮</a>
<a class="home-btn-right" onclick="plusDivs(1)">❯</a>


</div><!-- .content-area -->

<?php get_footer(); ?>

这有一个问题:我必须始终上传 10 张图片，因为如果我上传的图片少于 10 张，我将有空的自定义字段，这些字段将显示为空格。

因为这个问题，我决定制作一个转发器字段。因此，我可以根据需要创建多少个图像子字段，而不会出现此空白字段问题。

所以代码应该是这样的:

<?php

// check if the repeater field has rows of data
if( have_rows('image') ):

  // loop through the rows of data
    while ( have_rows('image') ) : the_row();

        // display a sub field value
       the_sub_field('subimage');

    endwhile;

else :

    // no rows found

endif;

?>

但现在的问题是:如何将 html 类应用于我的子字段？这样我就可以制作幻灯片了。

我试过了，但没用:

<?php

// check if the repeater field has rows of data
if( have_rows('image') ):

  // loop through the rows of data
    while ( have_rows('image') ) : the_row();

        // display a sub field value
      <div class="mySlides"> the_sub_field('subimage');</div>

    endwhile;

else :

    // no rows found

endif;

?>

你有什么建议吗？

Answer 1

首先，不要在这里使用the_sub_field()。 the_sub_field() 回显该字段。取而代之的是使用 get_sub_field。它检索值而不输出它。您的代码应如下所示:

    // check if the repeater field has rows of data
    if( have_rows('image') ):

      // loop through the rows of data
        while ( have_rows('image') ) : the_row();

          if( get_sub_field('subimage') ) :
            // display a sub field value
            echo '<div class="mySlides">' . get_sub_field('subimage') . '</div>';
          endif;

        endwhile;

    endif;

注意 if( get_sub_field('subimage') ) : 语句检查转发器字段中是否真的有值。如果是，它会回显与您的 get_sub_field('subimage') 函数链接的字符串。

看看here到高级示例。