wordpress建站之将CSS网格引入WordPress布局

2018年12月6日是WordPress的一个特殊日期：它标志着该软件的5.0版本的发布，到目前为止，它已经超过了网络的三分之一。过去，在平台上工作的人们指出，WordPress版本中使用的版本号从来没有任何特殊含义; 因此，WordPress 5.0只是WordPress 4.9的追随者。然而，自从自定义帖子类型在3.0版本中推出以来，5.0带来了可能是最大的创新- 差不多十年了，伙计们。

块编辑器 – 代号“Gutenberg” – 现在是WordPress中的新默认书写工具。在Core中采用之前，我们心爱的CMS依赖于我们现在称之为经典编辑器的东西。顺便说一下，经典编辑器并没有真正消失：你可以把它带回来安装一个插件，恢复您多年来所熟知的默认编辑体验。

那么，为什么经典编辑器被取代了？基本上因为它体现了一种旧的写作概念，这是一个概念，当文本编辑器的唯一需要是在视觉上组成HTML代码时。

不要创建布局。不要从异构源中嵌入动态内容。当您按下“发布”按钮并使用您的内容时，不要提供您的帖子或页面的样子。

简而言之，经典编辑器提供了非常基本的写作体验，坦率地说，它总是不足以创造除流动文本之外的任何东西。

块编辑器基于内容“块”的概念，即我们可以添加到页面的所有内容 – 文本段落，图像，嵌入 – 在技术上是一个块，即由一个定义的原子实体某些系列的属性。这些属性的组合决定了特定块的状态。一个接一个地组合几个块，您将获得页面的内容。

在从无组织文本到严格内容结构的过渡中，块编辑器引入了最大的变化。

布局预块编辑器

在所有这些爆发之前，想要在WordPress中创建布局的人必须在以下任一选项之间进行选择：

1. 从头开始创建一个自定义模板，用代码弄脏他们的手 – 这是一种崇高的意图，但却不那么吸引大众。
2. 使用工具，如果是可视工具，可以帮助他们在没有太多代码知识的情况下组成页面结构。

这就是页面构建器诞生的方式：页面构建器是提供构建布局的可视方式的插件，理想情况下不需要触及单行代码，并且它们是为了填补可视化模型与实际完成的网站之间的空白而创建的。 。

由于各种原因，页面构建器一直受到不良声誉的影响：

1. 它们往往是缓慢而笨重的。
2. 有些提供糟糕的编辑体验。
3. 他们最终将用户锁定在难以替换的框架或生态系统中。

第一点是显而易见的，因为它是不可避免的：如果你是页面构建者的作者（并且希望能够出售你的产品的副本），你必须尽可能地吸引人; 在生理上，建筑商开始慢慢成为其中所有东西的大代码汤，而不利于表现。

第二点可能是主观的，至少在某种程度上是这样。然而，第三点是事实。当然，对于每个项目都可以使用相同的工具完美地完成，随着时间的推移完善对仪器的了解，但是你越坚持它，它就越难以有一天停止使用它。

块编辑器旨在超越这种僵局：从用户的角度来看，它旨在提供更好，更丰富的写作体验，而从开发人员的角度来看，它提供了一个统一的共享API，可以从中构建。

CSS布局简史

如果你已经够大了，你可能已经知道了这个故事。如果没有，那么您可能会很高兴听到当天前端开发人员的生活状况。

CSS规范的第一个版本可以追溯到1996年，它允许嵌入式样式表添加字体样式，为元素选择颜色，更改页面中对象的对齐和间距。问题在于，在那些日子里，语义HTML的概念并不完全普及。换句话说，内容和形式之间没有明确的分离。我们写的标记和我们想要的外观完全交织在同一个文档中。

这导致HTML元素更多地用于演示目的，而不是将意义传达给他们在页面中的存在。例如，在布局方面，这也导致表元素用于创建布局而不是实际的表格数据。为了实现更复杂的布局，表开始嵌套到其他表中，从语义的角度来看，页面成为一场噩梦，它的大小增长和增长，并且随着时间的推移很难维护。如果您曾经编写过HTML电子邮件，那么您就很清楚生活是什么样的。而且，实际上，这仍然存在于今天的网站中，即使它是针对较小的元素而不是完整的页面布局。

