在第三次投递后重新运行循环？(Wordpress)

Question

我的模板(wordpress)有个问题。我想要创建一个包含3列的投资组合页面，它可以在我的投资组合页面中显示文章(而不跳过一个新页面)。我需要在每三个帖子之后重复这三个帖子。我会将“隐藏”类分配给我的重复文章，当单击该列时，类将被设置为“块”。我有个密码：

<?php get_header(); ?>
<section> <div class="container container-bazar container-gallery"><?php 
$array = array();
    $count = 0;
    $i = 0;
$args = array(
    'posts_per_page' =>  -1,
    'post_type' => 'gallery',
);
$gallery = new WP_Query( $args );
if($gallery->have_posts()) :
while($gallery->have_posts()) :
        $gallery->the_post(); ?>
<div class="col-1 boxes<?php if( $count%3 == 0 ) { echo '-1'; }; $count++; ?>">
    <div class="post" id="post-<?php the_ID(); ?>">
        <figure class="indent-bot">
            <a href="<?php the_permalink(); ?>" rel="nofollow">
                <?php the_post_thumbnail(array(380,220,true)); ?>
            </a>
        </figure>
        <div class="col-1-content">
            <strong class="title-3">
                <a href="<?php the_permalink(); ?>" rel="nofollow">
                    <?php the_title(); ?>
                </a>
            </strong>
            <div class="entry">
                <a href="<?php the_permalink(); ?>" rel="nofollow">
                    <?php the_excerpt(); ?>
                </a>
            </div><!-- .entry -->
        </div><!-- .col-1-content-->
    </div><!-- .post -->
</div> <!-- .boxes -->
<?php endwhile; ?>
<?php while($gallery->have_posts()) :
$gallery->the_post();?>
<?php $imgaddr1 = get_post_meta($post->ID, 'imgaddr1', true);
$imgaddr2 = get_post_meta($post->ID, 'imgaddr2', true);
$imgssilka1 = get_post_meta($post->ID, 'imgssilka1', true);
$imgssilka2 = get_post_meta($post->ID, 'imgssilka2', true);
$namecolor1 = get_post_meta($post->ID, 'namecolor1', true);
$namecolor2 = get_post_meta($post->ID, 'namecolor2', true);
$numbercolor1 = get_post_meta($post->ID, 'numbercolor1', true);
$numbercolor2 = get_post_meta($post->ID, 'numbercolor2', true); ?>
</div>
        <div class="full clearfix">
            <div class="inner">
                <figure class="indent-bot1">
                    <a href="<?php the_permalink(); ?>" rel="nofollow">
                        <?php the_post_thumbnail(array(960,690)); ?>
                    </a>
                </figure>
                <div class="row">
                    <div class="col-md-5">
                        <div class="inf-1">
                            <h4>Информация</h4>
                        </div>
                        <div class="inf-2">
                            <h5><?php the_title(); ?></h5>
                            <div class="desc">
                                <?php the_excerpt(); ?>
                            </div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="col-md-7 border-left">
                        <div class="inf-1">
                            <h4>Приложенные Цвета</h4>
                        </div>
                        <div class="inf-2">
                            <ul>
                                <li class="first-child">
                                    <a href="<?php echo $imgssilka1; ?>" class="img-block">
                                        <img src="<?php echo $imgaddr1; ?>">
                                    </a>
                                    <div class="txt">
                                        <strong><?php echo $namecolor1; ?></strong>
                                        <span><?php echo $numbercolor1; ?></span>
                                    </div>
                                </li>
                                <li class="last-child">
                                    <a href="<?php echo $imgssilka2; ?>" class="img-block">
                                        <img src="<?php echo $imgaddr2; ?>">
                                    </a>
                                    <div class="txt">
                                        <strong><?php echo $namecolor2; ?></strong>
                                        <span><?php echo $numbercolor2; ?></span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div><!-- .inner -->
        </div>
<div class="container container-bazar container-gallery">
<?php endwhile; 
else: 
endif; ?>
</div><!-- .container -->
</section>
<?php get_footer(); ?>

但这段代码按顺序显示帖子。

Answer 1

这是一个非常不寻常的设置，让我思考。有一种方法不需要重新运行循环。

以下是如何

• 您只需要运行一次循环。与默认循环不同，我们将从查询中提取posts数组，并通过foreach循环运行posts。这就是我们要开始的地方
• 我们需要将内容拆分，这样我们就可以得到两个带有post数据的块，并且这个数据需要保存到一个数组中，稍后我们将使用这个数组。为此，构建两个连接的数据字符串(一个字符串包含第一个数据块，第二个字符串包含第二个数据块)，这些字符串将保存在两个独立的变量中。
• 完成后，我们需要添加div来形成包含三个帖子的帖子块，每个帖子都有一个独特的类。这适用于这两组字符串。
• 现在我们需要计算新的数组键，这样我们就可以构建一个新的按顺序排列的post数据数组，这样我们就可以从字符串1中得到一个包含三个帖子的post数据序列，然后从string 2构建一个具有相同三个帖子的post数据块，等等。
• 最后，由于我们的post数组仍然是混合的，并且是无序的，所以我们将对数组进行排序，使键是数字的，然后我们可以使用最后一个foreach循环来输出post数据。

这是代码

在我贴出代码之前，只要一两张便条

• 您需要修改类等以满足您的需要。
• 代码没有经过充分的测试，但是div块和排序按预期的方式工作。
• 我已经对代码进行了注释，以使代码更容易遵循。

最后，代码

$args = array(
    'posts_per_page' =>  -1,
    'post_type' => 'gallery',
);
$gallery = new WP_Query( $args );

