Wordpress 帖子使用引导程序以 Zigzag 格式显示答案

【问题标题】：Wordpress posts display in Zigzag format using bootstrapWordpress 帖子使用引导程序以 Zigzag 格式显示
【发布时间】：2018-06-15 02:23:52
【问题描述】：

我正在尝试以以下附件格式显示帖子。但是，帖子一个接一个地显示..

预期输出：

这是我的代码

<?php
  $type = 'post';
  $args=array('category__in'=> array(4), 'post_type' => $type, 'posts_per_page'=>3, 'order'=>'DESC');
  $my_query = new WP_Query($args);
  $i=1;
  while ($my_query->have_posts()) : $my_query->the_post(); ?>
    <div class="row">
      <div class="col-xs-12 col-sm-6" <?php if($i%2==1){?> style="float:left;" <?php }?> style="text-align: center;">
        <figure class="pro-innerpage-img">
        <?php the_post_thumbnail(); ?>
        </figure>
      </div>
      <div class="col-xs-12 col-sm-6">
        <div class="title_content">
        <h4><?php the_title();?></h4>
        <div><?php the_content(); ?></div>
      </div>
    </div>
  </div>
<?php
$i++;
endwhile;
wp_reset_query();
?>

当前输出截图

【问题讨论】：

分享当前输出的截图。
每个标签只能有一个样式属性
@VasimVanzara，附上我当前的输出截图。

标签： php wordpress bootstrap-4

【解决方案1】：

对于引导程序中的重新排序列，您可以使用 pull/push 概念（直到引导程序 4）。或 order- 概念（来自 bootstrap 4）。当您使用引导程序 4 时，请尝试以下代码：

<?php
  $type = 'post';
  $args=array('category__in'=> array(4), 'post_type' => $type, 'posts_per_page'=>3, 'order'=>'DESC');
  $my_query = new WP_Query($args);
  $i=1;
  while ($my_query->have_posts()) : $my_query->the_post(); ?>
    <div class="row">
      <div class="col-xs-12 col-sm-6 <?php if($i%2==1){ echo 'order-sm-2';} ?>">
        <figure class="pro-innerpage-img">
        <?php the_post_thumbnail(); ?>
        </figure>
      </div>
      <div class="col-xs-12 col-sm-6">
        <div class="title_content">
        <h4><?php the_title();?></h4>
        <div><?php the_content(); ?></div>
      </div>
    </div>
  </div>
<?php
$i++;
endwhile;
wp_reset_query();
?>

【讨论】：

很高兴帮助@kumar。 :)

【解决方案2】：

<?php
  $type = 'post';
  $args=array('category__in'=> array(4), 'post_type' => $type, 'posts_per_page'=>3, 'order'=>'DESC');
  $my_query = new WP_Query($args);
  $i=1;
  while ($my_query->have_posts()) : $my_query->the_post(); 
  if($i%2==0) {
  ?>
  <div class="row">
         <div class="col-xs-12 col-sm-6">
       <div class="title_content">
        <h4><?php the_title();?></h4>
        <div><?php the_content(); ?></div>
      </div>
      </div>
      <div class="col-xs-12 col-sm-6">

       <figure class="pro-innerpage-img">
        <?php the_post_thumbnail(); ?>
        </figure>
    </div>
  </div>

  <?php } else { ?>
    <div class="row">
         <div class="col-xs-12 col-sm-6">
        <figure class="pro-innerpage-img">
        <?php the_post_thumbnail(); ?>
        </figure>
      </div>
      <div class="col-xs-12 col-sm-6">
        <div class="title_content">
        <h4><?php the_title();?></h4>
        <div><?php the_content(); ?></div>
      </div>
    </div>
  </div>
  <?php } 
$i++;
endwhile;
wp_reset_query();
?>

【讨论】：

