Question

我试图以下列附加格式显示帖子。但是，帖子一个接一个地显示..

预期输出：

这是我的代码

<?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();
?>

当前输出截图

Answer 1

获得Zigzag布局，您可以选择执行代码。

<?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();
?>

Answer 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();
?>

Answer 3

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

<?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();
?>

Answer 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元素应与内容位于同一容器中。

Answer 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;}

Answer 6

试试这个，

let activityController = UIActivityViewController(activityItems: sharingItems, applicationActivities: nil)

    activityController.excludedActivityTypes = [
        UIActivityType.assignToContact,
        UIActivityType.print,
        UIActivityType.addToReadingList,
        UIActivityType.saveToCameraRoll,
        UIActivityType.openInIBooks,
        UIActivityType(rawValue: "com.apple.reminders.RemindersEditorExtension"), 
        UIActivityType(rawValue: "com.apple.mobilenotes.SharingExtension"),
    ]

    present(activityController, animated: true, completion: nil)

CSS中的

，

<?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>

Wordpress帖子使用bootstrap以Zigzag格式显示

当前输出截图

6 个答案: