如何在WordPress中编辑CSS（编辑、添加和自定义网站的外观）__wordpress教程

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

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

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

1. 什么是CSS编辑？
2. WordPress和CSS
3. 如何使用CSS自定义您的WordPress主题
4. 如何在WordPress中添加自定义CSS
5. 在哪里学习CSS

什么是CSS编辑？

CSS代表Cascading Style Sheets，它是除了HTML之外最流行的网络语言。两者相辅相成，因为CSS用于设置HTML元素的样式。HTML为网站的外观奠定了基础，而CSS用于进一步设置样式。

CSS代码示例（来源：w3schools.com）

CSS使您能够使网站具有响应性、添加颜色、更改字体、修改布局以及总体上微调网站的视觉呈现。与HTML和JavaScript一样，CSS是一种前端客户端语言，这意味着它在用户端执行，而不是在后端服务器上执行。

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

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

WordPress和CSS

在WordPress中，CSS有点不同。它由主题控制，主题由模板文件、模板标签，当然还有CSS样式表组成。虽然由您的主题生成，但所有这些都可以由您编辑。

模板文件将您网站的各个部分拆分为多个部分（例如header.php或archive.php），并且模板标签用于调用它们以及数据库中的其他内容。这些文件实际上主要由PHP和HTML组成，但如果需要，您可以添加CSS。

您真正需要的是stylesheet或style.css。要更改您网站的外观，您需要了解如何在此文件中添加和编辑代码。

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

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

当您进行这些更改时，您应该知道一件事：当您的主题更新时，您对style.css、functions.php或其他主题模板文件所做的任何编辑都将被删除。一般来说，您不应该在不使用子主题的情况下在编辑器中直接更改您的网站。

样式表就像您网站的“指令列表”，准确设置其样式以及CSS代码的处理方式。这是您进行大量编辑的地方，但我们还将向您展示如何访问其他主题模板文件，例如header.php和footer.php。

有两种方法可以访问WordPress网站的样式表：通过WordPress仪表盘或通过FTP客户端。我们将分别介绍这两种方法。

自己做这个不方便吗？考虑聘请WordPress开发人员为您处理该步骤。

在仪表盘中编辑WordPress CSS

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

在对核心文件进行任何重大编辑之前，您应该始终备份您的WordPress站点。如果您是CSS新手，很容易意外犯下可能破坏网站外观的错误，并且可能很难弄清楚如何恢复您的更改。

完成备份和子主题后，登录到您的后端。您可以通过转到菜单并单击外观 > 主题编辑器来找到编辑器。

您应该会看到一个弹出窗口，警告您不要直接编辑这些文件。不用担心，只需单击“I understand”即可。在进行任何重大更改之前，使用子主题并备份您的网站只是一个警告。按照这些步骤操作，就可以安全地进行编辑了。

直接编辑WordPress文件

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

除了style.css，您还可以访问functions.php、header.php和single.php等模板文件。所有这些都会影响您网站上某些页面的行为方式。

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

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

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

直接编辑主题文件

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

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

接下来，您应该联系您的主机并询问您的FTP凭据（主机、端口和用户名/密码，如果适用）。如果您的主机有仪表盘，您可以通过登录找到它们。

拥有它们后，启动FTP客户端并输入该信息。如果它不起作用，请尝试将“sftp://”放在主机部分的URL之前。

使用FileZilla

进入后，您可以找到style.css文件，方法是单击wp-content文件夹将其打开，然后单击主题文件夹（如TwentyTwenty主题），然后滚动直到看到style.css。

双击打开它（或右键单击并选择View/Edit）并进行修改。记得保存并上传回服务器。

如果您需要编辑home.php、single.php、archive.php等其他模板文件，您可以在style.css所在的文件夹中找到它们。

编辑您的主题文件，无论是通过FTP还是仪表盘，并不总是必要的。事实上，如果你只是添加一些额外的代码，最好避免这样做。

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

如何在WordPress中添加自定义CSS

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

一方面，通过其中一种方法添加的CSS代码更易于访问和使用。如果您想稍后进行修改，您无需担心将新CSS放在错误的位置或忘记添加它的位置。

此外，通过其中一种方法添加的CSS在您的主题更新时不会丢失（尽管如果您更改主题，它可能仍然会消失）。

这意味着您不需要使用子主题，如果出现问题，您所要做的就是删除刚刚添加的CSS。

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

虽然您可以将代码添加到style.css并收工，但如果您不想创建子主题，对主题中的现有CSS进行重大编辑，并可能最终删除所有工作，那么最好在WordPress定制器中使用附加CSS选项或安装插件。

1.通过WordPress定制器编辑CSS

不要使用主题编辑器，试试这个。登录到您的WordPress后端，然后单击外观 > 自定义以打开主题自定义屏幕。您将看到您网站的实时预览，左侧有用于自定义元素（如颜色、菜单或其他小工具）的选项。