然后，Web标准运动的目标是提高开发人员的意识，即我们可以以不同的方式做得更好; 这种风格和内容应该分开，我们需要使用HTML元素来表达它们的含义，并强化这样一个概念：较轻的页面（就代码权重而言）是一个比无法管理的嵌套表格更好的选择。

然后我们开始（使用）div元素，并使用float属性并置它们。演示焦点从标记转移到样式表。Floats成为多年来最可靠的布局工具，但它们处理起来可能有些问题，因为必须清除它们才能使页面返回到标准流程。此外，在这个时代，页面标记仍然过于冗余，即使使用div而不是表格有助于使我们的内容更容易访问。

随着Flexbox规范的出版，2012年出现了转机时刻。Flexbox允许开发人员解决一系列长期存在的小布局问题，并且具有优雅的语法，需要实现更少的标记。突然间（好吧，不是那么突然，我们仍然需要关心浏览器支持，对吗？），可靠地将事物集中在两个轴上并不是问题。令人耳目一新。最后，调整布局可以减少到只改变样式表中的一个属性。

与Flexbox一样重要的是，这不是故事的结局。

这是2019年！我们来使用CSS Grid。

如果你到目前为止阅读这篇文章，我们认为可以肯定两件事是肯定的：

1. 我们显然不是在这个行业中过着平和，安静的职业生活。
2. 我们使用的东西会发生变化。

2017年，CSS Grid Layout Module规范正式发布，但是，随着CSS规范的出现，它的草案和临时实现已经存在了一段时间。

CSS Grid是CSS可以和应该做的一个大胆的飞跃。如果我们停止对页面样式进行微观管理，并开始更全面地思考，该怎么办？如果我们有一个系统可以在屏幕上可靠地定位元素，而这些元素完全不依赖于正在使用的标记，也不依赖于元素的顺序，同时，在编程上适用于较小的屏幕？

不，这不仅仅是一个想法。这更像是一个梦想; 其中一个你不想从中醒来的好人。除此之外，在2019年，这已成为现实。

当然，Grid和Flexbox之间的主要区别更加细微，但基本上归结为Grid在两个维度上运行，而Flexbox仅限于一个。知道将在容器的限制内放置哪些元素，我们可以完全根据样式表中的指令选择这些元素的确切位置。

我们想要调整布局吗？好的，该修改不会影响标记。

Grid背后的基本思想是元素布局在网格中。根据定义，网格由一定数量的列和行组成，列和行之间的边界形成一系列可以填充内容的单元格。

在用于实现期望结果的代码数量方面，这种方法的节省是非凡的：我们只需要识别容器元素，将display: grid规则应用于它，然后选择该容器内的元素并告诉CSS什么列/行他们开始/结束。

.my-container {
  display: grid;
  grid-template-columns: repeat( 3, 1fr );
  grid-template-rows: repeat( 2, 1fr );
}

.element-1 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}

上面的示例创建了与.my-container元素关联的3×2网格; .element-1是一个刻在网格中的2×2块，其左上角的涡旋位于网格第一行的第二列。

网站建设

听起来很整洁吧？

CSS Grid的更简洁的事情是你可以创建模板区域，为这些区域提供有意义的名称（例如“header”或“main”），然后使用这些标识符以编程方式定位这些区域中的元素。

.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}

