【问题标题】：Making a php javascript slideshow in wordpress在 wordpress 中制作 php javascript 幻灯片
【发布时间】：2017-01-13 20:47:27
【问题描述】：

我正在迈出学习编程的第一步。我在互联网上做了一些课程，现在我在构建 Wordpress 儿童主题时继续从经验中学习。

问题是我正在制作图像幻灯片。我在 w3schools 中发现了这个伟大而简单的：http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_self。

真的很好，但是如果我想在 Wordpress 中使用它会有一些问题。

我有一个帖子类型模板，其中包含一些我使用高级自定义字段应用程序构建的字段。目前我有 10 个图像字段来制作幻灯片。

所以这意味着：

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>

<h2 class="w3-center">Manual Slideshow</h2>

<div class="w3-content" style="max-width:800px;position:relative">

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

<a class="w3-btn-floating" style="position:absolute;top:45%;left:0" onclick="plusDivs(-1)">❮</a>
<a class="w3-btn-floating" style="position:absolute;top:45%;right:0" onclick="plusDivs(1)">❯</a>

</div>

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

</body>
</html>

在 Wordpress 中变成这样：

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

<a class="homelink" href="http://localhost/wordpress/">Sarah Morris</a>

<?php get_footer(); ?>

现在的问题是我必须在所有帖子中上传 10 张图片。例如，如果有一天我只上传了 8 张图片，我会看到 8 张图片，但我也会看到两个空格，因为我没有使用其他图片字段。

在尝试了几天后，我发现我有两种选择：

1) 使用高级自定义字段插件的转发器字段。

2) 使用此代码：

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

中继器字段是一项高级功能。我不想为插件付费，我更喜欢自己学习如何制作，所以我决定使用第二个选项。

现在的问题是第二个选项不能正常工作。这不是我想要的：当我使用少于 10 张图片时制作没有空格的幻灯片。

我知道这段代码非常接近我想要实现的目标。你有什么建议吗？

【问题讨论】：

标签： javascript php html wordpress slideshow

【解决方案1】：

您可以隐藏空白字段，这里是link

所以你的 php 代码应该看起来像这样：

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

完整教程 - 使用默认 WP 26 主题

这里是如何使这项工作的建议 - 测试和工作 100%

导航到“自定义字段”
在“字段组”中创建一个新组并将其命名为“滑块”，例如
单击“+ 添加字段”按钮，您应该像这样设置您的字段
对要在滑块中显示的尽可能多的图像重复此操作
在“位置设置”中设置您希望滑块出现的条件，这是示例 - 这个出现在所有页面和帖子上
点击“发布”按钮，您的滑块就准备好了

页面模板代码

我建议您为此创建一个自定义页面模板，尽管这不是必需的

<?php
/**
 * Template Name: Example Template
 *
 *
 * @package WordPress
 * @subpackage Twenty_Sixteen
 * @since Twenty Sixteen 1.0
 */

get_header();
// get ACF values 
$image = get_field('image');
$image2 = get_field('image_2');
$image3 = get_field('image_3');
?>

<div id="primary" class="content-area" style="position:relative;">
  <main id="main" class="site-main" role="main">

  <?php  // 1st image
  if( !empty($image) ): ?>
    <div class="mySlides"><img style="width:100%;" src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" /></div>
  <?php endif; ?>   

 <?php  // 2nd image
 if( !empty($image2) ): ?>
 <div class="mySlides"><img style="width:100%" src="<?php echo $image2['url']; ?>" alt="<?php echo $image2['alt']; ?>" /></div>
 <?php endif; ?>

 <?php  // 3rd image
 if( !empty($image3) ): ?>
 <div class="mySlides"><img style="width:100%" src="<?php echo $image3['url']; ?>" alt="<?php echo $image3['alt']; ?>" /></div>
 <?php endif; ?>

 <a class="w3-btn-floating" style="position:absolute;top:45%;left:0" onclick="plusDivs(-1)">❮</a>
 <a class="w3-btn-floating" style="position:absolute;top:45%;right:0" onclick="plusDivs(1)">❯</a>


</main><!-- .site-main -->

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

<?php get_sidebar( 'content-bottom' ); ?>

或者另一个更简单的解决方案：

使用 php empty

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

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

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

首先尝试这样 - 使用您现有的代码

【讨论】：

使用此代码只会让我看到第一张图像叠加在第二张图像上。并且不要隐藏空字段。不过谢谢你，我会研究它并尝试理解它
您是否在 div class="mySlides" 之前为每个“the_field”重复了这个“if”条件？
还要检查最终的 html 错误，我可以看到你已经关闭了
，但是页面上的任何地方都没有打开
跨度>