如何对作者的 Divi 博客帖子进行颜色编码

Divi 的主要目标之一是确保您网站上的每个元素都看起来不错，博客文章也不例外。 然而，总是有改进的余地，并且按作者对您的博客文章进行颜色编码为用户提供了一种更有效地浏览您的内容的方法（以及识别他们最喜欢的作者！）。

在本文中，我们将更多地讨论为什么您可能想要对 Divi 博客文章进行颜色编码，以及如何通过两个简单的步骤进行操作。 是时候涂上新的油漆了！

为什么你应该考虑对你的 Divi 博客文章进行颜色编码

在我们继续之前，让我们澄清一下对 Divi 博客文章进行颜色编码的含义。 在下一节中，我们将教您如何为每个作者分配一种颜色，作为他们自己帖子的背景。 在这个例子中，我给我自己的帖子（作为author1）分配了一个非常吸引人的浅蓝色：

效果本身相对简单，但它提供了一种区分作家的有效方式。 用户可以一目了然地轻松识别他们最喜欢的作家的新作品。 当然，让作者的名字更加突出可能也有同样的效果，但可能没有那么醒目。

您唯一关心的是您对颜色的选择。 以本节开头的截图为例 - 我们的 Divi 博客索引使用白色背景，因此我们决定为作者的帖子坚持使用浅色柔和的颜色。 让我们看看如果我们选择不同的配色方案会发生什么：

当然，这是一个极端的例子，但它有助于我们说明我们的观点。 如果您想对帖子进行颜色编码，则需要仔细考虑您的调色板，并在必要时使用合适的工具来提供帮助。 使用对比色突出每篇文章之间的差异可以帮助用户快速识别作者，但它也会破坏您博客的风格并使您难以阅读您的内容。

如何按作者对 Divi 博客帖子进行颜色编码（分 2 个步骤）

现在我们已经介绍了理论，是时候开始讨论如何对 Divi 博客文章进行实际颜色编码了。 启用此功能只需要两个步骤，但在开始之前有一些注意事项。

首先，您需要备份您的 WordPress 网站，这在进行更改时总是一个好主意。 其次，您需要创建一个 Divi 子主题，因此一旦主题更新，您的修改将保留。

最后，您需要使用 FTP 客户端进行第一步。 我们将使用 FileZilla，但如果您更喜欢其他工具，请使用它。

第 1 步：将代码片段添加到您的子主题的functions.php文件中

为此，您需要打开 FTP 客户端并登录到您站点的服务器。 从那里，前往public_html / wp-content/themes/目录，然后找到您的子主题文件夹。 请记住， public_html或根文件夹可能以www或您站点的域命名，具体取决于您的主机：

找到子主题的文件夹后，打开它并查找其中的functions.php文件。 现在，右键单击它并点击显示为View/Edit的选项：

这将提示您使用默认文本编辑器打开文件。 由于我们正在处理子主题，因此您的functions.php文件除了将其父级的函数排入队列之外，大部分应该是空的。 我们将添加一个片段，该片段会自动为您的每个作者创建一个带有author-前缀的新类。 例如，如果您有一个名为 John 的 WordPress 用户，您可以使用author-john类。 这将使我们能够在以后添加一些 CSS 代码。

接下来，在// END ENQUEUE PARENT ACTION行之后添加以下 PHP 代码段：

function et_set_author_class( $classes ) {$classes[] = 'author-' . strtolower( str_replace( ' ', '-', get_the_author() ) );

return $classes;}

add_filter( 'post_class', 'et_set_author_class' );

现在保存您的更改，关闭编辑器，您就完成了！ 请记住，无论您与哪个作者打交道，您都需要使用小写字符来让您的班级工作。 这对于第二步很重要。

第 2 步：使用 Divi 的自定义 CSS 选项为每个作者指定颜色

现在我们的新功能已准备就绪，下一步是为您的每个作者设置颜色。 Divi 使您能够通过其自定义 CSS功能执行此操作，因为您在其中添加的任何代码都会影响您的整个主题。 要找到它，请转到您的 WordPress 仪表板并导航到Divi > 主题选项选项卡，然后向下滚动到页面末尾的自定义 CSS框：

您需要在此字段中为每位作者添加一行新的 CSS。 例如，如果您有一个用户名为author1的作者，您可以通过以下方式为他们设置特定颜色：

.author-author1 {background-color: #C1F3FA !important;}

请记住，你需要添加作者-前缀为您的课，无论您的用户名。 在指明背景颜色后，您还需要确保将代码声明为!important 。 简而言之，这赋予了代码更多的权重并覆盖了可能出现的任何冲突——没有它，这个功能将无法工作。

让我们回顾最后一个例子。 在此，我们将为两位作者分配不同的颜色。 这是我们添加到我们的 Divi 自定义 CSS 字段的代码：

.author-author1 {background-color: #C1F3FA !important;}

.author-author2 {background-color: #F9FCB8 !important;}

现在，这是前端的样子：

撇开您选择的颜色不谈，您还可以对 Divi 博客文章进行其他调整。 例如，您可以通过多种方式调整博客摘录的长度或设置帖子“卡片”的样式。 您的主要目标应该是为您自己的博客找到完美的风格，所以不要害怕玩弄 Divi，看看它可以做什么！

结论

由作者对您的博客文章进行颜色编码是一项简单的功能，可以帮助用户更轻松地浏览您的内容（尤其是当您有大量存档时）。 此外，您的许多用户可能会很高兴能够仅通过颜色识别他们最喜欢的作者的帖子。

在开始调整文件之前，请记住备份您的站点并设置子主题，这样您的更改将在未来保持不变。 完成后，您需要遵循以下两个步骤来按作者对 Divi 博客文章进行颜色编码：

1. 修改您的子主题的functions.php文件。
2. 使用 Divi 的自定义 CSS 选项为每个作者指定一种颜色。

您对如何对作者的 Divi 博客文章进行颜色编码有任何疑问吗？ 在下面的评论部分提问！

文章缩略图由 RaZZers/shutterstock.com 提供。