北京公司网站设计:如何用作者的颜色编码Divi博客文章

2019.05.22 北京公司网站设计

62

其中之一迪维氏主要目标是确保你网站上的每一个元素看起来都很好,博客文章也不例外。但是,总有改进的余地,作者对博客文章进行颜色编码为用户更有效地浏览内容(以及识别他们最喜欢的作者)提供了一种方法。

在本文中,我们北京公司网站设计将更多地讨论为什么您可能希望对Divi博客文章进行颜色编码,以及如何通过两个简单的步骤来实现这一点。是时候换一层新漆了!

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

在我们更进一步之前,让我们先弄清楚我们对Divi博客文章的颜色编码是什么意思。在下一节中,我们将教您如何为您的每个作者分配一个颜色,该颜色将显示为他们自己的文章的背景。在这个例子中,我指定了我自己的职位(如作者1)极具吸引力的浅蓝色:

北京公司网站设计

效果本身相对简单,但它提供了一种有效的方式来区分作家。用户可以很容易地识别他们最喜欢的作家的新作品一目了然。当然,使作者的名字更突出可能有同样的效果,但它可能没有那么引人注目。

你唯一关心的就是你对颜色的选择。以本节开头的截图为例-我们的Divi博客索引使用白色背景,所以我们决定在作者的文章中坚持使用浅色的颜色。让我们看看如果我们选择不同的配色方案会发生什么:

当然,这是一个极端的例子,但它帮助我们阐明了我们的观点。如果你想给你的帖子涂上颜色,你需要考虑一下你的调色板小心,使用适当的帮助工具必要的话。使用对比颜色来突出显示每个帖子之间的差异可以帮助用户快速识别作者,但它也会破坏您的博客风格,并使您的内容难以阅读。

如何按作者编排Divi博客文章的颜色(分两个步骤)

现在我们北京公司网站设计已经讨论了这个理论,现在是时候讨论如何对Divi博客文章的颜色进行实际着色了。启用此功能只需两个步骤,但是是在开始之前要考虑的一些问题。

首先,你会想备份WordPress站点在做改变的时候,这总是个好主意。第二,你会想创建Divi子主题因此,一旦主题被更新,您的修改将保持不变。

最后,你需要使用FTP客户端第一步。我们会用FileZilla,但如果你更喜欢另一种工具,那就去做吧。

步骤1:向您的“子”主题的“代码段”添加一个代码片段Functions.php档案

为此,您需要打开FTP客户端并登录到站点的服务器。从那里,前往public_html/可湿性粉剂-内容/主题/目录中,然后查找子主题的文件夹。记住,public_html或根部文件夹可以命名为万维网或者在站点的域之后,取决于您的主机:

找到子主题的文件夹后,打开它并查找Functions.php文件在.。现在,右键单击它并点击以下选项:查看/编辑:

这将提示您使用默认文本编辑器打开文件。既然我们在讨论一个儿童主题,你的Functions.php除了对其父函数进行排队之外,文件大部分应该是空的。我们将添加一个片段,它将自动为您的每个作者创建一个新的类。作者-前缀。例如,如果有一个WordPress用户名为john,则可以使用作者-约翰班级,等级。这将使我们能够在稍后添加一些CSS代码。

接下来,在/结束ENQUEUE父行动行:

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行。例如,如果有一个具有用户名的作者作者1下面是您如何为它们设置特定颜色:

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

请记住,您需要添加作者-类的前缀,不管您的用户名如何。在指示背景色之后,还需要确保声明代码为!重要。简单地说,这给了代码更大的权重,并覆盖了可能出现的任何冲突-如果没有它,这个特性就无法工作。

让我们重温最后一个例子。在此,我们将为两个作者指定不同的颜色。下面是我们添加到Divi自定义CSS字段中的代码:

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

 

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

下面是前端的样子:

北京公司网站设计

撇开你的颜色选择,还有其他的调整,你可以对你的Divi博客文章。例如,你可以调整长度你的博客节选或者写上你的明信片以多种方式。你的主要目标应该是为你自己的博客找到完美的风格,所以不要害怕玩Divi,看看它能做什么!

结语

作者对博客文章进行颜色编码是一个简单的特性,可以帮助用户更容易地浏览内容(特别是如果您有大量的存档)。此外,你的许多用户可能会很感激能够通过颜色识别他们最喜欢的作者的文章。

在开始调整文件之前,请记住备份您的站点和设置一个儿童主题所以你的改变将在未来持续下去。一旦完成,以下是您需要遵循的两个步骤来对您的彩色代码进行颜色编码。迪维按作者分列的博客文章:

1. 修改您的子主题的Functions.php档案。

2. 使用Divi的自定义CSS选项为每个作者指定颜色。

 


最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP