在post loop的短码中，每四个帖子后增加clear div。

Question

我已经创建了一个显示我的员工职位的短码。每个帖子都是浮动的，每行应该有四个帖子。一切都很好，但我需要在每四个帖子后添加一个清晰的div，因为高度可能会根据每个帖子的内容而变化。我如何在我的短码中添加每四篇文章后的透明div？我的代码如下。

/*staff category start*/

add_shortcode( 'staff_category', 'staff_category' );

function staff_category( $atts ) {
    ob_start();
    // define attributes and their defaults
    extract( shortcode_atts( array (
        'type' => 'staff',
        'order' => 'ASC',
        'orderby' => 'menu_order',
        'posts' => -1,
        'staff_category' => '',
        'category' => '',
    ), $atts ) );

    // define query parameters based on attributes
    $options = array(
        'post_type' => $type,
        'order' => $order,
        'orderby' => $orderby,
        'posts_per_page' => $posts,
        'stafftype' => $staff_category,
        'category_name' => $category,
    );

    $query = new WP_Query( $options );
    // run the loop based on the query






    if ( $query->have_posts() ) { ?>

<?php while ( $query->have_posts() ) : $query->the_post(); ?>



<article class="fourth-col-center staff-profile"> 




    <?php
    if(has_post_thumbnail()) { ?>
    <div class="staff-img">
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php printf(__('%s', 'kleen'), the_title_attribute('echo=0')); ?>"><?php the_post_thumbnail( 'staff-thumb' ); ?></a>

</div>
    <?php } else { ?>
    <div class="staff-img">
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php printf(__('%s', 'kleen'), the_title_attribute('echo=0')); ?>"><?php echo '<img src="' . get_bloginfo( 'stylesheet_directory' ) . '/images/nophoto.jpg" />'; ?></a>


</div>
    <?php } ?>





<h3><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php printf(__('%s', 'everypraise'), the_title_attribute('echo=0')); ?>"><?php the_title(); ?></a></h3>


    <div class="loop-post-meta">
        <ul>
            <li>

<?php
global $post; 
$stafftitle_value = get_post_meta($post->ID, "wpstaff_textfield", true);

if($stafftitle_value){ ?>
    <?php echo $stafftitle_value ?>
<?php } ?>

            </li>




        </ul>
    </div>


</article>



            <?php endwhile;
            wp_reset_postdata(); ?>

<div class="cleared"></div>


<?php $myvariable = ob_get_clean();
    return $myvariable;
    }
}


/*staff category end*/

Answer 1

你可以用CSS，这样的东西应该可以。

article.staff-profile:nth-child(4n+5) {
    clear: both;
}