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

时间：2016-08-06 00:01:50

标签： javascript php css ajax wordpress

我想知道如何编写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>

我希望能够允许未来的WP编辑器从WP仪表板添加/删除轮播中的图像（例如自定义），而无需自己编辑模板文件。上面将是动态的代码将是＆＃39; /files/moreFiles/slide-XX.jpg'

我在这篇文章中找到了我的问题的答案，＆＃34; HTML / Javascript：迭代本地（服务器端）文件夹的所有元素＆＃34; HTML/Javascript: Iterate through all elements of local (server-side) folder

1 个答案:

答案 0 :(得分：0)

这个帖子更广泛地回答我的问题：“HTML / Javascript：遍历本地（服务器端）文件夹的所有元素” HTML/Javascript: Iterate through all elements of local (server-side) folder

编辑：全部低于......

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

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

  1. 在图像文件夹中创建名为“sliders”的文件夹
  2. 创建以下文件“ getimages.php ”，“ sliders-custom.php ”和“ sliders.php ”

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

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

  4. 进入您的WP控制台 - ＆gt;页面 - ＆gt; Some_Page，以及名为“'custom_sliders'的”自定义字段“（这是会话中上面引用的内容）变量）

  5. 在“images / sliders /”文件夹中，添加与WP页面上“custom_sliders”字段名称对应的文件夹。例如。如果您的“关于”页面的'custom_field'值为'about'，那么您可以在'images / sliders /'中添加名为'about'的文件夹，然后将图片放入其中。

  6. 将以下代码块添加到 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' );
    }
?>

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

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

    9. 在同一页面上，在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

    的帖子
相关问题
最新问题