如何轻松地将自定义CSS添加到您的WordPress网站

Sometimes you may find yourself needing to add Custom CSS in your WordPress site.

有时您可能会发现自己需要在WordPress网站中添加自定义CSS。

Perhaps it’s because you’re following a tutorial on WPBeginner or our YouTube channel. For most beginners, using FTP is too confusing, but there are other ways to add custom CSS.

可能是因为您正在关注WPBeginner或我们的YouTube频道上的教程。 对于大多数初学者来说，使用FTP太混乱了，但是还有其他添加自定义CSS的方法。

In this article, we will show you how to easily add custom CSS to your WordPress site without editing any theme files.

在本文中，我们将向您展示如何轻松地将自定义CSS添加到您的WordPress网站，而无需编辑任何主题文件。

影片教学 (Video Tutorial)

演示地址

If you prefer written tutorials or want to move at your own pace, then continue reading the instructions below.

如果您更喜欢书面教程或想按自己的进度前进，请继续阅读以下说明。

方法1：使用主题定制器添加定制CSS (Method 1: Adding Custom CSS Using Theme Customizer)

Since WordPress 4.7, users can now add custom CSS directly from the WordPress admin area. This is super-easy, and you would be able to see your changes with a live preview instantly.

从WordPress 4.7开始，用户现在可以直接从WordPress管理区域添加自定义CSS。 这非常简单，您可以通过实时预览立即看到所做的更改。

First, you need to head over to the Themes » Customize page.

首先，您需要转到主题»定制页面。

This will launch the WordPress theme customizer interface.

这将启动WordPress主题定制器界面。

You will see your site’s live preview with a bunch of options on the left pane. Click on the Additional CSS tab from the left pane.

您将在左侧窗格中看到站点的实时预览以及一系列选项。 单击左窗格中的其他CSS选项卡。

The tab will slide to show you a simple box where you can add your custom CSS. As soon as you add a valid CSS rule, you will be able to see it applied on your website’s live preview pane.

该选项卡将滑动以显示一个简单的框，您可以在其中添加自定义CSS。 添加有效CSS规则后，您就可以在网站的实时预览窗格中看到该规则。

You can continue adding custom CSS code, until you are satisfied with how it looks on your site.

您可以继续添加自定义CSS代码，直到对它在网站上的外观感到满意为止。

Don’t forget to click on the ‘Save & Publish’ button on the top when you are finished.

完成操作后，请不要忘记单击顶部的“保存并发布”按钮。

Note: Any custom CSS that you add using theme customizer is only available with that particular theme. If you would like to use it with other themes, then you will need to copy and paste it to your new theme using the same method.

注意：使用主题定制器添加的任何定制CSS仅适用于该特定主题。 如果要与其他主题一起使用，则需要使用相同的方法将其复制并粘贴到新主题中。

方法2：使用插件添加自定义CSS (Method 2: Adding Custom CSS Using a Plugin)

The first method only allows you to save custom CSS for the currently active theme. If you change the theme, then you may need to copy and paste your custom CSS to the new theme.

第一种方法仅允许您为当前活动的主题保存自定义CSS。 如果更改主题，则可能需要将自定义CSS复制并粘贴到新主题。

If you want your custom CSS to be applied regardless of which WordPress theme you are using, then this method is for you.

如果您希望无论使用哪种WordPress主题都应用自定义CSS，则此方法适合您。

First thing you need to do is install and activate the Simple Custom CSS plugin. Upon activation simply go to Appearance » Custom CSS and write down or paste your custom CSS.

您需要做的第一件事是安装并激活Simple Custom CSS插件。 激活后，只需转到外观»自定义CSS，然后写下或粘贴您的自定义CSS。

Don’t forget to press the ‘Update Custom CSS’ button to save your changes.

不要忘记按“更新自定义CSS”按钮以保存您的更改。

You can now view your WordPress website to see the custom CSS in action.

现在，您可以查看WordPress网站以查看自定义CSS的使用情况。

使用自定义CSS插件与在主题中添加CSS (Using a Custom CSS plugin vs Adding CSS in Theme)

Both methods described above are recommended for beginners. Advanced users can also add custom CSS directly to their themes.

建议初学者使用上述两种方法。 高级用户还可以将自定义CSS直接添加到他们的主题中。

However, adding custom CSS snippets into your parent theme is not recommended. Your CSS changes will be lost if you accidentally update the theme without saving your custom changes.

但是，不建议在自定义主题中添加自定义CSS代码段。 如果您不保存自定义更改而意外更新了主题，则CSS更改将丢失。

The best approach is to use a child theme instead. However, many beginners don’t want to create a child theme. Apart from adding custom CSS, often beginners really don’t know how they will be using that child theme.

最好的方法是改用子主题 。 但是，许多初学者不想创建子主题。 除了添加自定义CSS之外，初学者通常真的不知道他们将如何使用该子主题。

Using a custom CSS plugin allows you to store your custom CSS independently from your theme. This way you can easily switch themes and your custom CSS will still be there.

使用自定义CSS插件可以使您独立于主题存储自定义CSS。 这样，您可以轻松切换主题，并且自定义CSS仍然存在。

Another great way to add custom CSS to your WordPress site is by using the CSS Hero plugin. This wonderful plugin allows you to edit almost every CSS style on your WordPress site without writing a single line of code.

将自定义CSS添加到WordPress网站的另一种好方法是使用CSS Hero插件。 这个出色的插件可让您编辑WordPress网站上的几乎所有CSS样式，而无需编写任何代码。

We hope this article helped add custom CSS to your WordPress site. You may also want to see how our guide on how to create a custom WordPress theme without writing any code, and the best WordPress drag & drop page builder plugins.

我们希望本文有助于将自定义CSS添加到您的WordPress网站。 您可能还想了解我们的指南， 该指南如何在不编写任何代码的情况下创建自定义WordPress主题 ，以及最佳的WordPress拖放页面构建器插件 。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

如果您喜欢这篇文章，请订阅我们的YouTube频道 WordPress视频教程。 您也可以在Twitter和Facebook上找到我们。

翻译自: https://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/