如何在WordPress主题中的帖子中添加奇/偶类

Do you want to add Odd and Even classes to posts in your WordPress theme? Adding an odd and even class allows you to style every other post differently. In this article, we will show you how to add odd/even class to your post in WordPress themes.

您是否要向WordPress主题中的帖子添加奇数和偶数类？ 添加一个奇数和偶数类可让您对其他所有帖子设置不同的样式。 在本文中，我们将向您展示如何在WordPress主题中为帖子添加奇/偶类。

为什么要在WordPress主题的帖子中添加奇/偶类？ (Why Add Odd/Even Class to Your Posts in WordPress Themes?)

Many WordPress themes use an old or even class for WordPress comments. It helps users visualize where one comment ends and the next one begins.

许多WordPress主题都使用旧的甚至是WordPress注释类。 它可以帮助用户可视化一个评论的结尾和下一个评论的起点。

Similarly, you can use this technique for your WordPress posts. It looks aesthetically pleasing and helps users quickly scan pages with lots of content. It is particularly helpful for homepage of magazine or news websites.

同样，您可以在WordPress帖子中使用此技术。 它看起来在美学上令人愉悦，并可以帮助用户快速扫描包含大量内容的页面。 对于杂志或新闻网站的主页特别有用。

Having said that, let’s see how to add an odd and even class to your posts in WordPress theme.

话虽如此，让我们看看如何在WordPress主题的帖子中添加奇数和偶数类。

在WordPress主题的帖子中添加奇/偶类 (Adding Odd/Even Class to Posts in WordPress Theme)

WordPress generates default CSS classes and adds them to different items on your website on the fly. These CSS classes help plugin and theme developers add their own styles for different items.

WordPress会生成默认CSS类 ，并将它们动态添加到您网站上的不同项目中。 这些CSS类可帮助插件和主题开发人员为不同的项目添加自己的样式。

WordPress also comes with a function called post_class, which is used by theme developers to add classes to post item. See our guide on how to style each WordPress post differently.

WordPress还附带了一个名为post_class的函数，主题开发人员可使用该函数为发布项目添加类。 请参阅我们的指南，了解如何为每个WordPress帖子设置不同的样式 。

The post_class is also a filter, which means you can hook your own functions to it. This is exactly what we will be doing here.

post_class也是一个过滤器 ，这意味着您可以将自己的函数连接到它。 这正是我们在这里要做的。

Simply add this code to your theme’s functions.php file or a site-specific plugin.

只需将此代码添加到主题的functions.php文件或特定于站点的插件中即可 。

function oddeven_post_class ( $classes ) {
   global $current_class;
   $classes[] = $current_class;
   $current_class = ($current_class == 'odd') ? 'even' : 'odd';
   return $classes;
}
add_filter ( 'post_class' , 'oddeven_post_class' );
global $current_class;
$current_class = 'odd';

This function simply adds odd to the first post, then even, and so on.

此功能仅在第一个帖子中添加奇数，然后在偶数中添加，依此类推。

You can find the odd and even classes in your site’s source code. Simply take mouse to a post title and then right click to select Inspect or Inspect Element.

您可以在网站的源代码中找到奇数和偶数类。 只需将鼠标移至帖子标题，然后右键单击以选择“检查”或“检查元素”。

Now that you have added even and odd classes to your posts. The next step is to style them using CSS. You can add your custom CSS to your child theme’s stylesheet, or by using Simple Custom CSS plugin.

现在，您已经在帖子中添加了偶数和奇数类。 下一步是使用CSS设置样式 。 您可以将自定义CSS添加到子主题的样式表中，或使用简单自定义CSS插件。

Here is a sample CSS that you can use as a starting point:

这是一个示例CSS，您可以将其用作起点：

.even {
background:#f0f8ff;  
} 
.odd {
 background:#f4f4fb;
}

This is how it looked on our test site:

这是在我们的测试站点上的外观：

If you don’t know how to use CSS, then you may want to check out CSS Hero. It allows you to add CSS to any part of your WordPress site without writing any code.

如果您不知道如何使用CSS，则可以查看CSS Hero 。 它允许您将CSS添加到WordPress网站的任何部分，而无需编写任何代码。

We hope this article helped you learn how to add odd/even class to your posts in WordPress themes. You may also want to see our guide on how to style your WordPress comments layout.

我们希望本文能帮助您学习如何在WordPress主题的帖子中添加奇/偶类。 您可能还想查看有关如何设置WordPress注释布局样式的指南。

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-add-oddeven-class-to-your-post-in-wordpress-themes/