不同格式的Wordpress循环

Question

我不想显示标准的帖子列表，而是想自定义布局并将帖子划分为不同的(引导(列。所以，第一个帖子是全宽的，下面第二个帖子是半宽的，在另一半我会再展示3个帖子。贝娄说会有三个职位在一排。

我这样划分它们：

<?php
// the query
$the_query = new WP_Query(array(
'category_name' => 'cat_name',
'post_status' => 'publish',
'posts_per_page' => 8
));
?>
<?php if ($the_query->have_posts()) : ?>
<?php $count = 0; ?>
<?php while ($the_query->have_posts()) : $the_query->the_post(); ?>
<?php $count++; ?>
<?php if ($count == 1) : ?>
<div class="first"><?php the_title(); ?></div>
<?php elseif ($count == 2) : ?>      
<div class="second"><?php the_title(); ?></div>
<?php elseif ($count >= 3 && $count <= 5) : ?>  
<div class="third"><?php the_title(); ?></div>  
<?php else : ?>
<div class="fourth"><?php the_title(); ?></div>  
<?php endif; ?>

<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php else : ?>
<p><?php __('No News'); ?></p>
<?php endif; ?>

但我不知道如何安排它们看起来像这样：

<div class="container">
<div class="row">
<div class="col-12">
<!-- first -->
</div>
</div>
<div class="row">
<div class="col-md-6">
<!-- second -->
</div>
<div class="col-md-6">
<!-- third - 3 posts one under another -->
</div>
</div>
<div class="row">
<div class="col-md-4">
<!-- fourth -->
</div>
<div class="col-md-4">
<!-- fourth -->
</div>
<div class="col-md-4">
<!-- fourth -->
</div>
</div>
</div>

任何帮助都意义重大！我想过使用多个带偏移量的查询，但我不知道这会不会对DB有太多查询(因为这只是一个类别的循环，我会有3个以上(

Answer 1

有多种方法可以做到这一点。我的第一个想法是在帖子中循环一次，将它们的标题(特色图片、永久链接、您需要的内容(保存到一个数组中，并通过它们的索引(从0开始(将它们放入标记中。

你可以尝试用数组保存所有的标题和永久链接：

<?php
$post_titles = [];
$post_permalinks = [];
$counter = 0;
?>
<?php while ($the_query->have_posts()) : $the_query->the_post(); ?>
$post_titles[$counter] = get_the_title($post->ID);
$post_permalinks[$counter] = get_the_permalink($post->ID);
$counter++;
<?php endwhile; ?>

然后在标记中调用数组的索引：

<div class="container">
<div class="row">
<div class="col-12">
<?php echo $post_titles[0] . "<br>" . $post_permalinks[0]; ?>
</div>
</div>
<div class="row">
<div class="col-md-6">
<?php echo $post_titles[1] . "<br>" . $post_permalinks[1]; ?>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-4">
<?php echo $post_titles[2] . "<br>" . $post_permalinks[2]; ?>
</div>
<div class="col-md-4">
<?php echo $post_titles[3] . "<br>" . $post_permalinks[3]; ?>
</div>
<div class="col-md-4">
<?php echo $post_titles[4] . "<br>" . $post_permalinks[4]; ?>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<?php echo $post_titles[5] . "<br>" . $post_permalinks[5]; ?>
</div>
<div class="col-md-4">
<?php echo $post_titles[6] . "<br>" . $post_permalinks[6]; ?>
</div>
<div class="col-md-4">
<?php echo $post_titles[7] . "<br>" . $post_permalinks[7]; ?>
</div>
</div>