<?php while(have_posts()) : the_post() ?>
<?php global $post;
$loop = new WP_Query( array( 'posts_per_page' => 20 ) );
while ( $loop->have_posts() ) : $loop->the_post();
if ( has_post_thumbnail()) {
the_post_thumbnail();
}
<?php endwhile; ?>
<?php endwhile;?>
<?php endif ; ?>
以上代码用于检索特征图像,问题: 如何在不同的引导网格中显示wordpress帖子,如下图所示:
首先发布像一个大的帖子,因为我标记了(1)第二个帖子,就像我标记的那样(2) 第三个帖子就像我标记的那个图像(3)和第四个帖子一样。
请说,你的建议......
我在bootstrap中做到了这一点:
<div class="row" style="width:100%;height:460px;">
<div class="col-xs-6" >
<div class="row">
<div class="col-xs-12" style="background:#F90;height:460px;">
</div>
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-12" style="background:#333;height:230px;"></div>
</div>
<div class="row">
<div class="col-xs-6" style="background:#933;height:230px;"></div>
<div class="col-xs-6" style="background:#093;height:230px;"></div>
</div>
</div>
</div>
如何将它们混合在一起?
答案 0 :(得分:1)
我通过使用Matrix解决了这个非常棒的如果你使用Matrix这个提议,请相信我这太棒了只是测试它,如下面的细节:
<?php global $post;
$loop = new WP_Query( array( 'posts_per_page' => 8 ,'category_name'=>'Arabic') );
$posts = array();
while ( $loop->have_posts() ) :
$items = array();
$items['link']=wp_get_attachment_url( get_post_thumbnail_id( $post->ID ));
$items['Image'] = get_the_post_thumbnail($loop->the_post());
$items['LinkPost']=get_permalink($post->ID);
$items['Title']=get_the_title($post->ID);
$items['PostTime']=get_the_time('M d,Y', $post->ID);
array_push($posts, $items);
endwhile;
for($i = 0; $i< count($posts); $i+=4){
echo "<div class='row'>";
?>
<div class="col-xs-6 col-sm-3" >
<?php
echo "<a href='".$posts[$i]['LinkPost']."'>".$posts[$i]['Image']."</a>";
?>
</div>
<div class="col-xs-6 col-sm-3 ">
<?php
echo "<a href='".$posts[$i+1]['LinkPost']."'>".$posts[$i+1]['Image']."</a>";
?>
</div>
<div class="col-xs-6 col-sm-3>
<?php
echo "<a href='".$posts[$i+2]['LinkPost']."'>".$posts[$i+2]['Image']."</a>";
?>
</div>
<div class="col-xs-6 col-sm-3 ">
<?php
echo "<a href='".$posts[$i+3]['LinkPost']."'>".$posts[$i+3]['Image']."</a>";
?>
</div>
<?
echo "</div>";
}
?>
答案 1 :(得分:0)
尝试以下方法:
<?php if(have_posts()): ?>
<div class="row" style="width:100%;height:460px;">
<?php
while(have_posts()) : the_post();
global $post;
$loop = new WP_Query( array( 'posts_per_page' => 4 ) );
if($loop->have_posts()):
$count=1;
while ( $loop->have_posts() ) : $loop->the_post();
if($count==1):
?>
<div class="col-xs-6" >
<div class="row">
<div class="col-xs-12" style="background:#F90;height:460px;">
<?php the_post_thumbnail(); ?>
</div>
</div>
<?php
elseif ($count>1 ) : ?>
<div class="row">
<?php
if($count==2):
?>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-12" style="background:#333;height:230px;">
<?php the_post_thumbnail(); ?>
</div>
</div>
<div class="row">
<?php else:?>
<div class="col-xs-6" style="background:#933;height:230px;">
<?php the_post_thumbnail(); ?>
</div>
<?php endif; ?>
</div>
<?php endif; ?>
</div>
</div>
<?php $count++;
endwhile;
endif;
?>
</div> <!-- / top row -->
<?php endif;?>