0

Верстаю тему bootstrap на wordpress. Подскажите? как сверстать вывод статей, так чтобы блоки не съезжали.

На данный момент сделал так:

<div class="container">
    <div class="row">
    <!-- the loop -->
        <?php
        // запрос
        $wpb_all_query = new WP_Query(array('post_type'=>'post', 'category_name'=>'projects', 'post_status'=>'publish', 'posts_per_page'=>-1));

        if ( $wpb_all_query->have_posts() ) :
            while ( $wpb_all_query->have_posts() ) : $wpb_all_query->the_post(); ?>

            <div class="col-md-4 item">
                <img src="<?php the_field('main_post_img'); ?>"/>
                <div class="details">
                <h4><?php the_title(); ?></h4>
                <a href="<?php the_permalink(); ?>">Подробнее</a>
                </div>
            </div>

            <?php endwhile;
            wp_reset_postdata();
        else : ?>
            <p><?php _e( 'Извините, нет записей, соответствуюших Вашему запросу.' ); ?></p>
        <?php endif; ?>
    <!-- end of the loop -->
    </div>
</div>

Нужно чтобы было 3 ряда по 3 поста, как выводить каждый новый ряд row?

1 ответ 1

1

Проверяйте в цикле, что номер выводимого поста делится на 3 нацело. Если да - начинайте новый ряд.

<div class="container">
    <!-- the loop -->
    <?php
    // запрос
    $wpb_all_query = new WP_Query(array('post_type'=>'post', 'category_name'=>'projects', 'post_status'=>'publish', 'posts_per_page'=>-1));

    $post_num = 0;
    if ( $wpb_all_query->have_posts() ) :
        while ( $wpb_all_query->have_posts() ) :
        $wpb_all_query->the_post();
        if (($post_num % 3) == 0)
            echo '<div class="row">';

        ?>
        <div class="col-md-4 item">
            <img src="<?php the_field('main_post_img'); ?>"/>
            <div class="details">
            <h4><?php the_title(); ?></h4>
            <a href="<?php the_permalink(); ?>">Подробнее</a>
            </div>
        </div>
        <?php

        if (($post_num % 3) == 2)
            echo '</div>';
        $post_num++;
        endwhile;
        wp_reset_postdata();
    else : ?>
        <p><?php _e( 'Извините, нет записей, соответствуюших Вашему запросу.' ); ?></p>
    <?php endif; ?>
    <!-- end of the loop -->
</div>
2
  • Спасибо,работает правда немного не так.post_num = 1, так вроде бы лучше, но все равно первый col идет внутри row, остальные нет. Но в принципе пользователю норм 30 апр 2017 в 9:49
  • Ошибся. Закрывать ряд надо по сравнению == 2. Поправил ответ. 30 апр 2017 в 11:22

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.