如何在 WordPress 中使用 CSS 进行简单的样式调整

WordPress 使您能够在没有技术知识的情况下创建一个功能强大且引人入胜的网站。 但是,如果您想充分利用您的网站,学习一点编码知识会大有帮助。 您可以开始对您的网站进行有意义的更改的最快方法之一是学习如何在 WordPress 中使用 CSS。

层叠样式表 (CSS) 是网页设计中最重要的语言之一。 对您的网站进行 CSS 调整可让您自定义其外观、布局、字体、颜色等。 与主题相比,CSS 可以更全面地控制网站的外观——而且使用起来并不难。

什么是 CSS(以及它是如何工作的)

首先,让我们回顾一下超文本标记语言 (HTML)。 这是用于创建 WordPress 网站的主要语言,本质上是描述性的。 HTML 代码告诉 Web 浏览器有关内容的各种元素。 例如,它指示哪个文本是标题的一部分,哪个是正文段落的一部分。

如果您曾经在 WordPress 编辑器中查看过“文本”选项卡,您就会看到正在使用的 HTML:

WordPress 编辑器中的文本视图。

您还可以使用 HTML 以某种方式规定您网站的样式。 但是,这是完成工作的笨拙方法。 例如,如果您想将所有帖子标题设为紫色,则需要分别向每个标题添加包含相同指令的 HTML 代码。

这就是级联样式表 (CSS) 派上用场的地方。 这种语言用于规定 HTML 元素的显示方式——包括它们的大小、布局、颜色、字体等。 例如,您可以使用带有 CSS 的几行代码更改站点上所有标题的颜色,而无需更改内容的 HTML。

以这种方式保持结构和样式分开,可以让您完全控制站点的外观,并让您随时轻松进行更改。 这也意味着您可以在不了解任何 HTML 的情况下开始在 WordPress 中使用一些基本的 CSS(尽管了解 HTML 的基础知识确实有助于加快这个过程)。

在 WordPress 中添加 CSS 的位置

虽然您可以将 CSS 直接添加到 WordPress 主题的样式表中,但我们不推荐这种方法,因为它很容易出错,并且在更新主题时您所做的任何更改都会被覆盖(除非您使用子主题)。

幸运的是,有一个更简单的解决方案。 要将 CSS 添加到 WordPress,您只需要:

  • 导航到 WordPress 仪表板中的外观 > 自定义以打开 WordPress 定制器
  • 从 WordPress 定制器界面左侧的菜单中选择附加 CSS 选项:

WordPress 定制器中的 CSS 部分。

此区域中的(当前)空编辑器使您可以输入 CSS 代码行,而无需对现有样式表进行排序。 您可以根据需要在此处添加任意数量的 CSS – 只需在其自己的行中包含每个新片段。 此外,您可以在实时预览中看到您的更改生效。 这样,在将它们发布到您的网站之前,您就会知道它们是否看起来正确。

此外,此编辑器将帮助您“验证”您的 CSS,这是一种奇特的说法,它会在您犯任何明显错误时发出警告。

如果您对可以在此处进行哪些 CSS 调整感到好奇,请不要担心。 留在仪表板的此页面上,我们将探索一些方法来开始使用 CSS 自定义您的网站外观。

如何开始使用 CSS 自定义您的 WordPress 网站

正如我们之前提到的,您可以在 WordPress 中使用 CSS 更改站点外观的几乎任何方面。 天空确实是这里的极限。 然而,现在,我们会保持简单,看看你可以做的一些基本的 CSS 调整。

我们已经提到改变文本颜色,所以让我们从那里开始。 如果您真的希望您的 WordPress 帖子吸引访问者的注意力,您可以尝试更改每个帖子标题的颜色。 这是 27 个 WordPress 主题中的基本帖子的样子:

WordPress 中的基本帖子。

现在,将此代码添加到定制器中的附加 CSS 框中:

h1{
颜色:紫色;
}

如您所见,帖子标题的颜色已从黑色变为紫色:

在 WordPress 中使用 CSS 更改帖子的标题颜色。

同样的调整也将应用于您网站上的所有其他帖子。 除了简单地命名颜色之外,您还可以使用十六进制代码来获得恰到好处的阴影。 只需将紫色替换为 #9C33FF(或您想使用的任何颜色)。 当您对新色调感到满意时,请选择屏幕顶部的“发布”以使您的更改生效。

接下来,如果您想对正文进行一些更改怎么办? 让我们通过在新行中添加以下代码来编辑它的字体系列和大小:

p{
字体系列:格鲁吉亚;
字体大小:20px;
}

同样,您可以立即在定制器中看到结果:

更改帖子的字体类型和大小

最后,让我们通过添加浅蓝色背景和一些填充来使侧边栏更加突出。 在新行中,粘贴此 CSS:

.widget {
背景:#B9EBFA;
填充:25px;
}

这会在侧边栏后面放置一个简单的背景:

使用 CSS 更改站点的侧边栏背景

请记住,此代码将影响您的所有小部件区域,包括您的页脚。 如果您愿意,您还可以对特定小部件进行更改。 例如,您可以仅向搜索小部件添加背景,方法是将上面代码中的 .widget 替换为 .widget_search:

使用 CSS 编辑搜索小部件

在这一点上,您可能开始了解 CSS 在幕后是如何工作的。 CSS 片段的第一行指定您要更改的元素——例如帖子标题 (h1)、段落中包含的文本 (p) 或您的小部件区域 (widget)。 括在括号中的以下几行包含有关应更改内容的具体说明。

在哪里可以了解有关 CSS 的更多信息

网上有很多有用的指南,可以帮助您更多地了解 CSS 以及您可以影响的最常见元素。 在此之前,如果您正在努力找出进行特定更改所需的代码,一个简单的 Google 搜索通常会引导您找到答案。 Mozilla 的 MDN 网络文档等资源通常在 Google 中排名靠前,并且在解释 CSS 的各个方面做得很好。

稍加练习,您会发现自己很快就能轻松添加 CSS。

结论

如果您是初学者,处理您网站的代码似乎令人生畏。 但是,在进行基本调整时,您的网站所依赖的许多语言都出人意料地对用户友好。 学习在 WordPress 中有效地使用 CSS 可能需要一些时间,但它将为您提供对网站外观和布局的前所未有的控制。

与其直接更改主题的 CSS 样式表,不如使用 WordPress 定制器快速安全地添加 CSS 代码。 此过程使您可以调整各种元素的颜色、大小、字体和位置,而不会永久影响活动主题的核心代码。 更重要的是,您将能够实时看到您的更改,因此您可以确切地知道它们会产生什么效果。

原创文章,作者:WPJIAN,如若转载,请注明出处:https://wpjian.com/tips/2021060846077.html