当前位置:爱推吧 » WordPress技巧 » 用Post_Class给不同的文章设计不同的Css风格

用Post_Class给不同的文章设计不同的Css风格

leader-post-class

自WordPress2.7以来,新增的 post_class 函数,可以给文章设置不同的css类.

在你的模板里面你可以用以下的代码:

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

这个函数可以改变文章的显示,虽然它的输出很受限制,幸运的是, 我们使用一些额外的php代码,可以给post_class函数增加额外的类.

它的默认输出的类如下:

  1. post-id, 这里面的id指文章的id.
  2. post type,文章的类型.
  3. Sticky,置顶
  4. category-category-name,如果你的分类是WordPress,那么它就是category-wordpress
  5. tag-tag-name,如果你的标签是php,它就是 tag-php

样式化作者

很多博客都用css区别作者与来访者的评论,那我们为什么不能给不同作者的文章用不同的css来修饰呢?

第一步,获取作者的文章,在循环之前添加如下代码:

<?php $author = get_the_author_meta('display_name'); ?>
  1. 创建一个变量$author…
  2. 给 get_the_author_meta指定了一个值

你可以查看get_the_author_meta了解更多.

第二步,给post_class添加一个类.代码如下:

<?php post_class('box ' . $author); ?>

我们把.box与动态的css类连接起来了.

于是可以用下面的css来改变文章的边框颜色.

.Alex {
border: 1px solid #0066CC;
}
.Martin {
border: 1px dashed #CC0000;
}

作者文章的类

Css突显最受欢迎的文章

这虽有点难,但是我们可以通过单篇文章评论的数量来创建不同的css

为了获得评论的数量,得在循环内部输入以下代码:

<?php
$postid = get_the_ID();
$total_comment_count = wp_count_comments($postid);
$my_comment_count = $total_comment_count->approved;
if ($my_comment_count <10) {
$my_comment_count = 'new';
} elseif ($my_comment_count >= 10 && $my_comment_count <20) {
$my_comment_count = 'ermerging';
} elseif ($my_comment_count >= 20) {
$my_comment_count = 'popular';
}
?>
  1. 用第一个变量来设置文章id的值.
  2. 我们可以用 wp_count_comments来获得评论的总数,然后赋给另一个变量.
  3. 上面那个函数得到的是所有评论,包括垃圾评论,正在审核中的评论,或已审核的评论.幸运的是我们可以用 ->approved来获取审核过的评论.
  4. 现在可以用php operators来测试变量 $my_comment_count的值.

现在我们可以用Css来为不同数量的评论创建不同的类.

.new {
border: 1px solid #FFFF00;
}
.emerging {
border: 1px dashed #FF9933;
}
.popular {
border: 1px dashed #CC0000;
}

效果图如下:

最受欢迎文章的类

小结:你可以用动态的post_class为文章创建不同的效果.只有你想不到的事,没有WordPress做不成的事.当然这些都需要你们自己来想象与创造.

发表评论

电子邮件地址不会被公开。 必填项已用*标注