Question

我想展示5个帖子，第一个更大，并且还有另一个课程。

我发现了一些基本相同的帖子，但没有一个显示如何包装＆＃39;第一篇文章和＆＃39;包装＆＃39;所有其他帖子在一起。

我用html / css做了一个例子，看看它应该是什么样的。

希望有人可以帮助我。：）

<?php 
$args = array(
    'post_type' => 'services',
    'posts_per_page' => 5
);
$loop = new WP_Query($args);

while ($loop->have_posts()) : 
    $loop->the_post();

    if ($loop->current_post == 0) {
        echo '<div class="col-md-6">';
        the_post_thumbnail();
        the_title();
        echo '</div>';              
    }

    else {
        echo '<div class="col-md-6">';
        the_post_thumbnail();
        the_title();
        echo '</div>';
    }
endwhile; wp_reset_postdata(); ?>

＆＃13;

.col-md-6 {
  width: 50%;
  padding: 0 !important;
  float: left;
}

img {
  width: 100%;
  height: auto;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<section>
  	 <div class="col-md-6">
      <img src="http://placehold.it/100x100" alt="">
     </div>
  
	<div class="col-md-6">
	  <div class="col-md-6"><img src="http://placehold.it/100x100" alt=""></div>
      <div class="col-md-6"><img src="http://placehold.it/100x100" alt=""></div>
      <div class="col-md-6"><img src="http://placehold.it/100x100" alt=""></div>
      <div class="col-md-6"><img src="http://placehold.it/100x100" alt=""></div>
	</div>
</section>

＆＃13;

Answer 1

我已经按照我想要的方式解决了这个问题。

如果有人正在寻找类似的内容，请查看我的代码。

<section class="no-gutter">
<?php 
$args = array(
    'post_type' => 'services',
    'posts_per_page' => 5
);
$loop = new WP_Query($args);

    while ($loop->have_posts()) : 
        $loop->the_post(); ?>

       <?php if ($loop->current_post == 0) : ?>

            <!-- large -->
            <div class="col-md-6 large">
                <a href="<?php the_permalink(); ?>" title="<?php the_title();?>">
                    <div class="wrapper">
                        <?php the_post_thumbnail(); ?>
                        <span><?php the_title(); ?></span>
                    </div>
                </a>
            </div><!-- end large -->  

        <!-- small -->
        <div class="col-md-6">
            <?php else : ?>
                <div class="col-md-6">
                    <a href="<?php the_permalink(); ?>" title="<?php the_title();?>">
                        <div class="wrapper">
                            <?php the_post_thumbnail(); ?>
                            <span><?php the_title(); ?></span>
                        </div>
                    </a>
                </div>
            <?php endif; ?>

    <?php endwhile; wp_reset_postdata(); ?>
        </div><!-- end small -->

Wordpress循环 - 首先发布不同的包装

2 个答案: