Loop repeating design pattern

时间:2017-04-21 作者:epluribusunum

这似乎是个简单的问题,但我在处理它时遇到了一些问题。

这是我需要的布局

loop one

特色

loop two

次要的

tert-tert-tert

次要的

tert-tert-tert

次要的

很容易将该特性作为一个单独的循环来完成。但我想重复1列(次要)3列(tert)布局。问题是tert元素周围的容器,并在正确的阶段关闭它们,因为循环可能在一个或两个tert或第二个tert之后结束。这是我到目前为止的情况。

<?php 

$args = array(
\'post_type\' => \'advice\',
\'offset\'=>1
);
$counter = 0;
$offset = 2;
// the query
$the_query = new WP_Query( $args ); ?>

<?php if ( $the_query->have_posts() ) : ?>
  <?php echo \'<div class="clearfix">\'; ?>
    <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
      <?php 

      if ($counter % 4 == 0) {


        get_template_part(\'templates/content\', \'advice-secondary\');
        $offset++;
        $counter++;

      } else {
            if ( $offset % 3 == 0 ){
               echo \'</div>\';
               echo \'<div class="three-split-bg bg-light">\';
               echo \'<div class="container wrap">\';

             }
             get_template_part(\'templates/content\', \'advice-tert\');
               $offset++;
               $counter++;

      }?>


  <?php endwhile; ?>
  <?php echo \'</div>\'; ?>
  <?php else : ?>

  <p><?php _e( \'Sorry, no posts matched your criteria.\' ); ?></p>

  <?php endif; ?>

3 个回复
SO网友:Tom J Nowell

你可以使用3个独立的循环,一旦你有足够的帖子,就可以尽早打破每个循环。

例如,下面是一个具有单个查询的2列网格:

$q = new WP_Query( ... );

if ( $q->have_posts() ) {
    ?>
    <div class="columns">
        <div>
            <?php
            $counter = 0;
            while( $q->have_posts() ) {
                $q->the_post();
                the_title();
                $counter++;
                if ( $counter === $q->post_count/2 ) {
                    break;
                }
            }
            ?>
        </div>
        <div>
            <?php
            $counter = 0;
            while( $q->have_posts() ) {
                $q->the_post();
                the_title();
                $counter++;
                if ( $counter === $q->post_count/2 ) {
                    break;
                }
            }
            ?>
        </div>
    </div>
    <?php
} else {
    echo \'No posts found\';
}
注意到我是如何在显示每个帖子时进行计数的,然后在计数器运行到一半时提前退出循环的吗?

任意列请注意,这里的列都是相同的设计,并且条件检查已更改。

$q = new WP_Query( ... );

if ( $q->have_posts() ) {
    ?>
    <div class="columns">
        <?php
        $columns = 2;
        for ( $i = 1; $i < $columns; $i++ ) {
            echo \'<div>\';
            $counter = 0;
            while ( $q->have_posts() ) {
                $q->the_post();
                get_template_part( \'column\',\'post\' );
                $counter++;
                if ( $counter > $q->post_count/$columns ) {
                    break;
                }
            }
            echo \'</div>\';
        }
        ?>
    </div>
    <?php
} else {
    echo \'No posts found\';
}
请注意get_template_part 调用,简化模板。

通过这两个示例和一些基本数学知识,您可以将它们转换为任意列的组合

或者,将一行帖子向左浮动,使每个帖子的宽度为50%或固定宽度,使用CSS完全避免PHP

SO网友:epluribusunum

好的,我找到了一个解决方案。虽然这远不是一个优雅的陈述,但我觉得如果有人能帮助我,我的条件陈述会有很大的改进:

....
while ( $the_query->have_posts() ) : $the_query->the_post();
if($counter == 0):
        get_template_part(\'templates/content\', \'advice-secondary\');
        $counter++;


    else:
            if($counter == 1){
              echo \'<div class="three-split-bg bg-light">
                      <div class="container wrap">
                        <div class="row">\';
            };

            echo \'<div class="text-left col-xs-6 col-md-4 content">\';
              get_template_part(\'templates/content\', \'advice-tert\');
            echo \'</div>\';
            $counter++;

            if ($the_query->current_post +1 == $the_query->found_posts || $counter % 4 == 0) {
               $counter = 0;

              echo      \'</div>
                      </div>
                  </div>\';
            };

    endif;
endwhile;
...

SO网友:Kristian Kalvå

您真的需要多个循环吗?每个部分的内容是否不同?如果没有,您可以使用一个循环进行管理,并使用flexbox进行不同的显示。

.parent {
   display: flex;
   flex-direction; row;
   flex-wrap: wrap;
}

.children {
   flex: 1 1 33,33%;
}

.children:nth-child(1),
.children:nth-child(5) {
   flex-basis: 100%;
}
像这样的事情会有帮助的。您可以创建更复杂的子选择器以实现更多重复。

相关推荐

Increase offset while looping

我正在编写一个自定义帖子插件,它将自定义帖子分组显示为选项卡。每组4个岗位。是否可以编写一个偏移量随每次循环而增加的查询?因此,结果将是:-第一个查询显示从1到4的帖子-第二个查询显示从5到8的帖子-第三个查询显示从9到12的帖子等。 <div class=\"official-matters-tabs\"> <?php $args = array(\'post_type\' => \'official-matters\', \'showp