你是否想尝试编辑 WordPress CSS,但不知道从哪里开始?使用 CSS 样式,你可以全局或在某些页面上编辑网站的外观。添加颜色,隔开某些元素,设计布局,并基本上完全改变 WordPress 主题中的内容。

如果你想更熟悉 WordPress 的开发环境,或者只是更好地控制网站的外观,则需要知道如何在 WordPress 中添加 CSS(以及如何更改已经存在的内容)。

通过编辑主题并包括自己的其他 CSS,你将能够优化网站上的每个视觉元素。今天,我们将仔细研究它。

什么是 CSS 编辑?

CSS 代表层叠样式表,它是除了 HTML 之外最受欢迎的网络语言。由于 CSS 用于设置 HTML 元素的样式,因此它们两者并存。HTML 奠定了网站外观的基础,而 CSS 用于进一步设计网站样式。

CSS 使你能够使网站具有响应能力,添加颜色,更改字体,修改布局以及通常微调网站的视觉效果。像 HTML 和 JavaScript 一样,CSS 是前端客户端语言,这意味着它在用户端而不是后端服务器上执行。

在深入研究 WordPress 开发时,你需要了解 HTML,CSS,JavaScript 和 PHP。这就是内置 CMS 的核心以及它的许多主题和插件。

但是,即使你不是 Web 设计师 或开发人员,也可以选择一些 CSS,因为你可以使用它来移动或设置网站上的元素的样式,或者对主题进行较小的美学更改以更好地适合你。

WordPress 和 CSS

在 WordPress 中,CSS 有点不同。它由主题控制,这些主题由模板文件,模板标签以及 CSS 样式表组成。尽管这些都是由你的主题生成的,但是所有这些都可以由你编辑。

模板文件将网站的各个部分分成几个部分(例如 header.php 或 archive.php),并且模板标签用于调用它们以及数据库中的其他内容。这些文件实际上主要由 PHP 和 HTML 组成,尽管你可以根据需要添加 CSS。

你真正要寻找的是 stylesheet 或 style.css。要更改网站的外观,你需要学习如何在此文件中添加和编辑代码。

如何使用 CSS 自定义你的 WordPress 主题

如果要自定义主题并使用 CSS 更改网站的外观,则需要添加自己的代码或编辑已有的代码。有多种方法可以添加 CSS,而无需触摸任何主题文件,但是要更改现有主题代码,你将必须访问网站的样式表。

进行这些更改时,你应该了解一件事:主题更新时,你对 style.cssfunctions.php 或其他主题模板文件所做的所有编辑都将被删除。通常,如果不使用子主题,则不应在编辑器中直接更改网站。

样式表就像你网站的 “说明列表” 一样,准确设置样式和 CSS 代码的样式。这是你进行大部分编辑的地方,但我们还将向你展示如何访问其他主题模板文件,例如 header.php 和 footer.php。

有两种访问 WordPress 网站样式表的方法:通过 WordPress 仪表板或通过 FTP 客户端。我们将同时介绍它们。

在仪表板中编辑 WordPress CSS

访问 CSS 样式表的最简单,最方便的方法就是在 WordPress 仪表板中。无需安装 FTP 程序或代码编辑器。你可以使用内置的语法突出显示和功能文档直接编辑任何文件。

在对核心文件进行任何重大编辑之前,你应该始终备份 WordPress 网站。如果你是 CSS 的新手,很容易不小心犯一个会破坏你网站外观的错误,而且很难弄清楚如何还原所做的更改。

制作完备份和子主题后,登录到后端。你可以通过转到菜单并单击外观 > 主题编辑器来找到编辑

你应该看到一个弹出窗口,警告你不要直接编辑这些文件。不用担心,只需单击 “我了解”。进行任何重大更改之前,请先使用子主题并备份网站,这只是警告。遵循这些步骤,就可以安全地进行编辑。

默认情况下,你应该在样式表上,但如果没有,请查看右侧的菜单以查看主题文件。

除了 style.css,你还可以访问模板文件,例如 functions.php,header.php 和 single.php。所有这些都会影响你网站上某些页面的行为。

但是,在深入研究这些特定文件之前,你应该熟悉 PHP。

在 WordPress 主题中编辑 style.css 样式表

请记住:你在此处所做的大多数 CSS 更改都是全局的。例如,如果将 H1 标头更改为某种字体,它将对你站点上的每个页面生效。你需要使用特殊的语法来自定义特定页面的样式。

直接编辑主题文件

如果你无法访问主题编辑器,或者更喜欢通过 FTP 进行工作该怎么办?使用后端编辑器更容易,但是某些主题或插件可能会禁用它。如果是这种情况,则需要通过 FTP 连接到你的网站。

FTP,或文件传输协议,使你可以远程访问和修改网站的文件。你需要做的第一件事是下载 FileZilla 或任何其他 FTP 客户端。

接下来,你应该联系你的主机并询问你的 FTP 凭据(主机,端口和用户名 / 密码(如果适用))。如果主机具有仪表板,则可以通过登录找到它们。