@kumar 如果此解决方案适合您，请将此答案标记为解决方案
您的代码适用于我的桌面。但是，当我们进入移动视图时，格式应该是 (Image, Title, Content) 和 (Image Title Content) 和 (Image Title Content)。您的代码在移动端显示（图片标题内容）和（标题内容图片）和（图片标题内容）
forealapp.com/new我已经使用了你的代码..请在手机中查看，希望你能理解......
@kumar 在下面试试我的回答，希望对你有帮助

【解决方案3】：

得到一个你已经交替执行代码的锯齿形布局。

<?php
  $type = 'post';
  $args=array('category__in'=> array(4), 'post_type' => $type, 'posts_per_page'=>3, 'order'=>'DESC');
  $my_query = new WP_Query($args);
  $i=1;
  while ($my_query->have_posts()) : $my_query->the_post(); ?>
    <div class="row">
        <?php if($i%2==1){?>
         <div class="col-xs-12 col-sm-6">
        <figure class="pro-innerpage-img">
        <?php the_post_thumbnail(); ?>
        </figure>
      </div>
      <div class="col-xs-12 col-sm-6">
        <div class="title_content">
        <h4><?php the_title();?></h4>
        <div><?php the_content(); ?></div>
      </div>
        </div>
      <?php } else {?>
          <div class="col-xs-12 col-sm-6">
            <div class="title_content">
            <h4><?php the_title();?></h4>
            <div><?php the_content(); ?></div>
          </div>
           <div class="col-xs-12 col-sm-6">
            <figure class="pro-innerpage-img">
            <?php the_post_thumbnail(); ?>
            </figure>
          </div>
            </div>
      <?php } ?>

  </div>
<?php
$i++;
endwhile;
wp_reset_query();
?>

【讨论】：

一样出来 :(
在while循环之前是变量$i=1还是$i=0..？
@kumar 试试 Jasbir 的回答。它会帮助你
Jasbir 的代码效果很好，但它在移动视图中显示不同。格式应该像图片、标题和内容一样依次出现
此处的设计目的相同。 :)

【解决方案4】：

使用纯 CSS，您可以将 float: left 和 float: right 交替应用于 figure元素，使用 row:nth-child(odd) 和 row:nth-child(even) 为父行相应地处理它们。

由于您还将在页面上的其他位置使用.row 类，因此您应该为那些用作帖子容器的行应用一个专用类。因此，如果 .post-container 是这些行的附加类，则 CSS 将是

.post-container:nth-child(odd) .pro-innerpage-img {
  float: left;
}
.post-container:nth-child(even) .pro-innerpage-img {
  float: right;
}

注意：在这种情况下，figure 元素应与内容位于同一容器中。

【讨论】：

【解决方案5】：

使用 CSS 设置内容样式：

.row:nth-child(odd) div figure { float: left;}
.row:nth-child(odd) div div { float: right;}
.row:nth-child(even) div figure { float: right;}
.row:nth-child(even) div div { float: left;}

【讨论】：

【解决方案6】：

试试这个，

<?php
  $type = 'post';
  $args=array('category__in'=> array(4), 'post_type' => $type, 'posts_per_page'=>3, 'order'=>'DESC');
  $my_query = new WP_Query($args); $i=1; ?>
     <div class="row">
        <?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
            <?php if($i%2==1){ $class = 'odd'; } else { $class = 'even'; } ?>
                <div class="col-sm-6 img <?php echo $class; ?>" style="text-align: center;">
                    <figure class="pro-innerpage-img">
                        <?php the_post_thumbnail(); ?>
                    </figure>
                </div>
                <div class="col-sm-6 desc <?php echo $class; ?>" >
                    <div class="title_content">
                        <h4><?php the_title();?></h4>
                        <div><?php the_content(); ?></div>
                    </div>
                </div>
                <div class="clearfix"></div>
        <?php $i++; endwhile; wp_reset_query(); ?>
  </div>

在 CSS 中，

.desc.odd {
    float: left;
}
.img.odd {
    float: right;
}

【讨论】：