从 WordPress 6.2 开始，您可以在站点编辑器的样式区域添加自定义 CSS。了解更多关于全站和按块自定义 CSS 编辑器的信息。

WordPress 严重依赖 CSS 中的展示样式。通过使用主题，您拥有近乎无限的选择布局选项。WordPress 主题让您轻松更改网站外观，并为您开辟了帮助您创建自己的主题和页面布局的领域。

CSS代表Cascading Style Sheets（层叠样式表）。它允许您将样式展示信息（如颜色和布局）与 HTML 结构分开存储。这使得您可以精确控制网站布局，并使您的页面更新更快、更简单。

本文简要介绍了 CSS 在 WordPress 中的使用，并列出了一些进一步信息的参考资料。有关 CSS 本身的信息，请参阅在 WordPress 上构建的资源#CSS。

WordPress 和 CSS

WordPress 主题使用模板文件、模板标签和 CSS 文件的组合来生成您 WordPress 站点的外观。

模板文件

模板文件是构成您站点的构建块。在WordPress 主题结构中，页眉、侧边栏、内容和页脚都包含在单独的文件中。它们组合在一起以创建您的页面。这允许您自定义这些构建块。例如，在默认的 WordPress 主题中，多帖视图（在前端页面、分类、存档和搜索网页上找到）包含侧边栏。点击任何帖子，您将被带到单帖视图，此时侧边栏将消失。您可以选择哪些部分出现在您的页面上，并单独自定义它们，允许在特定类别的所有页面中出现不同的页眉或侧边栏。还有更多。有关模板的更广泛介绍，请参阅步入模板。

模板标签

模板标签是提供指令和请求存储在 WordPress 数据库中的信息的代码片段。其中一些高度可配置，允许您自定义日期、时间、列表和您网站上显示的其他元素。您可以在步入模板标签中了解更多关于模板标签的信息。

样式表

CSS 文件是所有内容汇聚的地方。在您站点中的每个模板文件中，都有 HTML 元素包裹着您的模板标签和内容。在每个主题的样式表中，都有规则来控制每个 HTML 元素的设计和布局。没有这些说明，您的页面看起来就像一篇长文本页。有了这些说明，您可以移动构建块结构，使您的页眉非常长并充满图形或照片，或者简单而狭窄。您的站点可以“浮动”在查看者屏幕的中间，左右留有空间，或者横跨屏幕，填满整个页面。您的侧边栏可以在右侧或左侧，甚至可以从页面中间开始。您如何设计页面由您决定。但用于设计的说明位于每个主题文件夹中的 style.css 文件中。

WordPress 中的自定义 CSS

从 WordPress 4.7 开始，您现在可以从外观自定义屏幕向自己的主题添加自定义 CSS，无需额外的插件或直接编辑主题和子主题。只需在自定义当前主题时选择附加 CSS选项卡即可开始！

您所做的任何 CSS 更改都会出现在预览中，就像在自定义器中做的其他更改一样，这意味着您有时间调整和完善您站点的外观，直到您对一切满意为止，而无需实际进行任何更改！

请记住，CSS 更改是与您的主题关联的。这意味着如果您切换到新主题，您的自定义 CSS 样式将不再激活（当然，如果您切换回之前的主题，它们将再次出现）。

为什么要使用自定义 CSS？

有几个原因：

  • 如果您直接修改主题并在更新后，您的修改可能会丢失。通过使用自定义 CSS，您可以确保您的修改得以保留。
  • 使用自定义 CSS 可以加快开发时间。
  • 自定义 CSS 在主题的原始 CSS 之后加载，因此允许覆盖特定的 CSS 语句，而无需从头编写整个 CSS 集。

WordPress 生成的类

几个用于对齐图像和块元素（div、p、table等）的类在 WordPress 2.5 中引入：aligncenter、alignleft和alignright。此外，对于未对齐的图像添加了alignnone类，以便在需要时可以对其进行不同样式设置。

相同的类用于对齐带有标题的图像（自 WordPress 2.6 起）。需要三个额外的 CSS 类用于标题，还有一个用于无障碍访问。这些类一起为：

/* WordPress Core
-------------------------------------------------------------- */
.alignnone {
  margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
  display: block;
  margin: 5px auto 5px auto;
}

.alignright {
  float:right;
  margin: 5px 0 20px 20px;
}

.alignleft {
  float: left;
  margin: 5px 20px 20px 0;
}

a img.alignright {
  float: right;
  margin: 5px 0 20px 20px;
}

a img.alignnone {
  margin: 5px 20px 20px 0;
}

a img.alignleft {
  float: left;
  margin: 5px 20px 20px 0;
}

a img.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.wp-caption {
  background: #fff;
  border: 1px solid #f0f0f0;
  max-width: 96%; /* Image does not overflow the content area */
  padding: 5px 3px 10px;
  text-align: center;
}

.wp-caption.alignnone {
  margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
  margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
  margin: 5px 0 20px 20px;
}

.wp-caption img {
  border: 0 none;
  height: auto;
  margin: 0;
  max-width: 98.5%;
  padding: 0;
  width: auto;
}

.wp-caption p.wp-caption-text {
  font-size: 11px;
  line-height: 17px;
  margin: 0;
  padding: 0 4px 5px;
}

/* Text meant only for screen readers. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
  background-color: #eee;
  clip: auto !important;
  clip-path: none;
  color: #444;
  display: block;
  font-size: 1em;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
  /* Above WP toolbar. */
}

每个主题在其 style.css 文件中都应具有这些或类似的样式，以便能够正确显示图像和标题。确切的 HTML 元素以及类和 ID 值将取决于您使用的主题的结构。

模板和 CSS

为了帮助您更好地理解 CSS 如何与您的网页协同工作，您可能希望阅读以下列表中引用的一些文章：

  • 使用主题 – 此列表中也包含许多高级文章。
  • 模板 – WordPress 主题和模板文章的全面列表。
  • 主题开发 – WordPress 主题开发指南和代码标准。

WordPress 布局帮助

如果您在 WordPress 主题或布局方面遇到一些问题或疑问，请首先检查主题作者的网站，看看是否有升级或是否回答了您的问题。这里还有一些其他资源：

CSS 资源