Question

我正在制作自定义主题，并且我需要在其中一个页面上设置帖子页面的样式，如下所示：http://gyazo.com/e1f7cfc03c7ba3981188077afcdf0314

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

有人能为我提供启动方式吗？我想在UL上使用Odd / Even伪类来改变div名称，但是我不能想到如何做或者从哪里开始。

谢谢！

编辑：我想或许奇数/偶数选择器结合jquery prepend / append？

Edit2：这就是我所拥有的，但它首先显示所有的赔率然后是所有的Evens，而不是替代。

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; ?>

Answer 1

由于您处于循环中，您可以使用内置循环计数器（$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; ?>

Wordpress发布奇/偶李布局

1 个答案: