Wordpress发布奇数/偶数Li布局 - Wordpress Posts odd/even Li layout

我正在开发一个自定义主题，在其中一个页面上，我需要对帖子页面进行如下样式设置：http://gyazo.com/e1f7cfc03c7ba3981188077afcdf0314

灰色框是图像，红色框是内容。我需要使用一个奇数/偶数Li/Ul伪类/选择器，但我不知道如何做到

有人能给我一个启动它的方法吗？我想在UL上使用Odd/Even伪类来更改div名称，但我想不出该怎么做，也不知道从哪里开始。

谢谢！

编辑：我想也许奇数/偶数选择器与jquery prepend/append结合在一起？

编辑2：这就是我所拥有的，但它首先显示所有的赔率，然后显示所有的偶数，而不是交替显示。

PHP：

       <?php $i++; if(($i % 2) == 0) : $wp_query->next_post(); else : the_post(); ?>

<div class="section group">
<div class="col span_1_of_2 blue doubleheight">
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('large'); ?></a>
</div>
     <div class="col span_1_of_3_30 blue doubleheight">
     <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
     <div class="post-text"><?php the_excerpt(); ?></div>
     </div>

</div>
<?php echo $i; ?>
 <?php endif; endwhile; ?>

<?php while(have_posts()) : ?>
<?php $i++; if(($i % 2) !== 0) : $wp_query->next_post(); else : the_post(); ?>
<div class="section group">
<div class="col span_1_of_3_30 blue doubleheight">
     <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div class="post-text"><?php the_excerpt(); ?></div></div>

<div class="col span_1_of_2 blue doubleheight">
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('large'); ?></a>
</div>
</div>
<?php echo $i; ?>
<?php endif; endwhile; ?>

由于您处于循环中，您可以使用内置循环计数器（$wp_query->current-post）将不同的类添加到所有赔率或所有偶数或两个

没有必要运行两个循环。下面是我如何在我的网站上使用这个来创建两个专栏的例子

<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post();  ?>
        <?php /* Start the Loop */ ?>
        <div class="entry-content-<?php if( $wp_query->current_post%2 == 1 ){ echo ' left-post';}else{ echo ' right-post';} ?>">
        <?php get_template_part( 'content', get_post_format() ); ?>
        </div>
<?php endwhile; ?>

编辑

我在最初的回答中误解了你，但你仍然可以使用我在那里使用的相同想法。这是你可以试试的东西。只需用这个替换您的所有代码

<?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post();  ?>
    <?php /* Start the Loop */ 
        if($wp_query->current_post%2 == 1 ) { ?>
            <div class="section group">
                <div class="col span_1_of_2 blue doubleheight">
                    <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('large'); ?></a>
                </div>
                <div class="col span_1_of_3_30 blue doubleheight">
                    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                    <div class="post-text">
                        <?php the_excerpt(); ?>
                    </div>
                </div>

            </div>
        <?php }else{ ?>
            <div class="section group">
                <div class="col span_1_of_3_30 blue doubleheight">
                    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                    <div class="post-text">
                        <?php the_excerpt(); ?>
                    </div>
                </div>

                <div class="col span_1_of_2 blue doubleheight">
                    <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('large'); ?></a>
                </div>
            </div>
        <?php }
    <?php endwhile; ?>
 <?php endif; ?>