使用Get_Posts向每隔一个帖子添加类

时间:2012-03-15 作者:Dean Elliott

我目前正在使用这个小循环来显示使用“事件”自定义帖子类型的帖子列表

<?php global $post; // required
    $args = array(\'post_type\' => \'events\');
    $custom_posts = get_posts($args);
    foreach($custom_posts as $post) : setup_postdata($post);
?>


<ul><li class="post">Content goes here</li></ul>

<?php endforeach; ?>
我想做的是向其他每个列表项添加一个类,以便我可以交替设置它们的样式(例如,一个白色、一个黑色、一个白色、一个黑色)

我以前用标准循环做过这件事,但我只是转换过来获取\\u帖子,所以我有点卡住了。

任何帮助都会很好。

提前感谢

3 个回复
SO网友:Stephen Harris

一个简单的解决方案是在列表中的每一个其他帖子中添加一个交替类。特别是,(在您的style.css中)设置列表元素的样式<li> 以一种特定的方式,然后对特定类的列表元素使用这种样式<li class=\'my-alternate-class\'>. 班级my-alternate-cass 将应用于其他所有列表元素:

<?php global $post;
    $args = array(\'post_type\' => \'events\');
    $custom_posts = get_posts($args);
    if($custom_posts):?>
         <ul>;
         <?php foreach($custom_posts as $post) : setup_postdata($post);?>
              <?php $class = (empty($class) ? "class=\'my-alternate-class\'" : "");?>
              <li <?php echo $class;?>>Content goes here</li>
         </ul>;
         <?php endforeach; ?>
    <?php endif; ?>
    //Remember to wp_reset_postdata() afterwards
    wp_reset_postdata();
?>
请注意这一点未经测试

我还添加了wp_reset_postdata() 否则您的网站可能会崩溃。

SO网友:Zsono

我知道CSS3解决方案:

li {background: #000;}
li:nth-child(odd) {background: #fff;}
jQuery也可以做到这一点,其中#eventlist 是无序列表的id:

jQuery(document).ready(function(){
  jQuery(\'#eventlist li:nth-child(odd)\').addClass(\'alternate\');
});
然后:.alternate {background: #fff;}

SO网友:Cody MacPixelface

$counter = 0; // Reset counter before the loop
$thenumber = ( $counter%2 ) + 1; // Set counter reset (every 2nd count in this example)
$counter++; // Increment number

echo $thenumber; // Echoes 1, 2, 1, 2, 1, 2 and so on...
可以这样使用:

<li class="post postCount<?php echo $thenumber; ?>">Content goes here</li>
这样你就可以

<li class="post postCount1"></li>
<li class="post postCount2"></li>
<li class="post postCount1"></li>
希望这能奏效!

(顺便说一下,您可能需要移动<ul> 标记在循环外部,因此您只有一个列表,其中列表项在内部循环)

结束