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

这个线程更广泛地询问和回答了我的问题："HTML/Javascript:遍历本地(服务器端(文件夹的所有元素"HTML/Javascript：遍历本地(服务器端(文件夹的所有元素

编辑：以下全部。。。

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

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

1. 在图像文件夹中创建一个名为"滑块"的文件夹
2. 创建以下文件">getimages.php"、">滑块custom.php'"answers">>滑块.php">

3. 将以下代码块添加到">header.php"文件中：

   <?php session_start(); $_SESSION['se_template_dir'] = get_template_directory_uri(); $_SESSION['se_custom_sliders'] = 'generic'; ?>

4. 进入您的WP Dashboard-->Pages-->Some_Page，然后进入一个名为"自定义字段"的"自定义滑块"(这是上面在会话变量中引用的内容(

5. 在"images/loaders/"文件夹中，添加与WP页面上"custom_sliders"字段名称相对应的文件夹。例如，如果您的"About"页面有一个值为"About"的"custom_field"，则您会在"images/loaders/"中添加一个名为"About'"的文件夹，然后将图像放入其中。

6. 将以下代码块添加到您希望滑块所在的index.php、pages.phpingle.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' );
       }
   ?>
   

7. 现在，让我们设置'getimages.php'文件；该文件将扫描指定文件夹中的图像，并填充一个数组，以发送到'滑块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);
   ?>
   

8. 接下来，设置">滑块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