@stichii

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

Добрый день! На главной странице в одной из рубрик задано что бы выводилось 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 поста. Вот как должно быть:ea9e6608164c45e68aedac077fea4e00.jpg. Для этих целей есть класс в бутстрапе ".hidden-sm". Подскажите пожалуйста, как класс ".hidden-sm" применить к 3 посту?
  • Вопрос задан
  • 297 просмотров
Решения вопроса 2
Igor-Maf
@Igor-Maf
Senior Front End developer
<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(); ?>


не проверял, но должно работать. Так понимаю, что Вы искали такой подход.
Ответ написан
Punkie
@Punkie
<div class="row" id="posts">

А затем
#posts>div:nth-child(3n+3) {
   display: none;
}


Только media-запрос подберите под нужное разрешение.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы