Question

我正在尝试创建动态标签式内容切换器。我使用WordPress作为内容，需要计算我在关闭它之前显示的帖子数量，并使用帖子转到下一行。

HTML输出提供了这个：

<div id="menu1" class="tab-pane fade in">
      | <div class="row">
      |       | <div class="bookshelf">
      |       |       | <div class="col-md-3">
      |       |       | </div>
      |       |       | <div class="col-md-3">
      |       |       | </div>
      |       |       | <div class="col-md-3">
      |       |       | </div>
      |       |       | <div class="col-md-3">
      |       |       | </div>
      |       | </div>
      | </div>
</div>
<div id="menu2" class="tab-pane fade in">
      | <div class="row">
      |       | <div class="bookshelf">
      |       |       | <div class="col-md-3">
      |       |       | </div>
      |       |       | <div class="col-md-3">
      |       |       | </div>
      |       | </div>

<!-- This one should be closed -->

      |       | <div id="menu3" class="tab-pane fade in">

（菜单1 =正确，菜单2 =未关闭）

Menu2未关闭，因为该行只有1,2或3个帖子。

目前我在menu1，menu2，menu3代码之间使用以下代码：

<?php
    $query = new WP_Query( array( 'post_type' => array( 'post_type' ) ) );

    $i=0;
    while ( $query->have_posts() ) : 
        $query->the_post();
        $publiceerdatum = get_post_meta(get_the_ID(), 'publiceerdatum'); 
        $image = get_post_meta(get_the_ID(), 'image' );
        if(is_array($image)) {
             $imagelink = $image[0];        
        }

        if ($i%4==0) 
            echo '<div class="row"><div class="bookshelf">';
        ?>

            <div class="col-md-3">
                <center>

                <a href="<?php echo get_post_meta($post->ID, 'url', true) ?>">
                    <img src="<?php echo get_post_meta($post->ID, 'image', true) ?>" class="img-samenspraak" alt="Bekijk <?php the_title(); ?>"/>
                </a>


                <a href="'<?php the_permalink(); ?>" class="" >
                    <h4>
<?php 
    if (strlen($post->post_title) > 50) {
        echo substr(the_title($before = '', $after = '', FALSE), 0, 50) . '...'; 
    } else {
        the_title();
    } ?>
                    </h4>
                </a>
                </center></div>
   <?php 
        if (($i%4==1)) echo '';
        elseif (($i%4==2)) echo '';
        elseif (($i%4==3)) echo '</div></div>';              

        $i++;
    endwhile;
?>

<?php 
    wp_reset_query(); 
?>

有谁知道我做错了什么？

Answer 1

您在4 row div后关闭col-md-3 如果您只有2个col-md-3 div（如menu2所示），则永远不会关闭row。

试试这个：

$i=0;
while ($query->have_posts()) :
    [...Do your stuff...]

    if ($i%4 == 0) {
    // It's a new row
        echo '<div class="row">
            <div class="bookshelf">';
    }
    ?>

                <div class="col-md-3">
                    [...Other stuff...]
                </div>

    <?php

    $i++; // This is the number of "col-md-3" you have

    if ($i%4 ==0) {
    // You have multiple of 4 div, then you must close the row
        echo '</div></div>';  
    }
endwhile;

if ($i%4 != 0) {
// Here: you finished your menu, but the last row has not multiple of 4 div:
// it was not closed in the previous "if" statement. Close it now.
    echo '</div></div>';
}

在x帖子下，PHP i ++没有关闭足够的div

1 个答案: