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

Question

我正在学习编码的第一步。我在互联网上开了一些课程，现在我继续学习构建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张图像时制作没有空格的幻灯片。

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

Answer 1

您可以隐藏空白字段，此处为link

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

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

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

这里提出了如何使这项工作 - 经过测试和100％工作

的建议

导航至＆＃34;自定义字段＆＃34;
在＆＃34; Field Groups＆＃34;创建一个新的并命名为＆＃34; slider＆＃34;例如
点击＆＃34; +添加字段＆＃34;按钮，您应该像
对要在滑块中显示的图像重复此操作
在＆＃34;位置设置＆＃34;设置您希望滑块显示的条件，此处为示例 - 此页面显示在所有页面和帖子上
点击＆＃34;发布＆＃34;按钮和滑块准备就绪

页面模板代码

我建议你为此创建一个自定义页面模板，虽然没有必要

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

首先尝试使用现有代码

在wordpress中制作一个php javascript幻灯片

1 个答案:

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

页面模板代码

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