使用指南/编辑您的网站/添加自定义 CSS

添加自定义 CSS

虽然大多数更改都可以通过 WordPress 编辑器中的设置来完成,但如果您有编写 CSS 代码的经验,则可能会更喜欢使用 CSS 来自定义您的站点。本指南将向您展示如何使用 CSS 编辑您的网站。

采用我们 WordPress.com 高级版、商务版和电商版套餐以及旧版专业版套餐的站点可使用此功能。对于使用免费套餐和个人版套餐的站点,请升级您的套餐以使用此功能。

关于 CSS

CSS 意为 Cascading Style Sheets(级联样式表),是一种标记语言,可以控制网页上 HTML 元素的外观。WordPress 包含一个 CSS 编辑器,可供您添加自己的 CSS 样式,覆盖主题的默认样式。

使用 CSS 修改网站设计的潜力几乎无穷无尽。但这需要您了解 CSS 和 HTML 的工作原理(或至少有学习的意愿)。MDN 网络文档中的 CSS 指南是学习 CSS 的绝佳起点。

如果您对学习 CSS 不感兴趣,则可以为您的站点选择一个区块主题。这些主题提供了极为灵活的选项,让您无需掌握任何计算机代码知识,即可自定义网站任何方面的设计。

您可以通过两种方法来访问您站点的 CSS 编辑器,具体取决于您的主题。下文将对每种方法进行说明。

通过“样式”访问 CSS 编辑器

如果您的站点使用的是支持站点编辑器的主题,则您可以通过此方法使用 CSS 自定义站点。请查看仪表盘中的“外观”项,快速确定您的站点是否支持使用站点编辑器。如果您在此处看到“编辑器”,则可以按照以下步骤访问 CSS 编辑器:

通过“样式”访问 CSS 编辑器(此视频没有声音)
  1. 访问您站点的仪表盘。
  2. 导航至“外观 → 编辑器”。
  3. 点击左侧“设计”菜单中的样式
    • 如果您的主题包含样式变体,则您必须点击铅笔图标以打开“样式”选项:
箭头指向站点编辑器“设计”面板中“样式”标题右侧的铅笔图标。
  1. 点击“样式”标题右侧的三个点,然后选择“额外 CSS”:
第一个箭头指向“样式”按钮,第二个箭头指向三个点按钮,第三个箭头指向“额外 CSS”。
  1. 在提供的文本框中键入或粘贴 CSS。
  2. 点击屏幕右上角的“保存”按钮,将 CSS 保存到您的站点。

您可以通过加载样式手册来预览 CSS 更改对任何区块类型的影响。点击眼睛图标打开样式手册。

用于打开样式手册的眼睛图标突出显示。

将 CSS 添加到特定的区块类型

站点编辑器主题中,您可以按照以下步骤将 CSS 代码应用于全站范围内的特定区块。

通过“样式”添加每个区块的 CSS 编辑器(此视频没有声音)
  1. 访问您站点的仪表盘。
  2. 导航至“外观 → 编辑器”。
  3. 点击左侧“设计”菜单中的样式
    • 如果您的主题包含样式变体,则您必须点击铅笔图标以打开“样式”选项。
  4. 此时,选择“区块”部分即可进入设置,自定义特定区块在整个站点中的外观。
  5. 点击要为其添加 CSS 的区块名称。您还可以使用搜索框查找所需的区块类型。
  6. 向下滚动到底部,然后点击“高级”。
  7. 在标有“额外 CSS”的框中,输入将应用于该区块类型所有实例的 CSS。添加每个区块的 CSS 时,您无需包含 CSS 选择器,只需添加属性和值即可。上面的视频中提供了一个示例。
  8. 点击屏幕右上角的“保存”按钮,将 CSS 保存到您的站点。

通过“自定义”访问 CSS 编辑器

对于不使用站点编辑器的主题(包括经典主题和许多第三方主题),您可以按照以下步骤添加 CSS:

  1. 访问您站点的仪表盘。
  2. 导航至“外观 → 自定义 → 额外 CSS”。
  3. 在提供的文本框中键入或粘贴 CSS。右侧的预览窗口将显示您所做的更改。
  4. 点击“保存更改”按钮,将 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 扩展程序的用户来说,这属于高级选项。请访问 LESSSass 网站,了解更多信息。

常见问题解答

不得使用 CSS 修改页脚文本。您可以根据站点所用的主题类型,通过设置删除或修改页脚文本:

我是否可以使用 @import 和 @font-face 等 CSS 规则?

可以,但仅限启用插件的站点。

我是否可以在 CSS 中使用 Web 字体?

您可以使用主题中的选项选择网站字体。在使用 CSS 时,您只能在前端使用这两种 Web 字体。不过,您可以使用第三方字体插件添加其他字体。

我是否可以上传图片来与 CSS 搭配使用?

可以。您可以将图片上传到您的媒体库,然后通过 CSS 样式表中的直接 URL 引用它。下面举例说明了如何在您的样式表中使用背景图片:

div#content {
background-image: url('http://example.files.wordpress.com/1999/09/example.jpg');
}

我是否可以直接编辑 CSS 样式表?

我们建议您使用 CSS 编辑器编辑 CSS,如本指南上文所述。当您使用此方法添加 CSS 时,主题样式表中的 CSS 规则会被覆盖。这是一种安全的方法,可让您更轻松地调试 CSS 冲突,并恢复您已添加的 CSS 的先前版本。

如果您擅长直接编辑主题文件,则可以通过 SFTP创建子主题进行编辑。我们建议您先在暂存站点上测试更改,然后再将其应用到您的实时站点。

如果我取消 WordPress.com 套餐会怎样?

WordPress.com 上的所有升级版套餐都是按年续订。如果您取消订阅,您的自定义 CSS 仍会保存,但不再应用于您的站点供其他人查看。如果您想将样式重新应用到您的站点,可以重新购买套餐,只要您未更改主题,这些样式便会自动重新应用。如果您更改了主题,则可以在 CSS 修订版本中找到您以前的 CSS。

Copied to clipboard!