虽然大多数更改都可以通过 WordPress 编辑器中的设置来完成,但如果您有编写 CSS 代码的经验,则可能会更喜欢使用 CSS 来自定义您的站点。本指南将向您展示如何使用 CSS 编辑您的网站。
采用我们 WordPress.com 高级版、商务版和电商版套餐以及旧版专业版套餐的站点可使用此功能。对于使用免费套餐和个人版套餐的站点,请升级您的套餐以使用此功能。
CSS 意为 Cascading Style Sheets(级联样式表),是一种标记语言,可以控制网页上 HTML 元素的外观。WordPress 包含一个 CSS 编辑器,可供您添加自己的 CSS 样式,覆盖主题的默认样式。
使用 CSS 修改网站设计的潜力几乎无穷无尽。但这需要您了解 CSS 和 HTML 的工作原理(或至少有学习的意愿)。MDN 网络文档中的 CSS 指南是学习 CSS 的绝佳起点。
如果您对学习 CSS 不感兴趣,则可以为您的站点选择一个区块主题。这些主题提供了极为灵活的选项,让您无需掌握任何计算机代码知识,即可自定义网站任何方面的设计。
您可以通过两种方法来访问您站点的 CSS 编辑器,具体取决于您的主题。下文将对每种方法进行说明。
如果您的站点使用的是支持站点编辑器的主题,则您可以通过此方法使用 CSS 自定义站点。请查看仪表盘中的“外观”项,快速确定您的站点是否支持使用站点编辑器。如果您在此处看到“编辑器”,则可以按照以下步骤访问 CSS 编辑器:

- 点击“样式”标题右侧的三个点,然后选择“额外 CSS”:

- 在提供的文本框中键入或粘贴 CSS。
- 点击屏幕右上角的“保存”按钮,将 CSS 保存到您的站点。
您可以通过加载样式手册来预览 CSS 更改对任何区块类型的影响。点击眼睛图标打开样式手册。

在站点编辑器主题中,您可以按照以下步骤将 CSS 代码应用于全站范围内的特定区块。
- 访问您站点的仪表盘。
- 导航至“外观 → 编辑器”。
- 点击左侧“设计”菜单中的“样式”。
- 如果您的主题包含样式变体,则您必须点击铅笔图标以打开“样式”选项。
- 此时,选择“区块”部分即可进入设置,自定义特定区块在整个站点中的外观。
- 点击要为其添加 CSS 的区块名称。您还可以使用搜索框查找所需的区块类型。
- 向下滚动到底部,然后点击“高级”。
- 在标有“额外 CSS”的框中,输入将应用于该区块类型所有实例的 CSS。添加每个区块的 CSS 时,您无需包含 CSS 选择器,只需添加属性和值即可。上面的视频中提供了一个示例。
- 点击屏幕右上角的“保存”按钮,将 CSS 保存到您的站点。
对于不使用站点编辑器的主题(包括经典主题和许多第三方主题),您可以按照以下步骤添加 CSS:
- 访问您站点的仪表盘。
- 导航至“外观 → 自定义 → 额外 CSS”。
- 在提供的文本框中键入或粘贴 CSS。右侧的预览窗口将显示您所做的更改。
- 点击“保存更改”按钮,将 CSS 保存到您的站点。

系统会保存最近的 25 个 CSS 编辑版本,点击 CSS 编辑器底部的“查看全部历史记录”即可查看这些版本。您可以在此处恢复 CSS 的先前版本。
如果界面上没有出现该选项,则表示没有可恢复的 CSS 历史记录。

如果您使用自定义 CSS 修改了主内容区域的宽度,则应使用“媒介宽度”选项。“媒介宽度”设置是全尺寸图片插入站点时的默认尺寸。
请注意,您在更改设置之前添加的一些图片的尺寸不会受到影响(具体取决于插入方式),因此在更改设置后,您可能需要重新插入其中一些图片。
默认情况下,您添加到 CSS 编辑器的自定义 CSS 将在主题的原始 CSS 之后进行加载,这意味着您的规则可优先于主题样式并可覆盖主题样式。
通过点击“不使用主题的原始 CSS”复选框,您可以完全关闭主题的原始 CSS。这样,您就可以将任何 WordPress.com 主题用作空白画布,以便使用 CSS 进行设计。这属于高级选项,只有在您要重新开始并从头开始为主题设计 CSS 时才能使用。
如果您想在现有 CSS 规则(最常见的推荐方法)的基础上进行创作,那么可以禁用此选项。
WordPress.com 支持 CSS 预处理程序 LESS 和 Sass(SCSS 语法)。对于希望使用变量和混合等 CSS 扩展程序的用户来说,这属于高级选项。请访问 LESS 和 Sass 网站,了解更多信息。
不得使用 CSS 修改页脚文本。您可以根据站点所用的主题类型,通过设置删除或修改页脚文本:
- 如果您的站点使用区块主题,则您可以使用站点编辑器来编辑或删除页脚文本,无需 CSS。
- 如果您的站点使用经典主题,则您可以将页脚文本更改为极简的 WordPress 徽标。如果您的站点订阅了商务版或电子商务版套餐,则您可以隐藏文本。
可以,但仅限启用插件的站点。
您可以使用主题中的选项选择网站字体。在使用 CSS 时,您只能在前端使用这两种 Web 字体。不过,您可以使用第三方字体插件添加其他字体。
可以。您可以将图片上传到您的媒体库,然后通过 CSS 样式表中的直接 URL 引用它。下面举例说明了如何在您的样式表中使用背景图片:
div#content {
background-image: url('http://example.files.wordpress.com/1999/09/example.jpg');
}
我们建议您使用 CSS 编辑器编辑 CSS,如本指南上文所述。当您使用此方法添加 CSS 时,主题样式表中的 CSS 规则会被覆盖。这是一种安全的方法,可让您更轻松地调试 CSS 冲突,并恢复您已添加的 CSS 的先前版本。
如果您擅长直接编辑主题文件,则可以通过 SFTP 或创建子主题进行编辑。我们建议您先在暂存站点上测试更改,然后再将其应用到您的实时站点。
WordPress.com 上的所有升级版套餐都是按年续订。如果您取消订阅,您的自定义 CSS 仍会保存,但不再应用于您的站点供其他人查看。如果您想将样式重新应用到您的站点,可以重新购买套餐,只要您未更改主题,这些样式便会自动重新应用。如果您更改了主题,则可以在 CSS 修订版本中找到您以前的 CSS。