在此菜单的最底部，您应该找到额外CSS框。

点击打开它。您将被带到一个带有代码输入框和一些说明的新屏幕。额外CSS屏幕包括语法突出显示，就像主题编辑器一样，以及让您知道代码是否错误的验证。

WordPress中的额外CSS

您编写的任何代码都会自动出现在右侧的预览区域中，除非它有错误（尽管您可以选择发布它）。

完成工作后，您可以发布代码、安排其生效时间，或将其保存为草稿以供日后处理。您甚至可以获得预览链接以与他人分享。

如您所见，Additional CSS页面在许多方面都比主题编辑器更强大，并且更适合添加代码而不是弄乱核心文件。

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

就像主题编辑器一样，默认情况下CSS是全局的，但您可以编写针对特定页面的代码。

一个缺点是，如果你切换主题，你写的任何东西都会被删除。确保在迁移到新主题之前备份您的CSS，否则您最终可能会丢失大量工作。

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

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

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

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

Simple Custom CSS

Simple Custom CSS是最流行的CSS编辑器插件，因为它易于使用、最小的界面和轻量级的后端。简而言之，它是一个非常小巧的WordPress插件，但功能强大。

Simple Custom CSS插件

设置轻而易举，您不会看到对性能的负面影响。它适用于任何主题，包括语法突出显示和错误检查。

Simple Custom CSS and JS

Simple Custom CSS and JS插件

Simple Custom CSS and JS是一个不错的选择。它还允许您定位页眉、页脚、前端，甚至是管理后端。

SiteOrigin CSS

SiteOrigin CSS插件

SiteOrigin CSS是另一个选项，它还包括一个传统的CSS编辑器。您可以随时在它和可视化编辑器之间切换。

WP Add Custom CSS

WP Add Custom CSS插件

如果您正在努力将CSS添加到特定页面，WP Add Custom CSS将自定义CSS框添加到编辑屏幕，并且还带有全局样式。

CSS Hero

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

CSS Hero

CSS Hero是一个高级视觉编辑插件，具有一些非常强大的功能（动画、特定设备编辑和非破坏性编辑等等）。

在哪里学习CSS

准备好为自己深入研究CSS了吗？这些初学者教程将建立基础知识并教您编写自己的函数式CSS代码所需了解的语法。

Learn CSS

这可能令人生畏，但除非您尝试做一些真正高级的事情，否则CSS并不太难！更改背景颜色或设置字体样式等简单的事情相当容易，网上有很多例子。

（建议阅读：50 多种现代字体可在您的WordPress网站上使用）

您可以在Internet上找到的大多数编程教程也是完全免费的。那里有很多关于WordPress信息，而且免费/成本很低。

这里有几个例子，涵盖了适合初学者的最佳CSS教程。

• W3Schools CSS教程：在这里可以找到大量信息：深入的教程、示例和参考资料供您使用。W3Schools的教程尽可能简单易学，因此即使您是初学者，这也是一个很好的起点。
• Codeacademy Learn CSS：通过六个免费的实践课程，您将学习CSS的基础知识。这不是简单的视频教程，而是让您使用实际代码的交互式课程。使用专业版，您还可以进行测验和自由形式的项目。
• Learn CSS in One Hour：很多人想学习一门新的编程语言，但他们只是没有时间投入。但是，如果您只留出一小时，您可以通过这个免费的20部分课程来学习CSS。即使你最终不是大师，你也应该很好地掌握基础知识。
• 针对WordPress用户的HTML和CSS基础：正在寻找WordPress特有的内容？如果您一直在为编写HTML和CSS而苦苦挣扎，那么本课程非常适合您。它是付费的，但有52节课和5小时的视频可供学习。

小结

作为WordPress用户，一开始接触CSS可能会让人感到困惑。但是一旦你知道如何编辑你的主题文件以及在哪里添加样式，你应该没有更多的麻烦。

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

如果您只想添加自己的CSS，请使用外观 > 自定义下的额外CSS页面，或者如果您需要更强大的功能，请尝试使用插件。

除非您使用子主题，否则对样式表的编辑将在主题更新时丢失。附加CSS并非如此。您的代码不会更新，但不要忘记：当您更改主题时，只有插件会保留CSS 。

无论您选择哪种方法，您都应该定期备份您的网站，包括您添加的样式表和自定义代码。现在是时候使用我们提供的资源来复习您的CSS基础知识了。

内容没看懂？ 不太想学习？想快速解决？ 有偿解决： 联系专家

阿里云企业补贴进行中： 马上申请

腾讯云限时活动1折起，即将结束： 马上收藏

同尘科技为腾讯云授权服务中心。

购买腾讯云产品享受折上折，更有现金返利:同意关联，立享优惠