Javascript 如何使用WP生成自定义滑块？

我想知道如何编写我的WP模板文件，以控制WP仪表板，添加或删除滑块图像。下面是示例代码

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
    <li data-target="#myCarousel" data-slide-to="4"></li>
  </ol>
  <!-- slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="<?php echo get_template_directory_uri() . '/images/slides/slide-01.jpg' ?>" alt="01">
    </div>

    <div class="item">
      <img src="<?php echo get_template_directory_uri() . '/images/slides/slide-02.jpg' ?>" alt="02">
    </div>

    <div class="item">
      <img src="<?php echo get_template_directory_uri() . '/images/slides/slide-03.jpg' ?>" alt="03">
    </div>

    <div class="item">
      <img src="<?php echo get_template_directory_uri() . '/images/slides/slide-04.jpg' ?>" alt="04">
    </div>

    <div class="item">
      <img src="<?php echo get_template_directory_uri() . '/images/slides/slide-05.jpg' ?>" alt="05">
    </div>    
  </div>

“alt=”01“>
“alt=”02“>
“alt=”03“>
“alt=”04“>
“alt=”05“>

我希望能够允许未来的WP编辑器从WP仪表板添加/删除旋转木马中的图像（例如，自定义），而无需编辑模板文件本身。上面的动态代码类似“/files/moreFiles/slide XX.jpg”

我在这篇文章中找到了我的问题的答案，“HTML/Javascript：遍历本地（服务器端）文件夹的所有元素”

---

此线程更广泛地询问和回答了我的问题：“HTML/Javascript：迭代本地（服务器端）文件夹的所有元素”

编辑：以下全部

我从上面的答案中借用了一些代码，并将其包含在下面指定的位置

以下是在WP设置中生成自定义滑块的步骤

在图像文件夹中创建一个名为“滑块”的文件夹

创建以下文件“getimages.php”、“sliders custom.php”和“sliders.php”

将以下代码块添加到“header.php”文件中：

进入您的WP仪表板-->页面-->一些页面，以及一个名为：“自定义”滑块的“自定义字段”（这是上面在会话变量中引用的内容）

在“images/sliders/”文件夹中，添加与WP页面上“custom_sliders”字段名称相对应的文件夹。例如，如果“About”页面的“custom_field”值为“About”，则您可以在“images/sliders/”中添加一个名为“About”的文件夹，然后将图像放入其中

将以下代码块添加到您希望滑块所在的index.php，pages.php，single.php

<?php
  $key_value = get_post_meta( get_the_ID(), 'custom_sliders', true );
  $_SESSION['se_custom_sliders'] = strtolower($key_value);
  //If 'custom_sliders' is empty, do nothing ('generic' is the default in the session variable, therefore 'images/sliders/generic/' will populate)
    if ( ! empty( $key_value ) ) {
      //If a 'generic' does not exist, WP will load 'sliders.php'
      //this is just a WP function to get(else 'A', 'B') it's BassAckwards is all
      get_template_part( 'images/sliders/sliders', 'custom' );
    }
?>

接下来，设置“滑块custom.php”：

<?php
session_start();

$dir = strtolower($_SESSION['se_custom_sliders']);

//This array will hold all the image addresses
$result = array();

//Get all the files in the specified directory
$files = scandir($dir);

foreach($files as $file) {
  switch(ltrim(strstr($file, '.'), '.')) {
   //If the file is an image, add it to the array
   case "jpg": case "jpeg":case "png":case "gif":
   $result[] = $_SESSION['se_template_dir'] . "/images/sliders/" . $dir . "/" . $file;
  }    
}

$_SESSION = array();

if (ini_get("session.use_cookies")) {
  $params = session_get_cookie_params();
  setcookie(session_name(), '', time() - 42000,
  $params["path"], $params["domain"],
  $params["secure"], $params["httponly"]
  );
}

//Kill the session unless you have reason to retain the populatedvariables
session_destroy();

//Convert the array into JSON
$resultJson = json_encode($result);
//Output the JSON object
//This is what the AJAX request will see
echo($resultJson);
?>

<!-- All classes below are from BOOTSTRAP -->
<div id="carousel-container">
  <div class="container">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">

  <!-- Indicators -->
  <ol id="inject-slider-indicators" class="carousel-indicators">
    <!-- Slider Indicators are injected here, and paired with sliders below by numbers (0 - x) -->        
  </ol>

  <div id="build-sliders" class="carousel-inner" role="listbox">         
    <!-- Sliders are appended here via JS below -->       
 </div> 

  <!-- Left control -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <!-- Right control -->
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

在同一页面的HTML（上图）下方，添加以下JS：

<script>
//The div element to hold the sliders
var imageContainer = document.getElementById("build-sliders");
//Makes an asynch request, loading the getimages.php file
function callForImages() {
    //Create the request object
    var httpReq = (window.XMLHttpRequest)?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
    //When it loads,
    httpReq.onload = function() {
        //Convert the result back into JSON
        var result = JSON.parse(httpReq.responseText);
        //Show the images
        loadImages(result);
    }
    //Request the page
    try {
        httpReq.open("GET", <?php echo '"' . get_template_directory_uri() . '/images/sliders/getimages.php"'; ?>, true);
        httpReq.send(null);
    } catch(e) {
        console.log(e);
    }
}
//Generates the images and appends them to the container
function loadImages(images) {
    //For each image,
    for(var i = 0; i < images.length; i++) {
        //Make a new image element, for each image in folder
        //specified by the 'custom_sliders' variable            
        $('<img/>', {
            id: 'slider-' + i,    
            class:  'item',
            src: images[i],
            alt: 'slider image ' + i
        }).appendTo('#build-sliders');

        $('<li></li>', {
            id: '#slider-ind-' + i,
            'data-target': '#myCarousel',    
            'data-slide-to':  i
        }).appendTo('#inject-slider-indicators');          
    }      
  //Make the first slider 'active'
  $('#slider-0').addClass('active');
  //Make the first slider-indicator 'active'
  $('#slider-ind-0').addClass('active');      
}
callForImages();
</script>

//用于固定滑块的div元素
var imageContainer=document.getElementById（“构建滑块”）；
//发出异步请求，加载getimages.php文件
函数callForImages（）{
//创建请求对象
var httpReq=（window.XMLHttpRequest）？new XMLHttpRequest（）：new ActiveXObject（“Microsoft.XMLHTTP”）；
//当它加载时，
httpReq.onload=函数（）{
//将结果转换回JSON
var result=JSON.parse（httpReq.responseText）；
//显示图像
加载图像（结果）；
}
//请求页面
试一试{
httpReq.open（“GET”，true）；
httpReq.send（空）；
}捕获（e）{
控制台日志（e）；
}
}
//生成图像并将其附加到容器
函数加载图像（图像）{
//对于每个图像，
对于（var i=0；i”{
id:“#滑块ind-”+i，
“数据目标”：“myCarousel”，
“数据幻灯片到”：i
}).appendTo（“#注入滑块指示器”）；
}      
//将第一个滑块设置为“活动”
$（'#slider-0'）.addClass（'active'）；
//使第一个滑块指示器“激活”
$（'#slider-ind-0'）.addClass（'active'）；
}
callForImages（）；

---

非常感谢@Jeffrey_Sweeney在

上发布了一些代码来显示？因此，如果您想处理后端的图像，请提供从何处获得旋转木马的链接？