php - 使用 wordpress 将图像和标题输出到 Bootstrap 轮播中

标签 php jquery css wordpress twitter-bootstrap

我正在尝试使用 wordpress 将图像添加到我的 bootstrap carousel,我尝试了一个 foreach 循环,然后尝试将我想要的数组的每个部分输出到 carousel 的正确部分,但是它似乎不起作用.

这是我正在使用的代码

<?php

$args = array(
'post_type' => 'attachment',
'orderby' => 'menu_order',
'order' => ASC,
'numberposts' => -1,
'post_status' => null,
'post_parent' => $post->ID,
'exclude' => get_post_thumbnail_id()
);
$attachments = get_posts($args);

$imageURL = array();


?>  
<!-- Content -->
    <div class="container">
        <div class="row carousel-row">
            <div class="col-md-12">
                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                    <!-- Indicators -->
                    <ol class="carousel-indicators">
                        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                    </ol>

                    <!-- Wrapper for slides -->
                    <div class="carousel-inner"> 
                        <?php $i=0; foreach ($attachments as $imageURL) { ?> 
                        '<div class="item <?php if ($i == 0) { echo 'active'; } ?>" style="background-size:cover; background:url('<?php echo $imageURL[guid]; ?>') no-repeat center;">
                            <div class="carousel-caption">
                                <h4><?php echo $imageURL[post_excerpt];?></h4>
                            </div>
                        </div>
                        <?php $i++; } ?>
                    </div>
  </div>

最佳答案

在这一行的开头有一个额外的撇号:

'<div class="item <?php if ($i == 0)

它应该是:

<div class="item <?php if ($i == 0)

制作:

<div class="carousel-inner">
  <?php $i=0; foreach ($attachments as $imageURL) { ?>
  <div class="item <?php if ($i == 0) { echo 'active'; } ?>" style="background-size:cover; background:url('<?php echo $imageURL[guid]; ?>') no-repeat center;">
    <div class="carousel-caption">
      <h4><?php echo $imageURL[post_excerpt];?></h4>
    </div>
  </div>
  <?php $i++; } ?>
</div>

这是一个使用 php ternary 的改进版本运算符和快捷方式 而不是 :

<div class="carousel-inner">
  <?php $i=0; foreach ($attachments as $imageURL) { ?>
  <div class="item <?= ($i == 0 ? 'active' : '') ?>" style="background-size:cover; background:url('<?= $imageURL[guid] ?>') no-repeat center;">
    <div class="carousel-caption">
      <h4><?= $imageURL[post_excerpt] ?></h4>
    </div>
  </div>
  <?php $i++; } ?>
</div>

关于php - 使用 wordpress 将图像和标题输出到 Bootstrap 轮播中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26145422/

相关文章:

php - 图像不使用路径从数据库获取

jQuery ajax 仅在 IE 调试器打开时在 IE 中工作

html - 显示 : inline for HTML5 elements

html - Google reCaptcha 删除元素

PHP XML 实体编码问题

php - Memcached php 添加与设置性能

php - redis - 将多个值添加到列表并获取多个值

随机化填充底部的Javascript

javascript - 从javascript中的2个数组对象中获取不匹配的数据

html - 图片前的 CSS 定位元素