Как настроить вывод постов в wordpress для разных разрешений экранов?

Question

[stichii]

Добрый день! На главной странице в одной из рубрик задано что бы выводилось 3 поста. Вывод постов для этой рубрики осуществляется через цикл:

<div class="row">
    <?php query_posts('cat=2&orderby=date&order=DESC&posts_per_page=3');?>
    <?php if(have_posts()):while(have_posts()): the_post();?>
        <div class="col-md-4 col-sm-6">
            <div class="content_post">
                <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

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

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

Используется разметка бутстрап. Затем нужно, чтобы на планшетах было 2 поста, а на мобильных -снова 3 поста. Вот как должно быть:. Для этих целей есть класс в бутстрапе ".hidden-sm". Подскажите пожалуйста, как класс ".hidden-sm" применить к 3 посту?

Answer 1

[Ihor Gevorkyan]

<div class="row">
    <?php query_posts('cat=2&orderby=date&order=DESC&posts_per_page=3'); ?>

    <?php if(have_posts()): $i = 0; while(have_posts()): the_post(); ?>
        <div class="col-md-4 col-sm-6 <?php echo ($i % 3 == 0) ? 'hidden-sm' : ' '; ?>">
            <div class="content_post">
                <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                    <?php get_template_part( 'content', get_post_format() ); ?>
                </div>
            </div>
        </div>
    <?php $i++; endwhile; endif; ?>
</div>

<?php wp_reset_postdata(); ?>

не проверял, но должно работать. Так понимаю, что Вы искали такой подход.

Comments

[stichii]

Спасибо большое! Все работает!

[Ihor Gevorkyan]

stichii: не за что! :)

Answer 2

[Mr Crabbz]

<div class="row" id="posts">

А затем

#posts>div:nth-child(3n+3) {
   display: none;
}

Только media-запрос подберите под нужное разрешение.

Comments

[stichii]

Спасибо большое!!! Все получилось)