如何为每个 WordPress 帖子设置不同的样式

你有没有遇到过一个网站,他们的博客文章风格不同?一些网站有自定义背景突出显示的粘性帖子,而其他网站可能会为每个类别的帖子设置独特的外观。如果您想学习如何以不同的方式为每个 WordPress 帖子设置样式,那么您来对地方了。在本文中,我们将向您展示如何为每个 WordPress 帖子设置不同的样式。

为每个帖子设置不同的样式

注意:本教程要求您在 WordPress 中添加自定义 CSS。您还需要能够使用检查工具。需要一些基本的CSS和 HTML 知识。

在 WordPress 中为单个帖子设置样式

WordPress将默认 CSS 类添加到您网站上的各种元素。符合标准的 WordPress 主题必须具有 WordPress 所需的代码,以便为正文、帖子、页面、小部件、菜单等添加 CSS 类。

主题使用一个名为 WordPress 的核心函数post_class()来告诉 WordPress 在哪里为帖子添加这些默认的 CSS 类。

如果您访问您的网站并在浏览器中使用检查工具,那么您将能够看到为每个帖子添加的这些类。

WordPress 帖子的默认 CSS 类

以下是根据用户正在查看的页面默认添加的 CSS 类。

.post-id

。邮政

。附件

。黏

.hentry(hAtom 微格式页面)

.category-ID

。分类名称

。标签名

.format-{格式名}

.type-{post-type-name}

.has-post-thumbnail

.post-password-required

.post-password-protected

示例输出如下所示:

您可以使用各自的 CSS 类对每个 WordPress 帖子进行不同的样式设置。

例如,如果您想为单个帖子设置样式,则可以在自定义 CSS 中使用 post-id 类。

.post-412 { background-color: #FF0303;color:#FFFFFF; }

不要忘记更改帖子 ID 以匹配您自己的 ID。

在 WordPress 中设置特定帖子的样式

让我们看另一个例子。

这一次,我们将为在名为新闻的特定类别下提交的所有帖子设置样式。

我们可以通过将以下自定义 CSS 添加到我们的主题来做到这一点”

.category-news {     font-size: 18px;    font-style: italic;}

此 CSS 将影响在新闻类别下提交的所有帖子。

邮政类功能

主题开发人员使用 post_class 函数告诉 WordPress 在哪里添加帖子类。通常它在

标签中。

post 类功能不仅可以加载默认的 WordPress 生成的 CSS 类,它还允许您添加自己的类。

根据您的主题,您会在 single.php 文件或内容模板文件中找到 post_class 函数。通常,代码将如下所示:

>

post_class 将打印出相应的默认 CSS 类以及您的自定义 CSS 类。

如果要添加多个 CSS 类,则可以将它们定义为数组,然后在 post_class 函数中调用它们。

>

此代码会将用户的 nicename 添加为 CSS 类。Nicename 是 WordPress 使用的 URL 友好名称。它没有空格,所有字符都是小写的,非常适合用作 CSS 类。

上面的代码会给你这样的输出:

现在,您可以在自定义 CSS 中使用 .peter 来设置此特定作者的所有帖子的样式,使其看起来不同。

.peter { background-color:#EEE;border:1px solid #CCC; }

使用评论计数基于受欢迎程度的样式帖子

您可能已经看到具有流行帖子小部件的网站,这些小部件有时基于评论计数。在此示例中,我们将向您展示如何使用评论数为帖子设置不同的样式。

首先,我们需要获取评论计数并将一个类与之关联。

要获得评论计数,您需要在主题文件中添加以下代码。此代码位于WordPress 循环中,因此您也可以将其添加到

标记之前。

approved;    if ($my_comment_count <10) {        $my_comment_count = 'new';    } elseif ($my_comment_count >= 10 && $my_comment_count <20) {        $my_comment_count = 'emerging';    } elseif ($my_comment_count >= 20) {        $my_comment_count = ‘popular’;    }?>

此代码检查正在显示的帖子的评论计数,并根据计数为它们分配一个值。例如,少于 10 条评论的帖子被称为新的,少于 20 条的被称为新兴类,超过 20 条评论的帖子很受欢迎。

接下来,您需要将评论计数 CSS 类添加到 post_class 函数。

添加 post-class 作为自定义字段名称,以及任何您想在 value 字段中用作 CSS 类的内容。

不要忘记单击“添加自定义字段”按钮来存储它,然后保存您的帖子。

接下来,编辑您的主题文件以将您的自定义字段显示为帖子类。

ID, ‘post-class’); ?>

您现在可以为使用自定义字段添加的 post_class 添加自定义 CSS。

.trending{background-color:##ff0000;}

自定义字段可以有多个值,因此您可以使用相同的名称添加多个 CSS 类。

还有更多单独设置 WordPress 帖子样式的方法。随着技能的提高,您将不断发现使用不同条件设置帖子样式的新方法。

我们希望本文能帮助您了解如何以不同的方式设置每个 WordPress 帖子的样式。您可能还想查看我们最想要的 WordPress 提示、技巧和黑客的最终列表。