如何将1个以上的帖子显示为三列查询

时间:2017-02-06 作者:Poorya

我有以下代码:

<div class="container">
<div class="row">
<?php
$slider_qu= new WP_Query(array(
\'post_type\' => \'post\',
\'post_status\' => \'publish\',
\'cat\'   =>\'\',
\'order\' => \'title\',
\'orderby\' => \'date\',
\'posts_per_page\' =>\'5\',
));  
 while ( $slider_qu->have_posts() ) : $slider_qu->the_post(); $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), false, \'\' );
//Show the left hand side column
if($counter == 1) :
?>
    <div class="col-md-3 col-sm-3 col-xs-12 pad">

    <a href="<?php the_permalink() ?>" rel="bookmark" alt="<?php the_title_attribute(); ?>"> 
<div class="imgcontainer" style="background:<?php echo get_post_meta($post->ID, \'feature_bg\', true); ?> url(<?php echo $src[0]; ?>);" >
<div class="Details"><h2><?php the_title_attribute(); ?></h2>
<span class="Date pull-right"><?php the_time( get_option(\'date_format\') ); ?></span>
<span class="pull-left commentsNumerous" href="#"><i class="fa fa-comment"></i><?php comments_popup_link(__(\'0\'), __(\'1\'), __(\'%\')); ?></span>
</div>
</div></a>

    </div>

<?php
//Show the middle column
elseif($counter == 2) :
?>
    <div class="col-md-6 col-sm-6 col-xs-12 pad">

    <a href="<?php the_permalink() ?>" rel="bookmark" alt="<?php the_title_attribute(); ?>"> 
<div class="imgcontainer" style="background:<?php echo get_post_meta($post->ID, \'feature_bg\', true); ?> url(<?php echo $src[0]; ?>);" >
<div class="Details"><h2><?php the_title_attribute(); ?></h2>
<span class="Date pull-right"><?php the_time( get_option(\'date_format\') ); ?></span>
<span class="pull-left commentsNumerous" href="#"><i class="fa fa-comment"></i><?php comments_popup_link(__(\'0\'), __(\'1\'), __(\'%\')); ?></span>
</div>
</div></a>

    </div>
<?php
//Show the right hand side column
elseif($counter == 3) :
?>
    <div class="col-md-3 col-sm-3 col-xs-12 pad">

    <a href="<?php the_permalink() ?>" rel="bookmark" alt="<?php the_title_attribute(); ?>"> 
<div class="imgcontainer" style="background:<?php echo get_post_meta($post->ID, \'feature_bg\', true); ?> url(<?php echo $src[0]; ?>);" >
<div class="Details"><h2><?php the_title_attribute(); ?></h2>
<span class="Date pull-right"><?php the_time( get_option(\'date_format\') ); ?></span>
<span class="pull-left commentsNumerous" href="#"><i class="fa fa-comment"></i><?php comments_popup_link(__(\'0\'), __(\'1\'), __(\'%\')); ?></span>
</div>
</div></a>

    </div>        

    <div class="clear"></div>
<?php endif; ?>

<?php $counter = ($counter == 3) ? 1 : ($counter + 1);
endwhile; ?>
</div></div>
其中@Howdy_McGee 写下它here 但它只在每个div中显示1个帖子,但我希望它在第一个div中显示2个帖子,然后在第二个div中显示1个帖子,在第三个div中显示另外2个帖子,这样我就可以像引导网格滑块一样this.

1 个回复
最合适的回答,由SO网友:Rishabh 整理而成

我还没有测试过,但看看是否有效

在开始之前为变量赋值while

$c = 1;
$counter = 5;
如果条件允许,请更改您的所有$couter

if($counter == 1)
if($counter == 2)
if($counter == 3)
分别纳入本

if($counter % $c==1 || $counter % $c==2)
if($counter % $c==3)
if($counter % $c==4 || $counter % $c==0)
最后,在每个$counter if条件结束之前(在每个$counter if条件的最后一行),您需要像这样递增$c

$c=$c+1;

NOTE 在尝试之前备份您的代码。

UPDATE

您和我之前发布的答案的实际问题是,我们将DIV放在while循环中,因此它为每个帖子一次又一次地创建。这就是为什么在一个分区中没有显示两个帖子的原因。但现在我给你我的测试解决方案,这是根据你的要求工作。

此解决方案要求所有3个div都有3个while循环,并且需要对不同的while循环进行不同的查询。这次我在while循环外使用Div,这样就不会一次又一次地创建。虽然可能有一种方法可以只使用一个while循环,但我不知道,这就是为什么我在这个解决方案中使用3个循环。

左DIV

<?php 
global $myOffset;
//Setting query for Left DIV
$paged = get_query_var(\'paged\') ? get_query_var(\'paged\') : 1;
$args = array(
                \'post_type\' => \'post\',  //Post type
                \'posts_per_page\' => 2,  //No. of posts
                \'paged\' => $paged       //For pagination(optional)
            );
$loop = new WP_Query( $args );
?>
<div class="left" style="width:30%;float:left;">
<?php
//While loop to show 2 posts in Left DIV
while ( $loop->have_posts() ) : $loop->the_post();
?>
    <h3><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><font style="color:#666666;"><?php the_title();?></a><span style="/* color: #d9d9d9; */font-size: 12px;">&nbsp;(<?php echo get_the_date(\'d.m.Y\');?>)</span></h3>
<?php
endwhile;   //End of while loop of Left DIV
?></div> 
中间分区

<?php
//Setting query for Middle DIV
$myOffset = 2;
$paged = get_query_var(\'paged\') ? get_query_var(\'paged\') : 1;
$args = array(
                \'post_type\' => \'post\',  //Post type
                \'posts_per_page\' => 1,  //No. of posts to show
                \'offset\' => $myOffset,  //Excluding latest posts
                \'paged\' => $paged
            );
$loop = new WP_Query( $args );
?>
<div class="middle" style="width:30%;float:left;">
<?php
//While loop to show 1 post in Middle DIV
while ( $loop->have_posts() ) : $loop->the_post();
?>

    <h3><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><font style="color:#666666;"><?php the_title();?></a><span style="/* color: #d9d9d9; */font-size: 12px;">&nbsp;(<?php echo get_the_date(\'d.m.Y\');?>)</span></h3>
<?php
endwhile;   //End of while loop of Middle DIV
?></div> 
右DIV

<?php
//Setting query for Right DIV
$myOffset = 3;
$paged = get_query_var(\'paged\') ? get_query_var(\'paged\') : 1;
$args = array(
                \'post_type\' => \'post\',
                \'posts_per_page\' => 2,  //No. of posts
                \'offset\' => $myOffset,  //excluding latest posts
                \'paged\' => $paged
            );
$loop = new WP_Query( $args );
?>
<div class="right" style="width:30%;float:left;">
<?php
//While loop to show 2 posts in Right DIV
while ( $loop->have_posts() ) : $loop->the_post();
?>
    <h3><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><font style="color:#666666;"><?php the_title();?></a><span style="/* color: #d9d9d9; */font-size: 12px;">&nbsp;(<?php echo get_the_date(\'d.m.Y\');?>)</span></h3>
<?php
endwhile;   //End of while loop of Right DIV
?></div> <?php
这只是一个示例(已测试),其中我只显示了帖子的标题(没有其他内容)。您需要根据需要将div结构放入每个while循环中。

相关推荐

使用WP_QUERY混合发布日期和发布元值

正在寻找使用自定义字段将旧帖子推送到WP\\u查询中的方法。例如,我今年有10篇文章,想将过去的2篇文章重新发布到自定义rss提要。因此,对于旧帖子,必须按照帖子日期和帖子元中的值对帖子进行排序:new post - (post date: 2018-11-11) new post - (post date: 2018-11-10) old post - (post date: 2017-05-01, post-meta date: 2018-11-09) new post - (