你可以通过点击找到你的 style.css 文件的 wp-content 文件夹中打开它,然后找到主题文件夹,编辑其中的 style.css 文件。

双击将其打开(或右键单击并选择 View / Edit)并进行修改。记住要保存并上传回服务器。如果需要编辑其他模板文件,例如 home.php,single.php,archive.php,则可以在 style.css 所在的文件夹中找到它们。并非总是需要通过 FTP 或仪表板来编辑主题文件。实际上,如果只添加一些额外的代码,最好避免这样做。

对于少量添加,这是将 CSS 添加到 WordPress 网站的最佳方法。

如何在 WordPress 中添加自定义 CSS

如果你不想编辑现有的 CSS 代码,而只想添加自己的样式,则强烈建议你使用以下方法之一:WordPress 定制程序或专用插件。

首先,通过这些方法之一添加的 CSS 代码更易于访问和使用。如果你以后要进行修改,则不必担心将新 CSS 放在错误的位置或忘记添加位置。

同样,通过这些方法之一添加的 CSS 不会在主题更新时丢失(尽管如果更改主题,CSS 可能仍会消失)。这意味着你不需要使用子主题,并且如果出现问题,只需删除刚刚添加的 CSS。

请注意,你仍应保留网站的备份,因为有些人报告说在重大更新期间偶尔会丢失 CSS。不过,此方法比直接编辑主题文件可靠得多。

虽然你可以仅将代码添加到 style.css 中并每天调用,但是如果你不想创建子主题,请对该主题中的现有 CSS 进行重大修改,并可能最终删除所有工作,那么最好在 WordPress 定制程序中使用 “其他 CSS” 选项或安装插件。

1. 通过 WordPress Customizer 编辑 CSS

而不是使用主题编辑器,请尝试此。登录到你的 WordPress 后端,然后单击外观 > 自定义以打开主题自定义屏幕。你会看到网站的实时预览,左侧带有用于自定义元素的选项,例如颜色,菜单或其他小部件。

在此菜单的最底部,你应该找到 “ 其他 CSS” 框。

单击以打开它。你将进入一个带有代码输入框和一些说明的新屏幕。附加 CSS 屏幕包括与主题编辑器一样的语法突出显示,以及使你知道代码是否错误的验证。

WordPress 中的其他 CSS

你编写的任何代码都会自动显示在右侧的预览区域中,除非出现错误(尽管你仍然可以选择将其发布)。完成工作后,你可以发布代码,安排代码生效的时间,或将其另存为草稿以备后用。你甚至可以获取预览链接以与他人共享。

如你所见,“附加 CSS” 页面在许多方面都比 “主题编辑器” 更强大,并且比添加核心文件更适合添加代码。

你在此处编写的 CSS 代码会覆盖主题的默认样式,并且在主题更新时不会消失。如果你无法在预览中实时看到它,请再次检查你是否在 CSS 代码中使用了正确的选择器。

与主题编辑器一样,默认情况下 CSS 是全局的,但是你可以编写针对特定页面的代码。不利的一面是,如果你切换主题,你写的任何内容都会被删除。在移至新主题之前,请确保备份 CSS,否则可能会丢失很多工作。

如果你正在努力使用此选项,或者想要一个可跨主题使用并且可以更轻松地定位某些页面的解决方案,则应尝试使用插件。

2. 使用插件将自定义 CSS 添加到 WordPress

你可能有几个原因想要使用插件将 CSS 添加到 WordPress。虽然该功能类似于 “其他 CSS” 菜单,但即使你切换 / 更新主题,样式通常也会保持不变。

你可能还会更喜欢他们的 UI,或者喜欢自动完成等额外功能。有些插件甚至允许你通过下拉菜单构建 CSS ,而不必自己编写。

Simple Custom CSS

由于其易用性,最小的界面和轻量级的后端,Simple Custom CSS 是最受欢迎的 CSS 编辑器插件。简而言之,这是一个很小的 WordPress 插件,具有很大的优势。

简单的自定义 CSS WordPress 插件

设置很容易,并且不会对性能产生负面影响。它适用于任何主题,并包括语法突出显示和错误检查。

CSS Hero

你可能还需要考虑尝试使用可视 CSS 编辑器。这些将所有复杂的编码转换成一系列易于使用的输入字段和下拉菜单,可为你处理所有编程。

CSS Hero

CSS Hero 是一个高级视觉编辑插件,具有一些非常强大的功能(动画,特定于设备的编辑以及无损编辑等)。

作为 WordPress 用户,起初加入 CSS 可能会造成混乱。但是,一旦你知道如何编辑主题文件以及在何处添加样式,就不会再有麻烦了。

可以从后端或通过 FTP 编辑主题文件以更改站点的外观,但是通常应避免这种情况,除非你需要编辑现有代码。

如果你只想添加自己的 CSS,请使用 “ 外观”>“自定义” 下的 “其他 CSS” 页面,如果需要更强大的功能,请尝试使用插件。

除非你使用子主题,否则主题更新后对样式表的编辑将丢失。对于其他 CSS,情况并非如此。你的代码可以安全地进行更新,但是请不要忘记:更改主题时,只有插件会保留 CSS 。