如何将自定义CSS添加到WordPress站点:探索3种方法

技术教程 2022年3月15日

765 0 9

还有一个以上的方法可以将自定义CSS添加到WordPress网站上.你会看到本文中的方式.

在这个周末WordPress上，我将解释三种不同方法的优势和弱点，因此您可以决定哪个适合您，并让您继续自定义您的网站.

继续读取，或使用以下链接跳转:

查找要自定义的设计元素
WordPress和CSS如何一起工作
方法#1:编辑主题的style.css文件
方法#2:使用子主题编辑CSS
方法#3:使用插件编辑CSS

查找要自定义的设计元素

一旦您孤立了您想要更改的主题的一部分(例如，帖子标题)，您需要确定应用于它的CSS属性，以便您可以进行相应的更改.幸运的是，这个过程并不复杂.

CSS使用选择器来确定适用于您网站特定部分的设计声明.通常，这是通过为特定元素指定"类"来完成的.但是，CSS还可用于定义整个元素的布局(例如，""标记)或基于其ID的元素.

幸运的是，流行的浏览器允许您了解哪些选择器以及只需点击几下只需点击几个选择"页面上的元素".例如，在Google Chrome中，您只需突出显示文档的特定部分，然后右键单击，如下所示.

从出现的下拉下来选择检查元素，您将在右侧的窗口中看到设计信息.您可以看到以下的示例.

红色突出显示的项目显示，您的特定设计描述符适用于您突出显示的文本.例如，"字体大小"元素告诉您，该突出显示文本中显示的字体在13像素("13px")中大小.描述符被选座围绕着选择器围绕着卷曲的括号.相关样式表文件的名称显示在选择器的右侧.

一旦您掌握了所有这些信息，修改设计很容易.例如，如果要将13px到14px的字体更改为14px，只需搜索样式的表文件，就会向右侧显示为这些选择器("#pletin-info.block-content")并将"13px"更改为"14px."

您可以在Firefox中做同样的事情，只需突出显示页面的特定部分，右键单击它，然后从出现的菜单中选择检查元素.

WordPress和CSS如何一起工作

是因为没有创建两个WordPress主题，所以不平等.所以，请记住，您的WordPress主题可能无法遵守100％，在以下部分中读取.

如此，它的说法，它的可能性很可能是呈现WordPress站点的CSS位于一个名为 Style.css 的文件中.这是任何类型网站的样式表的常见名称，而不仅仅是一个WordPress网站.

如果您查看该文件，您会发现它包括主题的全面的风格"指令".它超出了本教程的范围，以便以完整的详细介绍CSS语法，但如果您想深入了解它，我们建议您在这里开始使用W3Schools的课程.

如此，让我们继续前进到上述三种方法来编辑CSS！

方法#1:编辑主题的 style.css 文件

有两种方法可以访问您的主题的 style.css 文件.

一种方式是从WordPress管理仪表板上执行此操作.在左侧导航栏上，突出显示外观选项.飞出菜单应显示几个选项.在该菜单的底部，您将看到编辑器选项.单击该.

一旦您在编辑器页面上，您将看到页面右侧垂直条上的文件列表.向下滚动该文件列表.您将在页面底部看到 style.css .

如果单击该表样式表选项，则将加载和显示在屏幕中间的 style.css 文件.您可以使用该屏幕编辑文件以对您的网站的设计进行更改，但是有更好的方法来执行它(在片刻中的更多).

要找到样式表的另一种方式是浏览托管提供程序的操作系统，并在主题文件夹中找到文件.确切的位置将根据您的托管提供商而有所不同.在下面显示的示例中，网站的名称(在我们的情况下 Thecare )是 Public_html 文件夹下的文件夹.由于WordPress安装了该站点，因此您可以在 Thecare 下看到 WP-Content 文件夹.在 wp-content 文件夹下面是另一个名为主题的文件夹，这是安装所有WordPress主题的文件.由于该站点使用称为 newslettter 的主题，因此正确的 style.css 位于时事通讯-父文件夹中.

此时，您可能会问自己:"为什么有一个时事通讯-父以及 newsletter-child 文件夹?"这是一个非常好的问题，它即将被解答.