WordPress 块主题 CSS 和样式设置指南

Avatar of Ganesh Dahal
Ganesh Dahal

自从全站编辑功能引入块主题以来,WordPress 中的 CSS 管理发生了巨大变化。本指南针对块主题及其配置方法,从启用编辑器功能和控件到定义主题范围的 CSS 和自定义特定块的外观。

由 DigitalOcean 提供

DigitalOcean 提供您在任何阶段支持业务增长所需的云计算服务。 立即开始,获得 200 美元的免费信用额度!

在 2015 年的世界现状演讲中,WordPress 联合创始人 Matt Mullenweg 著名地指导 WordPress 社区“深入学习 JavaScript”。他预先设定了这个期望,因为他希望每个人都知道 JavaScript 对于 WordPress 的未来至关重要,WordPress 正在为基于 React 的编辑体验(称为块编辑器)铺平全站编辑的道路。

那是几年前的事了,并且一直在努力将 WordPress 主题开发从基于 PHP 的“经典”模板转移到一个更模块化、组件驱动的模型,该模型以“块”为中心构建页面和文章布局。

现在,我们开始看到新的 基于块的 WordPress 主题出现在主题目录中,我们许多使用“经典”PHP 模板开发 WordPress 主题多年的人正处于“经典”和“块”主题之间的某种中间状态。 Geoff 在另一篇文章中扩展了这种感觉,但总体情绪是 WordPress 的工作方式与以前大不相同。

在 WordPress 块主题项目中从哪里开始?这就是本指南的意义所在。我们可以深入探讨使用 React 的细微差别,但 这里 CSS-Tricks 上已经有关于此的优秀指南,以及 关于使用块的教程

相反,**本指南针对块主题及其配置方法。**可以将其视为我之前关于 在 WordPress 块主题中管理样式 的文章的扩展。在其中,我们介绍了如何在 theme.json 文件中定义 CSS 样式——所有 WordPress 块主题的基础,类似于经典主题中使用 style.css 的方式。在本系列文章中,我们将更深入地介绍 theme.json,并记录它是如何用于管理完全支持全站编辑功能的 WordPress 站点的外观的。

就目前而言,查找定义和管理 WordPress 块主题中样式的资源和正确的文档本身就是一项任务。除非您关注 GitHub 问题Gutenberg 插件版本Make WordPress Core,否则您可能会在这个新的 WordPress 环境中迷失方向。 WordPress 手册 也无法帮助您,因为它总是落后于快速发展的步伐。

因此,让我们将所有这些内容整合起来,并学习如何管理 WordPress 块主题中的样式。

WordPress 块主题 CSS 和样式设置指南