.container {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

对于那些在表时代开始从事这项业务的人来说，上面的代码就是科幻小说。

无论如何，更多好消息：今天对CSS Grid的支持非常棒。

＃在WordPress中使用CSS Grid

所以，这很好，并且知道我们今天可以做的事情比我们几年前所做的要多得多，这可能会让你想要最后尝试Grid。

如果您正在处理WordPress项目，那么您将面对上面提到的两个选项：我们是从头开始并手动编写模板，还是有什么东西可以给我们一点帮助？幸运的是，有一个插件可能会引起您的兴趣，我们创建的插件有双重目标：

1. 在块编辑器和CSS网格之间创建桥梁。
2. 创建一个插件，可能会让人们超越采用块编辑器的最初怀疑态度。

它叫做Grids，可以在WordPress插件库中免费下载。

系统允许您使用块编辑器中的可视控件手动指定尺寸，背景，响应行为，但是在设计上，它不提供任何内容块。当然，人们可以将这种方法视为一个弱点，但我们认为它实际上是Grids的最大优势，因为它使插件能够与世界各地其他开发人员正在创建的无数内容块集成。更重要的是，在某种程度上，Grids帮助将这些块和WordPress作为一个平台，与CSS Grid本身联系起来。网格只负责布局结构。它会为您提供一个12×6网格（称为Section），您可以在其上拖动并绘制将包含在该Section中的元素（区域）。

然而，即使插件没有严格地生成内容，也不可避免地将它与成功的页面构建器放在同一个短语中，实际上将其功能与那些提供的功能进行比较。如果您关心形式和内容的分离，页面重量，易于维护等概念，Grids可以为在WordPress中创建视觉上吸引人的布局提供更清晰的解决方案。

生成的标记很小。在最基本的形式中，Section（即具有display: grid属性的元素）仅由其自己的元素组成 – 当然，内部包装器（无法避免并且用于间隔目的），然后一个每个区域的元素属于该部分。这是避免使用不必要的标记方面向前迈出的一大步。

对于那些一直不喜欢用块编辑器开发块的人来说，块的渲染是在服务器端完成的，这允许使用自定义类添加到Section和Area元素中过滤器。

这一选择也直接决定了你在禁用网格不测发生了什么你的安装。 如果你不重新保存网页再次，还剩下什么网格的在前端实际上是专门你把里面的内容内容领域。没有任何额外的标记元素，没有任何看起来怪怪的简码。 对事物的后端侧，块编辑器中有一个系统，警告你，如果你正在编辑一个应该使用一个页面特定的块类型，但该块类型目前不可用：在这种情况下，您可以轻松地重新打开网格，将内容移动到另一个地方，然后完全删除该部分。

用于创建网格的CSS也会动态添加到页面中，作为<head>文档部分中的内联样式。我们并不完全是直接在页面中编写的样式的粉丝，因为理想情况下我们希望将所有样式委托给我们可以在版本控制下放置的文件，但这是我们发现这种方法非常接近的情况方便。

另一个可行的选择是识别列/行起始/结束点的所有可能组合，并以编程方式映射具有类的那些，然后可以使用这些类来实际定位网格中的元素。在12×6网格上，这将导致总共36个类选择器，看起来像这样：

.grids-cs-1 {
  grid-column-start: 1;
}

.grids-ce-2 {
  grid-column-end: 2;
}

如果我们决定提供对网格组成方式的更多控制，例如，让用户访问确定网格结构中有多少列或行的选项，该怎么办？

我们必须在样式表中手动映射我们尚未拥有的类（并为此仅发布插件的更新），或者再次生成它们内联，然后将这些类添加到网格元素中。

虽然完全没问题，但这种做法违背了更精简，更可扫描的标记的想法，因此我们决定不遵循这条路线，并付出动态放入head文档的价格，知道它可以很容易地缓存。

由于插件的实验性质，用于实际构成网格的后端UI是使用CSS Grid创建的，以及一组CSS变量，通过它我们可以控制内容区域的属性。使用变量极大地加快了我们在网格创建者原型背后的工作 – 如果我们在那里选择了不同的路径，那么事情就不会在开发时间方面更长，而且更复杂，更不清晰。

为了进一步促进CSS Grid的采用，我们需要一些工具来自动化使用它创建布局的过程。

虽然我们已经在野外看到了这种技术的很好的例子，但是假设今天发布的每个网站都有一个由它组成的前端开发团队，这可能是短视的，可以解决这个问题。

我们需要能够产生良好标记的工具，这些工具不会妨碍网站样式表的维护，最重要的是在WordPress世界中，可以轻松地与人们喜欢使用的现有主题集成。

我们认为Grids是朝这个方向迈出的一步，因为它是一个基于两个标准的工具 – 块编辑器API和CSS网格 – 因此，重新发明谚语轮的风险较小。

虽然我们已经记录了最近在柏林的WordCamp欧洲插件的一般兴趣 – 在Matt Mullenweg自己在主题演讲中展示了该插件的简短演示- 我们知道它仍然需要大量的反馈才能获得现实场景。因此，如果您想要使用网格旋转，请使用它，测试它，为什么不，建议新功能。