你肯定很多次遇到过一些感兴趣的代码可以添加到你的WordPress里来增加功能或解决问题，但你不知道怎么将它们添加到你的网站，或者因为不知道怎么具体操作而不敢去试。
在这个网站我也会经常分享各种自定义代码，可以对WordPress、WooCommerce、插件和主题做各种修改。以下的代码都是对整个网站起效的全局代码，不过你也可以给指定的页面添加CSS代码。
WordPress添加CSS代码
主题自定义添加CSS
首先我们先从简单的CSS开始，它最简单的添加方式就是直接去外观 > 自定义 > 额外CSS添加。
添加额外CSS通常都是主题自定义最后一个选项。这里你也要注意使用的主题，有些低级主题是没有添加CSS这个选项的，而有些高级主题他们不需要去到主题自定义添加，它们自己额外带了个代码界面。
主题自定义添加的优点
- 可以在页面预览中实时查看更改。
- 你在没保存更改前，不会影响访问者。
- 更改保存在WordPress的数据库里。
- 主题和插件的更新不会影响这些更改。
- 额外的CSS工具有即时编程帮助：在你输入代码时会显示可用的参数。
- 额外的CSS工具有代码错误检测功能，并实时显示错误。
主题自定义添加的缺点
- 由于WordPress的加载顺序，自定义里的CSS比样式表中的CSS加载得更晚。
- 由于需要查询数据库，这种加载CSS的方式效率较低。
使用CSS代码的样式表
另一种更传统的添加CSS代码的方式是使用当前激活主题的样式表 styles.css
需要注意的是，应该将CSS代码添加到子主题的样式表里。如果将CSS代码添加到父主题或主主题上，而你没有创建和激活子主题，那么当你更新主题时，添加到样式表中的所有CSS代码都会丢失。
CSS代码样式表添加的优点
- 代码只影响当前激活的主题。
- 由于WordPress的加载顺序，子主题的样式表会比存储在数据库中的CSS更早激活。
- 这是加载CSS的最优方式，因为不需要查询数据库。
- 可以使用你自己的代码编辑器或主机提供的编辑器。
- 如果将CSS代码添加到子主题中，父主题的更新不会影响这些代码。
CSS代码样式表添加的优点
- 无法实时查看更改，必须保存更改并刷新网页才能看到效果。
- 更改会立即影响访问者，所有人都会同时看到这些更改。
- 需要熟悉代码编辑器或主机提供的编辑器，这些编辑器不一定提供编程辅助功能。
- 代码编辑器不一定会提示编程错误。
- 如果将CSS代码添加到父主题中，更新主题时这些代码会丢失。
添加PHP，JS和WordPress函数代码
这里其实才是添加代码的重头戏，除了CSS代码之外，你还会找到很多PHP代码、JavaScript代码和WordPress函数代码可以复制粘贴使用。
子主题 functions.php
通过刚刚说的创建网站子主题在functions.php文件上添加自定义代码，这样可以避免在更新主题时添加的代码消失。
functions.php 添加的优点
- 代码只影响当前激活的主题。
- 由于WordPress的加载顺序，子主题的functions.php文件会比存储在数据库中的代码更早激活。
- 可以使用你自己的代码编辑器或主机提供的编辑器。
- 如果将代码添加到子主题中，父主题的更新不会影响这些代码。
functions.php 添加的缺点
- 无法实时查看更改，必须保存更改并刷新网页才能看到效果。
- 更改会立即影响访问者，所有人都会同时看到这些更改。
- 需要熟悉代码编辑器或主机提供的编辑器，这些编辑器不一定提供编程辅助功能。
- 代码编辑器不一定会提示编程错误。
- 如果将代码添加到父主题中，更新主题时这些代码会丢失。
- 如果更换主题，这些代码将不再起作用，所以请确保只将其用于当前主题相关的功能。
通过代码插件添加自定义代码
通过代码插件像Code Snippets来添加自定义代码。
代码插件添加的优点
- 不需要学习使用代码编辑器。
- 不需要将文件上传到服务器。
- 可以定义代码的作用范围。
- 适用于所有类型的代码。
代码插件添加的缺点
- 即使没有开启任何代码也会一直加载不必要的资源。
- 由于WordPress的加载顺序，该插件会在主题和必要的插件或代码之后激活。
Elementor添加自定义代码
你要是有在使用Elementor构建器，那么它也是有自带添加自定义代码，可以添加 HTML, JavaScript 和 CSS 代码。详细信息你可以去这里看看。
除了这种添加全局代码的方式以外，Elementor有三种不同添加CSS的方式。
