Блог

Здесь у меня есть страница, иллюстрирующая мой вопрос

http://www.ttmt.org.uk .

Первая сетка жестко запрограммирована с использованием структуры html, которую я хочу — div должен содержать каждую строку, а затем div внутри нее, чтобы содержать каждый блок.

Моя проблема в том, как мне создать эту структуру в WP_Query.

Если я выведу строку в WP_Query, это даст мне 1 блок в каждой строке. Я хочу три блока в каждой строке.

Нужен ли мне какой-то цикл внутри цикла?

 <?php get_header(); ?>

    <div class="container">

        <div class="row">
            <div class="col-xs-3 box">
                <p>Post 1</p>
            </div>
            <div class="col-xs-3 box">
                <p>Post 2</p>
            </div>
            <div class="col-xs-3 box">
                <p>Post 3</p>
            </div>
        </div>

        <div class="row">
            <div class="col-xs-3 box">
                <p>Post 4</p>
            </div>
            <div class="col-xs-3 box">
                <p>Post 5</p>
            </div>
            <div class="col-xs-3 box">
                <p>Post 6</p>
            </div>
        </div>

        <div class="row">
            <div class="col-xs-3 box">
                <p>Post 7</p>
            </div>
            <div class="col-xs-3 box">
                <p>Post 8</p>
            </div>
            <div class="col-xs-3 box">
                <p>Post 9</p>
            </div>
        </div>

    </div>


    <div class="container two">

        <h3>With WP_Query</h3>

        <?php
            $grid_args  = array(
                'post_type' => 'post',
                'order' => 'ASC',
                'orderby' => 'menu_order'
            );

            $grid_loop = new WP_Query($grid_args);

            if($grid_loop->have_posts()):
                while($grid_loop->have_posts()):
                    $grid_loop->the_post();

        ?>

        <div class="row">
            <div class="col-xs-3 box">
                <p><?php the_title(); ?></p>
            </div>
        </div>

        <?php
            endwhile;
            endif;
        ?>

        <?php wp_reset_postdata(); ?>
    </div>


<?php get_footer(); ?>
 

Вы должны сделать трюк «когда начинается новая строка?» самостоятельно.

Находясь в цикле, вы можете подсчитать индекс col. Если он достигает 3 (используйте по модулю, чтобы избежать сброса индекса), начните новую строку.

Что-то вроде этого (я не тестировал это):

 <?php
$grid_loop = new WP_Query($grid_args);

$col = 0;
if($grid_loop->have_posts()):

    while($grid_loop->have_posts()):
?>
        <?php if($col % 3 == 0) ?>
          <div class="row"><!-- start row -->
        <?php endif; ?>

        <div class="col-xs-3 box">
            <p><?php the_title(); ?></p>
        </div>

        <?php if($col % 3 == 2) ?>
          </div><!-- end row -->
        <?php endif; ?>

<?php
        $col  ;
    endwhile;
?>
   <?php if($col % 3 != 0) ?>
       </div><!-- close row if it is still open -->
   <?php endif; ?>
<?php
endif;
?>