个人中心
gpt4 book ai didi

javascript - 在 wordpress 中制作 php javascript 幻灯片

转载 作者：行者123 更新时间：2023-11-27 23:24:15 25 4
gpt4 key购买 nike

我正在迈出学习编码的第一步。我在 Internet 上制作了一些类(class)，现在我在构建 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 张时制作没有空格的幻灯片。

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

最佳答案

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

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

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

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

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

  1. 导航到“自定义字段”
  2. 在“Field Groups”中创建一个新的，例如命名为“slider”
  3. 单击“+ 添加字段”按钮，您应该像这样设置您的字段 enter image description here
  4. 对您希望在 slider 中显示的所有图像重复此操作
  5. 在“位置设置”中设置您希望 slider 出现的条件，这是示例 - 这个出现在所有页面和帖子上 enter image description here
  6. 点击“发布”按钮，您的 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' ); ?>

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

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

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

关于javascript - 在 wordpress 中制作 php javascript 幻灯片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39348243/

25 4 0
文章推荐： html - 显示/隐藏 iframe 直到被选中
文章推荐： css font-weight 属性不适用于按钮
文章推荐： html - 如何从ios中的工具栏删除边框？
文章推荐： javascript - 如何将 Bootstrap 4 轮播与一组控件同步？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com