将Wordpress帖子加载到多个DIV中(列)

时间:2019-06-08 19:26:48

标签: php wordpress

我正在尝试将所有Wordpress帖子均等地加载到三个不同的Divs中,

喜欢

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

3 个答案:

答案 0 :(得分:1)

尝试以下代码。您将获得以下格式的帖子列表。 enter image description here

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

答案 1 :(得分:1)

感谢Shivendra Singh

稍作调整后,下面是将所有帖子平均分为三列的代码

<?php
$loop_counter = $innerBreak = 1;
$wpb_all_query = new WP_Query(array('post_type'=>'post', 'post_status'=>'publish', 'posts_per_page'=>-1));
if($wpb_all_query->have_posts()):
while($wpb_all_query->have_posts()) :
$wpb_all_query->the_post();
if($innerBreak == 1){
?>
<?php $posts_count = round((($wpb_all_query->post_count) / 3)+0.5); ?>
<!-- when complete listing of 3 post open the new div -->
<div class="col-sm-4">
    <div class="article_list" data-parallax='{"y" : -150, "distance": 2000, "smoothness": 10}'>
<?php
}
?>
    <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 
//when complete listing of 3 post closed previously div.
if($loop_counter%$posts_count==0){ echo '</div></div>'; $innerBreak = 1;}else{$innerBreak = 0;}
$loop_counter++; endwhile; 
else: 
echo "<div>No Results Found</div>";
endif;  
?>

答案 2 :(得分:0)

$wpb_all_query = new WP_Query(array('post_type'=>'post', 'post_status'=>'publish', 'posts_per_page'=>6)); ?>行中,您使用'posts_per_page'=>6。 尝试:'posts_per_page'=>-1加载所有帖子。 然后尝试代替您的代码:

<!-- If you use bootstrap -->
<div class="container">
    <div class="row">
        <?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 while( $wpb_all_query->have_posts() ){ $wpb_all_query->the_post(); ?>

                <div class="col-md-4">
                    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                    <?php the_excerpt(); // or the_content(); or any ?>
                </div>

            <?php } ?>
         <?php wp_reset_postdata(); ?>
        <?php endif; ?>
    </div>
</div>