带有 wpdb 的 wordpress 图像滑块答案

【问题标题】：wordpress image slider with wpdb带有 wpdb 的 wordpress 图像滑块
【发布时间】：2017-01-06 03:44:15
【问题描述】：

我想要一个用于我的 wordpress 网站的图像滑块。所以我写了这段代码，并希望每个图像自动从表格中获取并将图像显示到幻灯片中。当我将此代码放入<P> Html 标记时。它显示了所有文件，但是当我把它放在<img scr=""> 的地方时，它就失败了。

<img src="<?php

global $wpdb;
$i = 1;
$options = '';
$states = $wpdb->get_col("SELECT image_path  FROM `slider_images`");

foreach ($states as $state) {
    $options .= "<option value='{$i}'>{$state}</option>";
    $i++;

}
echo $options;
?>" alt="Chania" width="460" height="345">

【问题讨论】：

你为什么要把<option>标签放在一张图片里？？完全没有意义......

标签： php css wordpress image slider

【解决方案1】：

这是图像滑块，我想在我的 wordpress 网站中使用它。我有外部图像表，所以我使用 $wpdb。我想，当我将图像保存在数据库中时，滑块会自动获取并制作新的图像幻灯片。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
    .carousel-inner > .item > img,
    .carousel-inner > .item > a > img {
      width: 100%;
      margin: auto;
    }
  </style>
</head>
<body>

<div class="container">
  <br>
  <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>

    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">

      <div class="item active">
        <img src="img/img_nature_wide.jpg" alt="Chania" width="460" height="345">
        <div class="carousel-caption">
          <h3>Chania</h3>
          <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
        </div>
      </div>

      <div class="item">
        <img src="img/img_fjords_wide.jpg" alt="Chania" width="460" height="345">
        <div class="carousel-caption">
          <h3>Chania</h3>
          <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
        </div>
      </div>

      <div class="item">
        <img src="img/img_mountains_wide.jpg" alt="Flower" width="460" height="345">
        <div class="carousel-caption">
          <h3>Flowers</h3>
          <p>Beatiful flowers in Kolymbari, Crete.</p>
        </div>
      </div>

      <!--<div class="item">-->
        <!--<img src="img_flower2.jpg" alt="Flower" width="460" height="345">-->
        <!--<div class="carousel-caption">-->
          <!--<h3>Flowers</h3>-->
          <!--<p>Beatiful flowers in Kolymbari, Crete.</p>-->
        <!--</div>-->
      <!--</div>-->

    </div>

    <!-- Left and right controls -->
    <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>
    <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>
</div>

</body>
</html>

【讨论】：

【解决方案2】：

你的意思是这样的

<?php
global $wpdb;
$options = '';
$states = $wpdb->get_col("SELECT image_path FROM `slider_images`");

$i = 1;
foreach ($states as $state => $state_value) {
    echo '<img class="image'.$i.'" src='.$state_value.' alt="Chania" width="460" height="345">';
    $i++;
}

因为在你的图片中添加<option>标签绝对没有意义......

我不知道你的查询应该返回什么，所以我猜应该没问题。

【讨论】：