如何在 WordPress 中添加 CSS(简单方法)

技术教程 2021年11月6日
3.3 0

WordPress 是最受欢迎的内容管理系统 (CMS) 的原因之一是因为它非常适合初学者.您无需具备任何技术知识、编码技能或网络开发经验，即可从头开始创建功能齐全的网站.

也就是说，对于那些准备加强他们的游戏并使他们的网站更具视觉吸引力的人来说，有一种方法可以自定义您的网站，只需一点编码知识.

学习如何在 WordPress 中使用 CSS 并不可怕.事实上，这真的很容易做到.

如果您准备冒险并学习如何在您的 WordPress 网站上使用一些代码以使其在竞争中脱颖而出，请继续阅读.今天我们将解释什么是 CSS 以及如何使用它来更改您网站的设计.

WordPress 中的 CSS 是什么?

层叠样式表 (CSS) 是一种用于网页设计的语言，用于更改网站的视觉外观.例如，您可以使用它来更改站点的布局、字体、颜色等.在 WordPress 中使用 CSS 的好处在于，它可以让您覆盖一些主题的默认设置.

这对那些使用流行的 WordPress 主题的人很有帮助.当一个主题被广泛使用时，尽管内容因站点而异，但基本设计是相同的.这使得您的网站很难与使用相同主题和相同设计元素的所有其他网站不同.

CSS 是如何工作的?

您听说过超文本标记语言 (HTML) 吗?

HTML 是用于创建 WordPress 网站的主要语言.它的工作是告诉网络浏览器您的网站是什么样的.这样，当网站访问者点击您的网站时，他们会看到颜色、图像和书面内容等内容.如果没有 HTML，您的网站将是无人能理解的代码页.

要查看 HTML 的外观，您只需单击 Gutenberg 编辑器右上角的三个点并选择代码编辑器:

编辑 HTML 以使您的网站看起来像某种方式的问题在于它非常耗时(更不用说，您必须了解代码).例如，假设您想将所有帖子标题更改为不同的颜色.您将不得不查看您写过的每一篇博文并手动编辑 HTML 代码以更改颜色.

这就是使用 CSS 如此有用的原因.

CSS 有助于确定您网站的 HTML 元素在您的网站上的外观.最好的部分是，它是一种全面的语言，只需几行简单的代码即可应用于您网站上的所有元素.

在 WordPress 中使用 CSS 可让您完全控制网站的外观，并使更改某些元素变得轻而易举.而且您甚至不必了解 HTML 的工作原理.您可以向您的网站添加一些 CSS 代码并更改其外观.真的就是这么简单.

如何在 WordPress 中添加 CSS

因此，您知道要对 WordPress 网站进行一些设计更改.而且您现在知道使用 CSS 是一种选择，即使您没有编码知识.

但是如何在 WordPress 中添加 CSS?

1.WordPress 主题样式表

您可以将 CSS 代码片段直接添加到 WordPress 主题的样式表中，以更改网站的整体外观.

也就是说，对于大多数人来说，不推荐使用这种方法.向父主题添加代码会带来一些风险:

  • 如果您不知道自己在做什么，您可能真的会把网站的外观搞得一团糟
  • 每次更新主题时，通过添加 CSS 所做的所有更改都将丢失，这意味着每次运行更新时都必须重新开始
  • 如果在错误的地方进行更改，可能会破坏您的网站

如果您是高级 WordPress 用户并希望将 CSS 直接添加到您主题的样式表中，您至少应该使用子主题.这样，即使您犯了错误，也不会破坏整个网站.此外，无论何时您更新父主题，您的子主题都会保留您的 CSS 更改.

有关更多信息，请查看我们关于您需要了解的有关 WordPress 子主题的所有信息的文章.

同时，查看更多适合初学者的方法在 WordPress 中添加 CSS.

2.主题定制器

在您的 WordPress 仪表板中，有一种方法可以访问主题定制器.您所要做的就是导航到外观> 自定义.

这将带您进入主题定制器界面.您会在左侧看到网站预览和一系列选项.

要将 CSS 添加到您的 WordPress，请点击附加 CSS.

执行此操作后，您会看到一个空白文本框，您可以在其中添加 CSS 代码.

