Как вывести посты в таком оформлении?

Question

[stichii]

Добрый день! Когда то был подобный вопрос, но как назло найти не могу.....
Как можно вывести посты в таком оформлении
Понятно, что через цикл, но как прописать условие, что одна строка оформлена так, другая наоборот.

<?php

            $type = 'akt_otdyh';
            $args=array(
                'post_type' => $type,
                'post_status' => 'publish',
                'posts_per_page' => -1,
                'ignore_sticky_posts'=> 1);


            $my_query = null;
            $my_query = new WP_Query($args);
            if( $my_query->have_posts() ) {
                while ($my_query->have_posts()) : $my_query->the_post(); ?>
<div class="row">
<div class="col-md-6">
 <?php if ( has_post_thumbnail()) : // Check if thumbnail exists ?>
                        <?php the_post_thumbnail(); // Declare pixel size you need inside the array ?>
</div>

<div class="col-md-6">
  <h3><?php the_title(); ?></h3>
   <?php the_excerpt();?>
</div>
</div>
<?php endwhile;
            } wp_reset_query();  // Restore global post data stomped by the_post().


            ?>

Answer 1

[Ankhena]

nth-child

Comments

[zooks]

Подтвержу, это делается через верстку. Выравнивание и цвет кнопок - проблема не HTML, а CSS.

[stichii]

Да, спасибо я уже поняла тупость своего вопроса)))

[Ankhena]

stichii: вообще не переживайте, когда много работы и не такое бывает

Answer 2

[Андрей Федоров]

<div>
  <div>Нечетный</div>
  <div>Четный</div>
</div>

div div {
  width: 200px;
  height: 200px;
}
div div:nth-child(even) {
  background-color: red;
}
div div:nth-child(odd) {
  background-color: green;
}

Принцип ясен?

Comments

[stichii]

оказывается все намного проще, спасибо)

Answer 3

[Дмитрий Шведов]

Я бы сделал проще и без PHP, если конечно такой вариант подходит.
Обращался бы к элементам через псевдокласс :nth-child(even) (все четные элементы).
Далее в стилях обращаемся ко всем четным элементам и делаем с ним все что угодно.

Стандартный шаблон поста html

<article>
        <div class="row">
                <div class="col-md-6">Текст</div>
                <div class="col-md-6">Изображение</div>
        </div>
</article>

Будем считать что у вас по умолчанию первый блок с текстом, второй с изображением.

css
В итоге обращаемся к каждому второму элементу поста и меняем местами обтекание колов.

article:nth-child(even) .col-md-6:first-child {
        float: right;
}

Comments

[stichii]

да, спасибо)