Question

我正在尝试在交替列中显示帖子，如下图所示。当第一行已满时，将生成另一个但使用另一种样式。这也适用于3号，4号等。这取决于帖子的数量。

在这里你可以看到我的wordpress php / html代码。

<?php get_header();?>
  <div class="tab-content">
    <div class="container-fluid no-padding">
      <?php
      $args = array(
        'post_type' => 'case',
        'category_name' => 'website',
        'posts_per_page' => -1
      );
      $query = new WP_Query( $args );
      if ( $query->have_posts()) : 
        $i = 0; 

        while( $query->have_posts() ) : 
          $query->the_post();
        $i++;
            if($i <= 5) {
              if($i == 1) {
      ?>
                <div class="big-pane col-lg-6">
                  <a href="<?php the_permalink(); ?>"><div style='background: url("<?php the_post_thumbnail_url();?>") no-repeat; background-size:cover; width:100%; height:100%;'></div></a>
                  <div class="text-box">
                    <h1><?php the_title(); echo" ".$i?></h1>
                    <p><?php the_field('sub_titel');?></p>
                    <a href="<?php the_permalink(); ?>">Bekijk project</a>
                  </div>
                </div>

                <div class="small-pane-holder1 col-lg-6">
                <?php 
                } 
              else { ?>
                <div class="small-pane col-lg-6">
                  <a href="<?php the_permalink(); ?>"><div style='background: url("<?php the_post_thumbnail_url();?>") no-repeat; background-size:cover; width:100%; height:100%;'></div></a>
                  <div class="text-box">
                    <h1><?php the_title(); echo" ".$i?></h1>
                    <p><?php the_field('sub_titel');?></p>
                    <a href="<?php the_permalink(); ?>">Bekijk project</a>
                  </div>
                </div>

                <?php 
                if($i == 5){ ?> 
                  </div>
                  <div class="clearfix"></div> 
                  <?php 
                }
              }
            }
            else { 
              $i = 1; 

              if($i == 1){ ?>
                <div class="big-pane col-lg-6 pull-right">
                  <a href="<?php the_permalink(); ?>"><div style='background: url("<?php the_post_thumbnail_url();?>") no-repeat; background-size:cover; width:100%; height:100%;'></div></a>
                  <div class="text-box">
                    <h1><?php the_title(); echo" ".$i?></h1>
                    <p><?php the_field('sub_titel');?></p>
                    <a href="<?php the_permalink(); ?>">Bekijk project</a>
                  </div>
                </div>

                <div class="small-pane-holder2 col-lg-6 ">                  
              <?php 
              } 
              else {?>
                    <div class="small-pane col-lg-6">
                      <a href="<?php the_permalink(); ?>"><div style='background: url("<?php the_post_thumbnail_url();?>") no-repeat; background-size:cover; width:100%; height:100%;'></div></a>
                      <div class="text-box">
                        <h1><?php the_title(); echo" ".$i?></h1>
                        <p><?php the_field('sub_titel');?></p>
                        <a href="<?php the_permalink(); ?>">Bekijk project</a>
                      </div>
                    </div>
                </div>  
                <?php ?>

                <div class="clearfix"></div> 
                <?php 

              } 
            } 

        endwhile; 
        echo $i;
        else: 
          echo "<p>Sorry voor de teleurstelling :(!</p>"; 
      endif; 
      wp_reset_postdata(); ?>               
    </div>   
  </div>
<?php get_footer();?>

此代码有效，但不足以实现我的目标。我制作了这段代码输出的截图。见下文：

问题是最后一行。大照片作为第2行与右侧对齐，但其样式必须与第一行相同。

我仍然希望给出一些我认为导致问题的提示..我无法设置$i = 1和while循环的结束。每行从1到5计数，但最后一行有问题（因为没有采用与第一行相同的样式）。我把计数器放在了标题后面。

我真的尝试了很多..我做错了什么？请帮帮我。

提前致谢

Answer 1

您使用了多少列？我不确定列布局的样式/宽度是多少。你能在codepen或jsfiddle中放一个简单的版本吗？

你可以改变你的循环遍历看起来更像这样，所以它遍历10年代的循环：

if($i % 10 == 1){ // returns items 1 and 11, so the right-aligned large post
}
if($i % 10 >= 2 && $i % 10 < 5) { // posts 2-4
}
if($i % 10 == 5) { // every 5th post, add the row's closing tag at the end here
}
if($i % 10 == 6) { // every 6th post, open the new row 
}
if($i % 10 >= 7 && $i % 10 < 10) { // posts 7-9
}
if($i % 10 == 0){ // every 10th post, add the second row's closing tag at the end
}

或者，这可能是Flexbox布局的一个好例子吗？

Answer 2

我发现这很有意思，我认为这可能符合我的需要，我有类似的设计，但有另一个问题，这是我的样子的屏幕截图

