实际上,只有当主题的CSS或JS依赖于它输出的内容时,才需要使用它。它本质上是将相关类名填充到HTML标记中,您可以根据当前帖子/类别/诸如此类的内容将其放在HTML标记上。因此,在单个帖子模板上:
<article <?php post_class(); ?>>
可能输出:
<article class="post post-123 category-3 category-cats status-publish hentry">
然后,您可以使用这些类来使用CSS(或JavaScript的挂钩)设置样式。
将其与自定义帖子类型一起使用时,还将输出帖子类型:
<article class="mycpt type-mycpt post-345 category-3 category-cats status-publish hentry">
它实际上总是输出post类型。在第一个示例中,
post
是post类型。
请注意,您还可以手动传入自定义类名;由于函数实际上输出class属性本身(而仅输出类名列表),因此这是将WP生成的类和自定义类都获取到元素上的唯一方法。因此:
<article <?php post_class( \'my-custom-class\' ); ?>>
将添加
my-custom-class
到WordPress输出的类字符串。
法典文章:https://codex.wordpress.org/Function_Reference/post_class
EDIT: 从注释中可以看出,“好的,那么应该在单个贴子页面上使用post\\u class()
您可以在任何模板上使用它。实际上,它甚至可能更常用于归档类型的页面。假设您有一个包含三类帖子的博客:教程、社论和评论。在你的网站主页上,你可能会有一个网格,其中所有这些帖子都列在一个大列表中。使用CSS和post_class()
您可以为每个条目的类型设置不同的样式。比如,在任何带有class="category-tutorial"
, 任何带有class="category-editorial"
等等
在…上http://ecotrust.org/search/farms 我使用搜索结果页面上的post类让用户知道每个结果的内容类型。我们从来没有为每个图标设计过图标,所以它只是简单的插入CSS内容的文本。
// a mixin that puts the little words in the bottom right corner
.type-identify(@content-type:" ") {
&:before {
content: @content-type;
bottom: 20px;
color: #cccccc;
clear: none;
display: block;
position: absolute;
right: 0;
text-align: right;
width: 160px;
.small-info();
}
&:hover:before {
color: #aaaaaa;
}
}
// then call it based on the post_class() output for different post types,
// including custom post types
.type-post {
.type-identify("Blog post");
}
.type-page {
.type-identify("Page");
}
.type-press_release {
.type-identify("Press release");
}
.type-portfolio_item {
.type-identify("Portfolio");
}
.type-project {
.type-identify("Project");
}