// Check if we have posts before we continue
if( $gallery->have_posts() ) {

    // Use the array of posts and a foreach loop to build out super array
    foreach ( $gallery->posts as $key=>$post ) {
        // Setup postdata so we can make use of template tags
        setup_postdata( $post );

        // Setup/define our first variable which will hold our first set of post data
        $output = '';

        // Open a new div on the first post and every 3rd one there after to hold three posts
        if ( $key%3 == 0 ) {
            // We will call this class "first-x" where x represents the block count
            $output .= '<div class="first-' . floor( $key / 3 ) . '">';
        }

        // Concatenate your first loop into a string to our first variable $output
        $output .= '<div class="post" id="post-' . $post->ID . '">
                <figure class="indent-bot">
                    <a href="' . get_the_permalink() . '" rel="nofollow">
                        ' . get_the_post_thumbnail( $post->ID, array( 380,220,true ) ) . '
                    </a>
                </figure>
                <div class="col-1-content">
                    <strong class="title-3">
                        <a href="' . get_the_permalink() . '" rel="nofollow">
                            ' . get_the_title() . '
                        </a>
                    </strong>
                    <div class="entry">
                        <a href="' . get_the_permalink() . '" rel="nofollow">
                            ' . get_the_excerpt() . '
                        </a>
                    </div><!-- .entry -->
                </div><!-- .col-1-content-->
            </div><!-- .post -->
        </div> <!-- .boxes -->';

        // Add our closing div after every third post or the last post if there is less than three
        if ( $key%3 == 2 || !array_key_exists( ( $key + 1 ), $gallery->posts ) ) {
            $output .= '</div>';
        }

        // Create our new array of post data split in two and use with new array keys
        $new_posts_array[floor( $key / 3 ) * 3 + $key] = $output;

        // Setup/define our second variable which will hold the second set of post data from our posts
        // This is the set that you would like to hide
        $output_1 = '';

        // Open a new div on the first post and every 3rd one there after to hold three posts
        if ( ( $key%3 ) == 0 ) {
            // This block of posts will use class "second-x" where x represents the block count
            $output_1 .= '<div class="second-' . floor( $key / 3 ) . '">';
        }

        $imgaddr1     = get_post_meta( $post->ID, 'imgaddr1',     true );
        $imgaddr2     = get_post_meta( $post->ID, 'imgaddr2',     true );
        $imgssilka1   = get_post_meta( $post->ID, 'imgssilka1',   true );
        $imgssilka2   = get_post_meta( $post->ID, 'imgssilka2',   true );
        $namecolor1   = get_post_meta( $post->ID, 'namecolor1',   true );
        $namecolor2   = get_post_meta( $post->ID, 'namecolor2',   true );
        $numbercolor1 = get_post_meta( $post->ID, 'numbercolor1', true );
        $numbercolor2 = get_post_meta( $post->ID, 'numbercolor2', true ); 

        // Concatenate your second set of post data into a string to our second variable $output_1
        $output_1 .= '<div class="full clearfix">
            <div class="inner">
                <figure class="indent-bot1">
                    <a href="' . get_the_permalink() . '" rel="nofollow">
                        ' . get_the_post_thumbnail(  $post->ID, array( 960, 690 ) ) . '
                    </a>
                </figure>
                <div class="row">
                    <div class="col-md-5">
                        <div class="inf-1">
                            <h4>Информация</h4>
                        </div>
                        <div class="inf-2">
                            <h5>' . get_the_title() . '</h5>
                            <div class="desc">
                                ' . get_the_excerpt() . '
                            </div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="col-md-7 border-left">
                        <div class="inf-1">
                            <h4>Приложенные Цвета</h4>
                        </div>
                        <div class="inf-2">
                            <ul>
                                <li class="first-child">
                                    <a href="' . $imgssilka1 . '" class="img-block">
                                        <img src="' . $imgaddr1 . '">
                                    </a>
                                    <div class="txt">
                                        <strong>' . $namecolor1 . '</strong>
                                        <span>' . $numbercolor1 . '</span>
                                    </div>
                                </li>
                                <li class="last-child">
                                    <a href="' . $imgssilka2 . '" class="img-block">
                                        <img src="' . $imgaddr2 . '">
                                    </a>
                                    <div class="txt">
                                        <strong>' . $namecolor2 . '</strong>
                                        <span>' . $numbercolor2 . '</span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div><!-- .inner -->
        </div>';

        // Add our closing div after every third post or the last post if there is less than three
        if ( $key%3 == 2 || !array_key_exists( ( $key + 1 ), $gallery->posts ) ) {
            $output_1 .= '</div>';
        }

        // Create our new array of post data split in two and use with new array keys
        $new_posts_array[( floor( $key / 3 ) + 1 ) * 3 + $key] = $output_1;         


    }
    wp_reset_postdata();

    // Sort our new array so that the keys are numerical again
    ksort( $new_posts_array );

    // Run a foreach loop to output our posts as we need. No need to modify anything here
    foreach ( $new_posts_array as $v )
        echo $v;
}

Answer 2

$i = 1;
//added before to ensure it gets opened
echo '<div>';
if ( $wp_query->have_posts() ) : while ( $wp_query->have_posts() ) : $wp_query->the_post();
     // post stuff...

     // if multiple of 3 close div and open a new div
     if($i % 3 == 0) {echo '</div><div>';}

$i++; endwhile; endif;
//make sure open div is closed
echo '</div>';

Answer 3

众所周知，WordPress是一个开源工具，所有插件都可以管理这种格式。

我建议使用插件来管理您的需求。我使用列插件进行格式化输出。