here is the image sample

这是我的代码

<div class="row featured">
   <div class="grid-box  grid-box-1  item-featured">
        <a href="http://www.marchettidesign.net/fullby/demo-biggrid/2015/01/26/video-post/">
            <div class="caption">
                <div class="cat"><span>News</span></div>
                <div class="date-feat"><i class="fa fa-clock-o"></i> 26 Jan , 2015 &nbsp;                                                       
                        <i class="fa fa-video-camera"></i> Video
                </div>
                <h2 class="title">Video Post with Featured Image</h2>      </div>

             <div class="quad wp-post-image"> <img src="/asstes/image1.jpg"/>   </div>              
        </a>
    </div>
    <div class="grid-box  grid-box-2  item-featured">  
        <a href="http://www.marchettidesign.net/fullby/demo-biggrid/2015/01/26/post-with-more-tag/">
            <div class="caption">
                <div class="cat"><span>Lifestyle</span></div>
                <div class="date-feat"><i class="fa fa-clock-o"></i> 26 Jan , 2015 &nbsp;
                <i class="fa fa-video-camera"></i> Video    
                </div>

                <h2 class="title">Post With More Tag</h2>
            </div>

            <div class="vm-featured"> <img src="/asstes/image1.jpg"/>   </div>                  
        </a>
    </div>
    <div class="grid-box  grid-box-3  item-featured">
        <a href="http://www.marchettidesign.net/fullby/demo-biggrid/2015/01/26/vimeo-video-post/">
            <div class="caption">
                <div class="cat"><span>What's New</span></div>
                <div class="date-feat"><i class="fa fa-clock-o"></i> 26 Jan , 2015 &nbsp;
                </div>
                <h2 class="title">Vimeo Video Post</h2>
            </div>
             <div class="quad wp-post-image"> <img src="/asstes/image1.jpg"/>   </div> 
        </a>
    </div>
    <div class="grid-box  grid-box-4  item-featured">
        <a href="http://www.marchettidesign.net/fullby/demo-biggrid/2015/01/26/post-with-image-and-text/">
            <div class="caption">
                <div class="cat"><span>News</span></div>
                <div class="date-feat"><i class="fa fa-clock-o"></i> 26 Jan , 2015 &nbsp;
                </div>

                <h2 class="title">Post with Image and text</h2>

            </div>


             <div class="quad wp-post-image"> <img src="/asstes/image1.jpg"/>   </div>                  
        </a>

    </div>

Answer 3

我注意到你在第一个大窗格之后为下一个4小窗格添加了一个类，但是我想问你是否有任何理想我如何能够单独处理循环计数器直到它达到5，即< / p>

counter 1 = has content ,
counter 2 = has content , 
counter 4 = has content , 
counter 5 = has content,

我虽然用波纹管代码实现了类似的功能，但我很乐意使用你的格式。

<?php if (have_posts()) :
$count = 0; $paged = ( get_query_var('paged') > 1 ) ? get_query_var('paged') : 1;
while (have_posts()) : the_post();
    $count++;
    if ($count <= 1 && $paged === 1) :
        if ($count === 1) echo '<div class="break"><h2>first</h2></div>'; ?>
        <div class="first-three">
            <?php the_title() ?>
        </div>
    <?php elseif (1 < $count && $count <= 2 && $paged === 1) :
        if ($count === 2) echo '<div class="break"><h2>secound</h2></div>'; ?>
        <div class="next-four">
            <?php the_title() ?>
        </div>
    <?php elseif (2 < $count && $count <= 3 && $paged === 1) :
        if ($count === 3) echo '<div class="break"><h2>third</h2></div>'; ?>
        <div class="next-six">
            <?php the_title() ?>
        </div>
    <?php elseif (3 < $count && $count <= 4 && $paged === 1) :
        if ($count === 4) echo '<div class="break"><h2>forrth</h2></div>'; ?>
        <div class="next-other-six">
            <?php the_title() ?>
        </div>
    <?php elseif (4 < $count && $count <= 5 && $paged === 1) :
        if ($count === 5) echo '<div class="break"><h2>fifth one</h2></div>'; ?>
        <div class="next-four">
            <?php the_title() ?>
        </div>

        <?php elseif (5 < $count && $count <= 6 && $paged === 1) :
        if ($count === 6) echo '<div class="break"><h2>sixth one</h2></div>'; ?>
        <div class="next-four">
            <?php the_title() ?>
        </div>
    <?php endif;
endwhile; ?>
<div class="nav-previous alignleft"><?php next_posts_link('Older posts'); ?></div>
<div class="nav-next alignright"><?php previous_posts_link('Newer posts'); ?></div><?php
endif;

?>

更优选的是，我希望它采用您自己的格式。提前谢谢。

WordPress备用帖子列

3 个答案: