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

2020-07-15
WordPress行业动态

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

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

在WordPress中设置个人帖子的样式

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

post_class()主题使用一个名为WordPress的核心功能，告诉WordPress在何处添加这些默认CSS类用于帖子。

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

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

.post-id
.post
。附件
。黏
.hentry（hAtom微格式页面）
.category-ID
。分类名称
。标签名
.format- {格式名称}
.type- {post-type-name}
。具有后缩略图
.post-password必填
.post-password-protected

输出示例如下所示：

<articleid="post-412"class="post-412 post type-post status-publish format-standard hentry category-news">

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

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

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

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

让我们看另一个例子。

这次，我们将为称为“新闻”的特定类别下的所有帖子设置样式。

为此，我们可以在主题中添加以下自定义CSS”

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

该CSS将影响新闻类别下的所有帖子。

职位类功能

主题开发人员使用post_class函数告诉WordPress在何处添加帖子类。通常它在<article>标签中。

post class函数不仅加载默认的WordPress生成的CSS类，还允许您添加自己的类。

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

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

您可以使用以下属性添加自己的自定义CSS类：

<article id="post-<?php the_ID(); ?>"<?php post_class('longform-article'); ?>>

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

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

<?php $custom_classes= array( 'longform-article', 'featured-story', 'interactive', );?><article id="post-<?php the_ID(); ?>"<?php post_class( $custom_classes); ?>>

基于作者的风格不同

the_posts函数生成的默认CSS类不包含作者姓名作为CSS类。

如果要基于作者自定义每个帖子的样式，则需要首先将作者名称添加为CSS类。

您可以使用以下代码段执行此操作：

<?php $author= get_the_author_meta('user_nicename'); ?><article id="post-<?php the_ID(); ?>"<?php post_class( $author); ?>>

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

上面的代码将为您提供如下输出：

<article id="post-412"class="peter post-412 post type-post status-publish format-standard hentry category-news">

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

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

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

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

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

为了获得评论数，您需要在主题文件中添加以下代码。该代码位于WordPress循环内，因此您也可以将其添加在<article>标记之前。

<?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= 'emerging'; } elseif($my_comment_count>= 20) { $my_comment_count= 'popular'; }?>