如何向帖子中添加10个不同的CSS类

时间：2014-05-25 作者：dzdesigner

如何为每个博客页面的10篇文章中的每篇文章分配不同的css类？

像这样：

<li class="first-post">..
<li class="second-post">..
.
.
.
<li class="tenth-post">
--
Second page
--
<li class="first-post">..
<li class="second-post">..
..
等等！非常感谢你的帮助。

3 个回复
SO网友:fuxia

使用该功能post_class() 在模板中：

<div <?php post_class(); ?>>
// your post content
</div>
然后在上为每个筛选器的post类添加计数器post_class:

// functions.php
add_filter( \'post_class\', function( Array $classes ) {

    static $number = 1;

    $classes[] = \'post-number-\' . $number++;

    // reset the number
    if ( 11 === $number )
        $number = 1;

    return $classes;
});
现在每个条目上都有一个新类post-number-1, post-number-2 等等

SO网友:тнє Sufi

一个简单的计数器也可以做到这一点：

<?php $counter = 1; ?>
<?php //wp loop start ?>
<div class="css-class-<?php echo $counter ?>">
</div>
<?php $counter++; ?>
<?php //end wp loop ?>
如果要使用更好的css类命名，可以使用数组：

<?php $class_name = array ( \'first-post\', \'second-post\', ........, \'tenth-post\' );
$arrKey = 0; ?>
<?php //wp loop start ?>
<div class="css-class-<?php echo $class_name[$arrKey] ?>">
</div>
<?php $arrKey++; ?>
<?php //end wp loop ?>

SO网友:Mayeenul Islam

正如@toscho所说，这是完美的。您还可以使用其帖子ID区分每个博客帖子，如下所示：

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
...
</article>
会有#post-1 对于帖子id为1的帖子，依此类推。。。

结束
标签： css   小码农  

相关推荐

加载AJAX后，WP视频媒体播放器无法加载正确的CSS

我有一篇使用WP的帖子[video] 显示我的视频文件的快捷码。应该是这样的：但看起来是这样的：在我单击“加载更多帖子”之后，AJAX调用。在我点击帖子后，视频播放器将看起来像我想要的样子。只有当文章加载了AJAX时，才会出现这样的情况。谁能告诉我怎么了？谢谢