添加有效的 CSS 规则后，您将看到主题定制器的预览面板中反映的更改.

例如，假设我们想将帖子标题从黑色更改为蓝色.我们会将 CSS 添加到空白文本框中并在预览面板中看到:

注意"Hello World"不再是黑色的.

另外，看看我们如何在 CSS 代码中使用"蓝色"这个词.如果您想要特定的蓝色阴影，您可以随时输入十六进制代码.例如，我们可以用"#61d4f4"替换"blue"这个词，以获得帖子标题的这种颜色:

您可以根据需要向此部分添加任意数量的代码片段.请记住，您在此处所做的任何更改都将适用于您的整个网站.此外，如果您激活它，您在一个主题中所做的更改将不会出现在另一个主题中.如果您更改主题，则必须重新进行所有 CSS 自定义.

完成后点击发布.

3.CSS 插件

如果您不想使用 Theme Customizer 在 WordPress 中添加 CSS，您可以随时使用免费的 WordPress 插件，例如 简单的自定义 CSS.

这个轻量级插件将在您的 WordPress 仪表板中的 外观 下创建一个新菜单项.它将被标记为自定义 CSS.当您点击它时，您会看到一个类似于主题定制器中的空白文本框.

添加 CSS 代码片段后，点击更新自定义 CSS 以保存更改.

使用这样的 CSS 插件的好处是，即使您更改主题，您的自定义 CSS 也将可用.这意味着您不必重新输入一遍.

使用 CSS 自定义 WordPress 网站的其他有用工具包括:

示例 CSS 代码片段

您可以使用以下基本分类使用 CSS 更改 WordPress 网站上的几乎任何设计元素:

  • 第一行:您要更改的元素，例如帖子标题 (h1)、段落中的文本 (p) 或小部件区域 (widget)
  • 所有其他行:关于将要更改的内容的具体说明，括在括号中

有大量不同的 CSS 代码片段可用于自定义您的网站.而且不可能全部列出来.

也就是说，如果您想使用 CSS 自定义您的网站，以下是一些示例代码片段，可向您展示其工作原理.

字体系列和大小

要更改字体及其大小，请添加以下 CSS 代码:

p {
font-family: Georgia;
font-size: 20px;
}

您可以将字体系列替换为您想要的字体样式并更改数字以将字体大小设置为您想要的大小.

侧边栏自定义

假设您想为网站上的侧边栏小部件添加一些自定义设置.要添加漂亮的背景颜色和填充，请将此 CSS 代码添加到新行:

.widget {
background: #B9EBFA;
padding: 25px;
}

请记住，此 CSS 将应用于您网站上的所有小部件区域.如果您想将更改应用于特定的小部件区域，您的 CSS 将需要反映这一点.

例如，假设您希望 CSS 仅应用于搜索栏小部件.为此，请将 CSS 更改为如下所示:

.widget_search {
background: #B9EBFA;
padding: 25px;
}

有关自定义网站的更多方法，请务必查看这些5 个简单的 CSS 代码.

从何处了解有关 CSS 的更多信息

如果您喜欢使用 CSS，有很多地方可以学习 WordPress 的 CSS:

如果您在查找 CSS 代码以在您的网站上进行特定更改时遇到问题，通常简单的 Google 搜索会有所帮助.但是，如果您真的想深入研究并对您的网站进行一些重大更改，请查看上述一些资源并全面学习 CSS.

最后的想法

拥有一个在所有其他网站中脱颖而出的独特网站是您整体成功的重要组成部分.碰巧的是，在 WordPress 中添加 CSS 是一种自定义网站的简单方法.

如果您知道从哪里开始，学习 CSS 并不难.虽然学习一些最常见的代码片段可能需要一些时间，但在您了解它之前，您将能够毫不费力地对网站的外观进行各种巧妙的更改.

请记住使用主题定制器或 CSS 插件在 WordPress 中添加 CSS.由于一些设计更改而破坏您的网站并冒着严重停机的风险是没有意义的.

您是否曾在 WordPress 中添加过 CSS?有没有您想分享的首选代码片段?如果是这样，我们很乐意在下面的评论中听到所有相关信息.

css(16)WordPress(893)网站(144)
♥赞14

相关文章

发表回复