Question

我试图利用wordpress的奇数/偶数功能来改变幻灯片元素中的内容位置，具体取决于它是否是＆＃34;奇数＆＃34;或者＆＃34;甚至＆＃34;，有点像example它翻转每张幻灯片，被授予，这还不是wordpress，但它是一个功能性的例子。可在http://165.227.182.166/查看有人可以帮助我用下面的PHP来解决这个问题！谢谢！

 <?php
   $slides = array();
   $counter = 0;
   $args = array('category_name' => 'slider', 'nopaging' => true, 'post_per_page'=> 5 );
   $query = new WP_Query($args);
   if($query->have_posts()):while($query->have_posts()):$query->the_post();
   $counter++;
   $temp = array();
   $temp['image'] = the_post_thumbnail_url();
   $temp['content'] = the_field('content');
   $temp['title'] = get_the_title();
   $temp['excerpt'] = the_field('excerpt');
   $slides[] = $temp;
 ?>

 <?php if(count($slides) > 0) { ?>

 <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->


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

     <?php $i=0; foreach($slides as $slide) { extract($slide); ?>
      <div class="item <?php if($i == 0) { ?>active<?php } ?>">
       <!-- <?php if($counter % 2== 0):?> -->

      <div class="col-md-6">
        <img src="<?php $image; ?>" class="img-responsive" />
      </div>
      <div class="col-md-6">
        <h2><?php $title; ?></h2>
        <h4><?php $excerpt; ?></h4>
        <p>
          <?php $content; ?>
        </p>
      </div>

    <?php else:?>

      <div class="col-md-6">
        <h2><?php $title; ?></h2>
        <h4><?php $excerpt; ?></h4>
        <p>
          <?php $content; ?>
        </p>
      </div>
      <div class="col-md-6">
        <img src="<?php $image; ?>" class="img-responsive" />
      </div>

     <?php endif;?>
  </div>
  <?php $i++; }} ?>
 </div>
 </div>
 <?php endwhile;endif;wp_reset_postdata();?>
 ?>

它看起来应该起作用（对我来说），但它并没有，我似乎无法弄明白。

Answer 1

我认为您通过完全复制单独的if/else语句的代码来解决问题。相反，您可以使用Bootstrap网格推送和拉取类。

此外，您在创建$slides数组时使用的方法将立即echo内容。您希望使用get_*等价物，但我会留给您。

<?php if ($slides): ?>

    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->       
        <ol class="carousel-indicators">
            <?php foreach ($slides as $i => $slide): ?>

                <li data-target="#myCarousel" data-slide-to="<?= $i ?>" class="<?= $i == 0 ? 'active' : '' ?>"></li>

            <?php endforeach ?>
        </ol>

        <?php foreach ($slides as $i => $slide): extract($slide); ?>

            <div class="item <?= $i == 0 ? 'active' : '' ?>">
                <div class="col-md-6 <?= $i % 2 ? '' : 'col-md-push-6' ?>">
                    <img src="<?= $image ?>" class="img-responsive">
                </div>

                <div class="col-md-6 <?= $i % 2 ? '' : 'col-md-pull-6' ?>">
                    <h2><?= $title ?></h2>
                    <h4><?= $excerpt ?></h4>
                    <p><?= $content ?></p>
                </div>
            </div>

        <?php endforeach ?>
    </div>

<?php endif ?>

Answer 2

你可以用css解决这个问题，只需要做一个foreach。像这样：

<?php if(count($slides) > 0) { ?>

 <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->


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

     <?php $i=0; foreach($slides as $slide) { extract($slide); ?>
      <div class="item <?php if($i == 0) { ?>active<?php } ?>">
       <!-- <?php if($counter % 2== 0):?> -->

      <div class="col-md-6">
        <img src="<?php $image; ?>" class="img-responsive" />
      </div>
      <div class="col-md-6">
        <h2><?php $title; ?></h2>
        <h4><?php $excerpt; ?></h4>
        <p>
          <?php $content; ?>
        </p>
      </div>

     <?php endif;?>

css有时候会像这样：

＆＃13;

.item{
  display:flex;
}

.item:nth-child(odd) .col-md-6{
  order:0;
}

.item:nth-child(even) .col-md-6:first-child{
  order:1;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carouselclass">
  <div class="item">
      <div class="col-md-6">
        <img src="https://via.placeholder.com/350x150" class="img responsive" />
      </div>
      <div class="col-md-6">
        <h2>Titulo</h2>
        <h4>Excerpt</h4>
        <p>Content</p>
      </div>
  </div>
  <div class="item">
      <div class="col-md-6">
        <img src="https://via.placeholder.com/350x150" class="img responsive" />
      </div>
      <div class="col-md-6">
        <h2>Titulo</h2>
        <h4>Excerpt</h4>
        <p>Content</p>
      </div>
  </div>
  <div class="item">
      <div class="col-md-6">
        <img src="https://via.placeholder.com/350x150" class="img responsive" />
      </div>
      <div class="col-md-6">
        <h2>Titulo</h2>
        <h4>Excerpt</h4>
        <p>Content</p>
      </div>
  </div>
</div>

＆＃13;

让我知道它是否适合你。

Wordpress奇数/偶数Bootstrap 3 Carousel

2 个答案: