到目前为止,我还没有接触过word press试图创建一条时间线。。我想第二个帖子应该在右侧向上,但在运行循环后,它看起来像这样,请帮助我实现这一点。这是我的代码。。
<div class="timeline">
<?php $args = array(
\'category_name\' => \'blog\',
\'posts_per_page\' => 4
);
$counter = get_the_ID();
$query = new WP_Query($args);
if( $query->have_posts() ) : while( $query->have_posts() ) : $query->the_post(); $counter++;
?>
<h4>start</h4>
<div class="container left">
<?php if( $counter % 2 == 0 ):?>
<div class="timeline-content">
<h2><?php the_title();?></h2>
<p><?php the_content();?></p>
</div>
<?php endif;?>
</div>
<div class="container right">
<?php if( $counter % 2 == !0 ):?>
<div class="timeline-content">
<h2><?php the_title();?></h2>
<p><?php the_content();?></p>
</div>
<?php endif;?>
</div>
<?php endwhile; wp_reset_postdata(); ?>
<?php endif;?>
最合适的回答,由SO网友:WebElaine 整理而成
您的代码为每个post-a创建两个div<div class="container left">
和a<div class="container right">
. 每次都有一个是空的,因为您需要检查$counter
变量(已设置为post ID),因此只有一个div最终包含一个post。
Tom关于使用CSS的建议nth-child
更实用。首先,post ID并不总是按顺序递增。如果作者编辑了一篇文章(修订版已打开),或任何时候有人上传媒体或添加其他文章类型,那么该文章现在将具有下一个ID,因此您在此处获取的文章很可能是非连续的,因此有时您会得到两个"container left"
一排或两排div"container right"
div,因为它们的post id都是奇数或偶数。另一方面,这也将解决每次迭代输出2个div的问题。