Wordpress. Как вывести архив постов в две колонки с разной разметкой?

Question

[akf_13rm]

Здравствуйте!
Есть архив блога, который я пытаюсь вывести в две колонки с разной разметкой:



Первый пост добавляется в первую колонку, второй во вторую, третий в первую и т.д.

Решил использовать такой подход:

<?php if (have_posts()) : ?>
        		<?php while (have_posts()) : the_post(); ?>
        			<?php if ($wp_query->current_post % 2) :  ?>
        				<?php get_template_part('loop-blog-center'); ?><?php else: ?>
        				<?php get_template_part('loop-blog-right'); ?>
        			<?php endif; ?>
        		<?php endwhile; ?><?php endif; ?>

Где, loop-blog-center.php:

<article class="article_blog">
                <ul id="ajax-posts2" class="list_article_blog">

	                <?php
	                $args = array(
		                'post_type' => 'post',
		                'posts_per_page' => -1,
	                );

	                $loop = new WP_Query($args);

	                while ($loop->have_posts()) : $loop->the_post();
		                ?>

                        <li>
                            <a href="<?php the_permalink(); ?>" class="link_article_blog">
				                <?php echo get_the_post_thumbnail(get_the_ID()); ?>
                                <div class="item_text_list_article_blog">
					                <?php $cats = get_the_category($id); ?>
                                    <p class="division_ar_bl"><?php echo $cats[0]->name; ?></p>
                                    <div class="text_list_article_blog">
                                        <h3 class="title_list_article_blog"><?php the_title(); ?></h3>
                                        <p class="sub_title_list_article_blog"><?php echo carbon_get_post_meta( get_the_ID(),'post_subtitle' ); ?></p>
                                    </div>
                                </div>
                            </a>
                        </li>

	                <?php
	                endwhile;
	                wp_reset_postdata();
	                ?>

                </ul>
            </article>

loop-blog-right.php:

<div class="item_news_blog">
	<ul class="list_news_blog img_width">
		<?php

		$args = array(
			'post_type' => 'post',
			'posts_per_page' => -1,
		);

		$loop = new WP_Query($args);

		if ( $loop->have_posts() ) {
			while ( $loop->have_posts() ) {
				$loop->the_post(); ?>

				<li>
					<a href="<?php the_permalink(); ?>"><?php echo get_the_post_thumbnail(get_the_ID()); ?></a>
					<?php $cats = get_the_category($id); ?>
					<a class="rublic_news_blog" href="<?php get_category_link( $cats ); ?>"><?php echo $cats[0]->name; ?></a>
					<h3 class="title_news_blog"><a href="<?php the_permalink(); ?>"><?php the_title(); ?> <span><?php echo carbon_get_post_meta( get_the_ID(),'post_subtitle' ); ?></span></a></h3>
				</li>

			<?php }
		}

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

Но в таком случае, выводятся 4 колонки:


Может кто сталкивался с подобным, как правильно вывести в две колонки, когда разметка принципиально отличается..

Comments

[Антон Литвиненко]

Один цикл и раскидать флоатами вправо влево. Если же сетка уже сверстана, то соглашусь за цикл по четным и цикл по нечетным

[akf_13rm]

Антон Литвиненко, подошел вариант с четными/нечетными, так как сетка уже готова

Answer 1

[Иван К]

Tут проще сделать 2 цикла в двух колонках, в первой выбирать все нечетные, во второй все четные.

Comments

[akf_13rm]

Спасибо, сделал 2 отдельных цикла:

<div class="row_item_blog img_width">

            <article class="article_blog">
                <ul id="ajax-posts2" class="list_article_blog">

	        <?php if ( have_posts() ) : $count = 0; while ( have_posts() )  : the_post(); $count++; ?>
                    <li <?php if ($count % 2 == 0 ) { ?> >
                        <a href="<?php the_permalink(); ?>" class="link_article_blog">
			                <?php echo get_the_post_thumbnail(get_the_ID()); ?>
                            <div class="item_text_list_article_blog">
				                <?php $cats = get_the_category($id); ?>
                                <p class="division_ar_bl"><?php echo $cats[0]->name; ?></p>
                                <div class="text_list_article_blog">
                                    <h3 class="title_list_article_blog"><?php the_title(); ?></h3>
                                    <p class="sub_title_list_article_blog"><?php echo carbon_get_post_meta( get_the_ID(),'post_subtitle' ); ?></p>
                                </div>
                            </div>
                        </a>
                    </li>
                    <?php } ?>
	        <?php endwhile; ?>
	        <?php endif; ?>
                </ul>
            </article>


            <div class="item_news_blog">
                <ul class="list_news_blog img_width">

                <?php if ( have_posts() ) : $count = 0; while ( have_posts() )  : the_post(); $count++; ?>

                            <li <?php if ($count % 2 ) { ?> >
                                <a href="<?php the_permalink(); ?>"><?php echo get_the_post_thumbnail(get_the_ID()); ?></a>
								<?php $cats = get_the_category($id); ?>
                                <a class="rublic_news_blog" href="<?php get_category_link( $cats ); ?>"><?php echo $cats[0]->name; ?></a>
                                <h3 class="title_news_blog"><a href="<?php the_permalink(); ?>"><?php the_title(); ?> <span><?php echo carbon_get_post_meta( get_the_ID(),'post_subtitle' ); ?></span></a></h3>
                            </li>

	                <?php } ?>
                <?php endwhile; ?>
                <?php endif; ?>

                </ul>
            </div>
        </div>

Все работает как нужно

Answer 2

[Артем Золин]

Я для подобных сеток не долго думая беру masonry

PS. Вам надо было указывать тег CSS, там любят решать подобные задачки

Comments

[akf_13rm]

Согласен, masonry удобно в таких случаях (или на гридах что то придумать)
Но у меня была уже готовая верстка, поэтому четные нечетные посты подошли