在wordpress中制作php javascript幻灯片_Javascript_Php_Html_Wordpress_Slideshow

在wordpress中制作php javascript幻灯片

javascript php html wordpress

在wordpress中制作php javascript幻灯片,javascript,php,html,wordpress,slideshow,Javascript,Php,Html,Wordpress,Slideshow,我正在迈出学习编码的第一步。我在互联网上做了一些课程，现在我在构建Wordpress儿童主题的过程中继续从中学习问题是我正在制作一个图像幻灯片。我在w3schools中发现了这个伟大而简单的例子：这真的很好，但是如果我想在Wordpress中使用它，会有一些问题我有一个帖子类型模板，其中包含一些我使用高级自定义字段应用程序构建的字段。目前，我有10个图像字段来制作幻灯片这意味着： <!DOCTYPE html> <html> <meta name="view

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

问题是我正在制作一个图像幻灯片。我在w3schools中发现了这个伟大而简单的例子：

这真的很好，但是如果我想在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>


手动幻灯片放映

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

经过几天的努力寻找解决方案，我发现我有两种选择：

1）使用高级自定义字段插件的repeater字段

2）使用此代码：

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

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

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

我知道这段代码离我想要实现的目标很近。您有什么建议吗？

您可以隐藏空字段，下面是

因此，您的php代码可能如下所示：

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

完整教程-使用默认WP十六主题下面是如何使这项工作得到100%的测试和工作的建议

导航到“自定义字段”

在“字段组”中创建一个新字段，并将其命名为“slider”

点击“+添加字段”按钮，你应该像这样设置你的字段

对要在滑块中显示的任意多个图像重复此操作

在“位置设置”中，设置您希望滑块出现的条件，下面是一个示例-此项显示在所有页面和帖子上

点击“发布”按钮，滑块就准备好了

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

<?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' ); ?>


“alt=”“/>
“alt=”“/>
“alt=”“/>

if（！empty（get_字段（'image'））：？>
如果（！empty（get_字段（'image_2'））：？>
如果（！empty（get_字段（'image_3'））：？>

首先尝试这样做-使用您现有的代码使用此代码只会让我看到叠加在第二个图像上的第一个图像。不要隐藏空字段。但是谢谢您，我会研究它并尝试理解它。在div class=“mySlides”之前，您是否对每个“the_field”重复此“if”条件“？还要检查最终的html错误，我可以看到您已关闭，但页面上任何地方都没有打开
<?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' ); ?>

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