网格中的自定义帖子布局

时间:2016-04-12 21:22:33

标签: php wordpress

对于我的Wordpress网站,我在3x网格中有帖子。这是生成输出的代码。

<div class="first-post">
           <?php if (have_posts()) : the_post(); ?> 

           <!-- calling first the_post(); will step the loop forward -->

           <?php get_template_part('content','grid-firstpost'); ?>  
           <?php endif; ?> 
        </div>


        <div class="other-posts">
            <?php $i = 1; ?>
            <?php if (have_posts()) : while (have_posts()) : the_post(); ?>                    
                <!-- the loop will be at the 2nd post here -->
                <?php get_template_part('content','grid'); ?>                                          
                <?php if ($i%3 == 0) : ?>
                    <div class="clearfix"></div>
                <?php endif; $i++; ?>

                <?php if ( $_SERVER["REQUEST_URI"] == '/' ): ?>
                <?php if ($i == 3): ?>
                <?php if (have_posts()) : the_post(); ?> 
                   <!-- calling the_post(); will step the loop forward -->
                   <?php get_template_part('content','grid-test'); ?>  
                   <?php if ($i%3 == 0) : ?>
                    <div class="clearfix"></div>
                <?php endif; $i++; ?>
                   <?php endif; ?> 
                <?php endif ?>
                <?php endif ?>

                <?php if ($i == 7): ?>
                    <div class="first-post">
                       <!-- making post 7 fullwidth -->
                       <?php get_template_part('content','grid-firstpost'); ?>
                    </div>
                <?php endif ?>


            <?php endwhile; wp_reset_query(); endif; ?>  

        </div>

我为网格中的第三个点创建了一个自定义div。问题是由于自定义div (<?php if ($i == 3): ?>)而隐藏了应该最初具有该位置的帖子。

所以输出是这样的:

+全宽贴+

第一篇文章自定义文章

第四篇第五帖后第六篇

它应该是什么:

+全宽贴+

第一篇文章第二篇自定义文章

第三篇文章第四邮报第五篇


我不知道如何解决这个问题。

1 个答案:

答案 0 :(得分:0)

如果碰巧是3,看起来你正在将变量$ i递增两次。只需在while循环结束时递增它,所以它在循环的持续时间内保持稳定。

<div class="other-posts">
  <?php $i = 1; ?>
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>                    

<!-- Style the grid post 3 with a custom div -->

    <?php if ($i == 3): ?>
      <?php get_template_part('content','grid-customdiv'); ?>
    <?php endif; ?>

    <?php if ($i%3 == 0) : ?> 
      <div class="clearfix"></div> 
    <?php endif; ?>

    <?php get_template_part('content','grid'); ?> 


    <?php $i++; ?>

  <?php endwhile; wp_reset_query(); endif; ?>  

</div>