时间戳

首页 > 解决方案 > 将 Wordpress 帖子加载到多个 DIV（列）中

php - 将 Wordpress 帖子加载到多个 DIV（列）中

问题描述

我正在尝试将所有 Wordpress 帖子加载到三个不同的 Div 中，

像这样

<div class="row">
    <div class="col-4">
    POSTS HERE 1/3
    </div>
    <div class="col-4">
    POSTS HERE 1/3
    </div>
    <div class="col-4">
    POSTS HERE 1/3
    </div>
</div>

我已经在其他页面上做过类似的事情，但不同的是我只在那里加载了 6 个帖子，所以更容易，但现在我想将页面中的所有帖子分为 3 列，这是我使用过的代码6个职位：

<?php 
$wpb_all_query = new WP_Query(array('post_type'=>'post', 'post_status'=>'publish', 'posts_per_page'=>6)); ?>
<?php if ( $wpb_all_query->have_posts() ) : ?>
<?php query_posts('showposts=2'); ?>
<div class="col-sm-4">
    <div class="article_list">
    <?php $posts = get_posts('numberposts=2&offset=0'); foreach ($posts as $post) : start_wp(); ?>
    <?php static $count1 = 0; if ($count1 == "2") { break; } else { ?>
        <article class="article_box">
            <a href="<?php the_permalink(); ?>"><img src="<?php the_post_thumbnail_url(); ?>" alt=""></a>
            <h3 class="journal_title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
        </article>
    <?php $count1++; } ?>
    <?php endforeach; ?>
    </div>
</div>

<?php query_posts('showposts=2'); ?>
<div class="col-sm-4">
    <div class="article_list">
    <?php $posts = get_posts('numberposts=2&offset=2'); foreach ($posts as $post) : start_wp(); ?>
    <?php static $count2 = 0; if ($count2 == "2") { break; } else { ?>
        <article class="article_box">
            <a href="<?php the_permalink(); ?>"><img src="<?php the_post_thumbnail_url(); ?>" alt=""></a>
            <h3 class="journal_title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
        </article>
    <?php $count2++; } ?>
    <?php endforeach; ?>
    </div>
</div>

<?php query_posts('showposts=2'); ?>
<div class="col-sm-4">
    <div class="article_list">
    <?php $posts = get_posts('numberposts=2&offset=4'); foreach ($posts as $post) : start_wp(); ?>
    <?php static $count3 = 0; if ($count3 == "2") { break; } else { ?>
        <article class="article_box">
            <a href="<?php the_permalink(); ?>"><img src="<?php the_post_thumbnail_url(); ?>" alt=""></a>
            <h3 class="journal_title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
        </article>
    <?php $count3++; } ?>
    <?php endforeach; ?>
    </div>
</div>
<?php wp_reset_postdata(); ?>
<?php endif; ?>

标签： phpwordpress

解决方案

试试下面的代码。您将获得以下格式的帖子列表。 在此处输入图像描述

<?php
$loop_counter = $innerBreak = 1;
$wpb_all_query = new WP_Query(array('post_type'=>'post', 'post_status'=>'publish', 'posts_per_page'=>6));
if($wpb_all_query->have_posts()):
while($wpb_all_query->have_posts()) :
$wpb_all_query->the_post();
if($innerBreak == 1){
?>
<!-- when complete listing of 3 post open the new div -->
<div class="col-sm-4">
<?php
}
?>
<div class="article_list">
    <article class="article_box">
        <a href="<?php the_permalink(); ?>"><img src="<?php the_post_thumbnail_url(); ?>" alt=""></a>
        <h3 class="journal_title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
    </article>
</div>
<?php 
//when complete listing of 3 post closed previously div.
if($loop_counter%3==0){ echo '</div>'; $innerBreak = 1;}else{$innerBreak = 0;}
$loop_counter++; endwhile; 
else: 
echo "<div>No Results Found</div>";
endif;  
?>

推荐阅读