javascript - 在 Wordpress 中制作 javascript 幻灯片

Question

我正在迈出学习编码的第一步。我在 Internet 上制作了一些关于 css、html、php、javascript 和 MySql 的类(class)。现在我决定在构建 Wordpress 子主题时继续从经验中学习。

问题是我正在根据 W3schools 的这个示例制作图像 slider http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_self .这是一个了不起的例子，但现在我在 Wordpress 中使用它时遇到了一些问题。

在示例中，他们提出了 4 张这样的图像:

<img class="mySlides" src="img_fjords.jpg" style="width:100%">
<img class="mySlides" src="img_lights.jpg" style="width:100%">
<img class="mySlides" src="img_mountains.jpg" style="width:100%">
<img class="mySlides" src="img_forest.jpg" style="width:100%">

在 Wordpress 中，我有一个包含 10 个图像字段的帖子类型。它是这样的:

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

使用这个系统，我的问题是每次发帖时我必须至少上传 10 张图片。

例如，如果我上传 7 张图片，它将有 3 个空白区域，因为我有 10 个字段。所以我会在我的导航中看到的是:

image_1 > image_2 > image_3 > image_4 > image_5 > image_6 > image_7 > image_8(空白)> image_9(空白)> image_10(空白) )> image_1

有没有办法只查看那些包含图像的字段？像这样我没有义务每次上传 10 张图片。因为我有一个帖子类型，所以每次我想发帖时不会有 10 张图片。

你有什么推荐吗？

Answer 1

你只需要检查它是否返回一个值:

<?php if(get_field("image") != ""): ?>
        <div class="mySlides"><?php the_field("image"); ?></div>
<?php endif; ?>

但如评论中所述，转发器/图库控件可能是更好的选择。