这个帖子更广泛地提出并回答了我的问题：“HTML/Javascript：遍历本地（服务器端）文件夹的所有元素”
HTML/Javascript: Iterate through all elements of local (server-side) folder
编辑：全部在下面...
我从上面的答案中借用了一些代码，并将其包含在指定的下方。
这些是在 WP 设置中生成自定义滑块的步骤。
- 在您的图像文件夹中创建一个名为“滑块”的文件夹
- 创建以下文件 'getimages.php'、'sliders-custom.php' 和 'sliders.php'李>
-
将以下代码块添加到您的“header.php”文件中：
<?php
session_start();
$_SESSION['se_template_dir'] = get_template_directory_uri();
$_SESSION['se_custom_sliders'] = 'generic';
?>
进入你的 WP Dashboard-->Pages-->Some_Page，然后有一个名为：'custom_sliders'的“自定义字段”（这是上面会话变量中引用的内容）
在您的 'images/sliders/' 文件夹中，添加与 WP 页面上的 'custom_sliders' 字段名称相对应的文件夹。例如。如果您的“关于”页面有一个值为“about”的“custom_field”，那么您将在“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' );
}
?>
-
现在让我们设置“getimages.php”文件；此文件将扫描指定文件夹中的图像并填充一个 array 以发送到 'sliders-custom.php' 中的 JS 块：
<?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);
?>
-
接下来，设置'sliders-custom.php'：
<!-- 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>
非常感谢@Jeffrey_Sweeney 在https://stackoverflow.com/a/13595180/5636972 发帖