使用指南/编辑您的网站/添加自定义 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!