如何在wordpress的每三个帖子上添加css类?

时间:2014-08-25 06:09:24

标签: php css wordpress

我想在页面上的每三个帖子显示中添加一个css类。我尝试过以下代码:

 <?php if (have_posts()) : ?>
 <?php $c = 0;
     while (have_posts()) : the_post(); $c++;
        if( $c == 3) {
            $style = 'third';
            $c = 0;
        }
        else $style='';
     ?>
     <div <?php post_class($style) ?> id="post-<?php the_ID(); ?>">

3 个答案:

答案 0 :(得分:3)

我从某个地方得到了这个,不记得在哪里,所以它不是我的,但是我已经使用它并且像魅力一样,因为它适用于任何页面,存档等:

<div <?php post_class( 0 === ++$GLOBALS['wpdb']->wpse_post_counter % 3 ? 'third' : '' ); ?>>

但是,假设您使用的是默认的.post类,那么您可以通过CSS轻松定位

.post:nth-child(3){your code}

或您的帖子使用的任何课程

答案 1 :(得分:1)

尝试改变

 while (have_posts()) : the_post(); $c++;
 if( $c == 3) {
        $style = 'third';
        $c = 0;
    }
    else $style='';

 while (have_posts()) : the_post();
      if( $c % 3 == 0 )
         $style = 'third';
       else
         $style = '';

并在while循环结束之前增加变量$c++;

我觉得

<?php post_class($style) ?> id="post-<?php the_ID(); ?>">

正在工作,如果不是将其改为

<?php class = "<?php $style; ?>" id="post-<?php the_ID(); ?>">

答案 2 :(得分:1)

您无需更改任何.php文件或function。您只需通过CSS即可实现此目的。

#content div:nth-child(3n)
{
    background-color: yellow; 
}

注意:只需使用您的帖子div或类选择器更改#content div,就是这样,您已经完成了设置!

以下是演示:jsFiddle

希望它有所帮助!