Question

我有一个名为'services'的自定义帖子类型，并希望在网格中显示每个的特色图像 - 我的问题不是如何做到这一点，更多的是如何使循环与Bootstrap的行一起工作。我希望桌面上有3行，平板电脑上有2行（991px），所以我在div上的HTML是col-xs-6 col-sm-4。然而，这给出了991px屏幕尺寸的奇怪结果。我得到的是：。因此，左侧的特色图像实际上应该是“不需要的间隙”。似乎我的代码告诉行在任何屏幕大小的3行后关闭，所以它有点忽略我的col-xs-6规则。

在虚拟页面上只使用HTML，col-xs-6 col-sm-4不会这样做，它可以按预期工作，在991px屏幕上偶数行为2。

我的完整代码如下，因为我还没有将循环合并到BS行中，实际上我从这里抓取了这段代码Wordpress posts in grid view with Bootstrap 3 columns。

这里的countbang部分必须是问题，但将这些部分更改为不同的值并不能解决问题。如果我将最后一次countbang引用更改为2而不是3，这会将行设置为在桌面和平板电脑上显示2行，这是不对的，即使在平板电脑上，即使这确实排序问题，还有额外的边距和填充的地方。

<?php 
$countturtle = 0 ;
$countbang = 0 ;
$count_posts = wp_count_posts( 'services' )->publish;
$args = array( 'post_type' => 'services', 'posts_per_page' => 6 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); ?>
<?php  $countbang++ ?>

<?php if ( $countbang >= 2 ) {
    $countturtle = $countturtle + 1 ; } ?>
<?php if ( $countbang == 1 ) {
    echo '<div class="row">'; } elseif ( ( $countturtle % 3 ) == 0 ) {
    echo '<div class="row">'; } ; ?>

<a href="<?php the_permalink() ?>">
<div id="post-grid-<?php the_ID(); ?>" class="training-block <?php echo $countbang; ?>-block-training col-xs-6 col-sm-4 col-padding-0" >   
<div id="color-overlay"></div>  
    <?php if ( has_post_thumbnail() ) {
        $image_src = wp_get_attachment_image_src( get_post_thumbnail_id(),’thumbnail’ );
            echo '<img width="100%" class="fet-img" src="' . $image_src[0] . '">';
        } 
    ?>
    <p class="overlay-text"><?php the_title(); ?></p>
</div><!-- #post-grid -->
    </a>
<?php if ( $countbang % 3 == 0 ) {
    echo '</div>'; } 
    elseif ( $countposts == $countbang ) { echo '</div>';} ; ?>
<?php endwhile; ?>

Answer 1

使用array_chunk功能

所以，你的代码变成了：

    $countbang = 0 ;
    $count_posts = wp_count_posts( 'services' )->publish;
    $args = array( 'post_type' => 'services', 'posts_per_page' => 6 );

    $chunks = array_chunk($loop, 2); //it chunk $loop array into arrays with 2 elements. 

        while($chunks as $row){
           echo "<div class='row'>"; //open row
           while($row as $post){
             $countbang++;
             <a href="<?php the_permalink() ?>">
             <div id="post-grid-<?php the_ID(); ?>" class="training-block <?php echo $countbang; ?>-block-training col-xs-6 col-sm-4 col-padding-0" >   
             <div id="color-overlay"></div>  
             <?php if ( has_post_thumbnail() ) {
                $image_src = wp_get_attachment_image_src( get_post_thumbnail_id(),’thumbnail’ );
                echo '<img width="100%" class="fet-img" src="' . $image_src[0] . '">';
             } 
             ?>
             <p class="overlay-text"><?php the_title(); ?></p>
             </div><!-- #post-grid -->
             </a>
           <?php
           }
           echo "</div>"; //close row
        }

Bootstrap网格中的WordPress循环

1 个答案: