このスレッドより広く、私の質問をし、答え： 『HTML/Javascriptを：』ローカル（サーバ側）のフォルダのすべての要素を繰り返し処理 HTML/Javascript: Iterate through all elements of local (server-side) folder
EDIT：すべて下にあります...
私はいくつかのc上記の答えからodeを取り出し、指定された場所の下にそれを含めました。
これは、WP設定でカスタムスライダを生成する手順です。
- あなたのイメージにフォルダを作成しますが、 'スライダー'
- 作成し、以下のファイル 'getimages.php' 'スライダー-custom.php'、および 'sliders.php' をというフォルダ
あなたの 'header.phpの' ファイルに次のコードブロックを追加します。
<?php session_start(); $_SESSION['se_template_dir'] = get_template_directory_uri(); $_SESSION['se_custom_sliders'] = 'generic'; ?>>ページが - -
- はあなたのWPのダッシュボードに行く> Some_Page、および 'カスタムフィールド' と呼ば：'custom_sliders'
で（これはセッション変数で上に参照されているものです） 'images/sliders /'フォルダに、WPページの 'custom_sliders'フィールドの名前に対応するフォルダを追加します。例えば。 'About'ページに 'about'の値を持つ 'custom_field'がある場合は、 'about'という名前の 'images/sliders /'にフォルダを追加して画像を配置します。
は、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' ファイルをしてみましょう。このファイルは画像の指定されたフォルダをスキャンし、が、の配列が 'slider-custom'のJSブロックに送信されます。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);
?>
次に、' スライダー-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
表示するにはコードをいくつか表示してください。 – Mauro
あなたはバックエンドからの画像を扱いたいと思っています。 –