wordpress后台样式_如何为每个WordPress帖子设置不同的样式

wordpress后台样式

Have you ever come across a site that style their blog posts differently? Some sites have sticky posts highlighted with a custom background whereas others may have each category post styled with a unique look. If you ever wanted to learn how to style each WordPress posts differently, then you’re in the right place. In this article, we will show you how to style each WordPress post differently.

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

Note: This tutorial requires you to add custom CSS in WordPress. You will also need to be able to use the Inspect tool. Some basic CSS and HTML knowledge is required.

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

在WordPress中设置个人帖子的样式 (Styling Individual Posts in WordPress)

WordPress adds default CSS classes to various elements on your website. A standard compliant WordPress theme must have the code required by WordPress to add CSS classes for body, posts, pages, widgets, menus, and more.

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

A core WordPress function called post_class() is used by themes to tell WordPress where to add those default CSS classes for posts.

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

If you visit your website and use the Inspect tool in your browser, then you will be able to see those classes added for each post.

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

Following are the CSS classes added by default based on what page a user is viewing.

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

• .post-id
  .post-id
• .post
  .post
• .attachment
  。附件
• .sticky
  。黏
• .hentry (hAtom microformat pages)
  .hentry(hAtom微格式页面)
• .category-ID
  .category-ID
• .category-name
  。分类名称
• .tag-name
  。标签名
• .format-{format-name}
  .format- {格式名称}
• .type-{post-type-name}
  .type- {post-type-name}
• .has-post-thumbnail
  。具有后缩略图
• .post-password-required
  .post-password必填
• .post-password-protected
  .post-password-protected

An example output would look like this:

输出示例如下所示：

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

You can style each WordPress post differently using the respective CSS classes.

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

For example, if you wanted to style an individual post, then you can use the post-id class in your custom CSS.

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

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

Don’t forget to change the post ID to match your own.

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

Let’s take a look at another example.

让我们看另一个例子。

This time we will style all posts filed under a specific category called news.

这次，我们将对所有类别的帖子(称为新闻)进行样式设置。

We can do this by adding the following custom CSS to our theme”

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

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

This CSS will affect all posts filed under news category.

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

职位类功能 (The Post Class Function)

Theme developers use the post_class function to tell WordPress where to add the post classes. Usually it is in the <article> tag.

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

The post class function not only loads the default WordPress generated CSS classes, it also allows you to add your own classes.

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

Depending on your theme, you’ll find the post_class function in your single.php file or in the content template files. Normally, the code will look something like this:

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

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

You can add your own custom CSS class with an attribute like this:

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

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

The post_class will print out respective default CSS classes along with your custom CSS class.

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

If you want to add multiple CSS classes, then you can define them as an array and then call them in the post_class function.

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

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

基于作者的风格不同 (Style Posts Differently Based on Authors)

The default CSS classes generated by the_posts function does not include author name as a CSS class.

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

If you want to customize the style of each post based on author, then you will need to first add the author name as a CSS class.

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

You can do this by using the following snippet:

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

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

This code will add the user’s nicename as a CSS class. Nicename is a URL friendly name used by WordPress. It does not have spaces, and all characters are in lowercase which makes it perfect to use as a CSS class.

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

The above code will give you an output like this:

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

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

Now you can use .peter in your custom CSS to style all posts by this particular author to look different.

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

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

使用评论数基于受欢迎程度的样式帖子 (Style Posts Based on Popularity using Comment Count)

You may have seen sites with popular posts widgets which are sometimes based on comment counts. In this example, we will show you how to style posts differently using the comment count.

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

First, we need to get the comment count and associate a class with it.

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

To get the comment count, you’ll need to add the following code in your theme files. This code goes inside the WordPress loop, so you can add it just before the <article> tag as well.

要获得评论数，您需要在主题文件中添加以下代码。 该代码位于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';
	}
?>

This code checks comment count for the post being displayed and assigns them a value based on the count. For example, posts with less than 10 comments get a class called new, less than 20 are referred to as emerging, and anything over 20 comments is popular.

该代码检查正在显示的帖子的评论计数，并根据该计数为它们分配一个值。 例如，评论少于10条的帖子将被称为“新”类，少于20条被称为“新兴”类，而评论超过20条的任何东西都是受欢迎的。

Next, you need to add the comment count CSS class to the post_class function.

接下来，您需要将注释计数CSS类添加到post_class函数。

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

This will add new, emerging, and popular CSS classes to all posts based on the number of comments each post has.

这将根据每个帖子的评论数向所有帖子添加新的，新兴的和流行CSS类。

You can add custom CSS to style posts based on popularity:

您可以根据受欢迎程度将自定义CSS添加到样式帖子中：

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

We are just adding borders, you can add any CSS rules you want.

我们只是添加边框，您可以添加所需的任何CSS规则。

基于自定义字段的样式帖子 (Style Posts Based on Custom Fields)

Hardcoding CSS classes in your theme file limits you to only those specific CSS classes. What if you wanted to decide which CSS class to add to an article as you are writing it?

在主题文件中对CSS类进行硬编码会将您限制为仅那些特定CSS类。 如果您想在编写文章时决定将哪个CSS类添加到文章中，该怎么办？

With custom fields, you can add CSS classes on the fly.

使用自定义字段 ，您可以动态添加CSS类。

First you need to add a custom field to a post, so that you can test it out. Edit a post and scroll down to custom fields section.

首先，您需要在帖子中添加一个自定义字段，以便对其进行测试。 编辑帖子，然后向下滚动到“自定义字段”部分。

Add post-class as the custom field name, and anything you want to use as CSS class in the value field.

将post-class添加为自定义字段名称，并在value字段中添加要用作CSS类的任何内容。

Don’t forget to click on the ‘Add custom field’ button to store it and then save your post.

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

Next, edit your theme files to display your custom field as the post class.

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

<?php $custom_values = get_post_meta($post->ID, 'post-class'); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class( $custom_values ); ?>>

It will output the following HTML:

它将输出以下HTML：

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

You can now add custom CSS for the post_class you added using custom field.

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

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

Custom fields can have multiple values, so you can add multiple CSS classes using the same name.

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

There are many more ways to style WordPress posts individually. As your skills grow, you’ll keep discovering new ways to style posts using different conditions.

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

We hope this article helped you learn how to style each WordPress post differently. You may also want to see our ultimate list of the most wanted WordPress tips, tricks, and hacks.

我们希望本文能帮助您学习如何为每个WordPress帖子设置不同的样式。 您可能还想查看我们最想要的WordPress技巧，窍门和hack的最终列表。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

如果您喜欢这篇文章，请订阅我们的YouTube频道 WordPress视频教程。 您也可以在Twitter和Facebook上找到我们。

翻译自: https://www.wpbeginner.com/wp-themes/how-to-style-each-wordpress-post-differently/

wordpress后台样式