如何使用 WordPress 站点编辑器构建两列单标题

我在本周早些时候评论过的 Automattic 的 Archeo 主题中，我最喜欢的功能之一是它的分屏单个帖子标题。我喜欢作者对特色图像块做了一些不同的事情，给用户一些多样性。

设计很简单。这是一个两栏的部分，右边是图片，左边是帖子标题和日期。

分屏帖子标题和图片。

它提醒我清除计算机上无数“ideas”文件夹中的一个。我知道我去年建造了类似的东西。我只需要找到它。

经过一番挖掘，我终于偶然发现了这个 - 我真的需要学习如何命名事物以便更容易找到它们：

旧的拆分标题设计理念。

我以不同的方式解决了这个问题，我记得它为什么最终被扔进了垃圾桶。它使用媒体和文本块而不是列。然后，就像现在一样，不可能在媒体和文本中使用特色图像。

Columns 块是一个不错的第二选择，但它在移动视图上的堆叠方式不同，第一列始终位于顶部。当使用媒体和文本块时，无论其在表格视图中的水平位置如何，图像都具有优先权。

有一张公开票可以在媒体和文本块中使用帖子的特色图片。封面内有一张类似的票可以使用。两者都可以通过允许使用通用网站块或发布元数据来解决问题。

至少现在，我们必须使用我们拥有的工具。

对于“积木搭建”系列中的这篇文章，我将引导您修改“二十二二”的单个帖子模板以创建类似的布局。

有些人在不发布数据的情况下很难将结果可视化。编辑器有一个占位符如下截图所示：

分屏帖子标题的编辑器视图。

但是，这些占位符会在前端进行转换。我们怎么知道我们在那里看到的会被正确翻译成下图这样呢？

带有分屏标题的单个帖子的前视图。

即使是我有时也会为这种可视化而苦恼。 Post* 块的占位符没有给我足够的即时反馈，所以当我构建这样的布局时，我不断刷新前端的示例帖子。我要注意这一点，以防它迷路甚至让别人失望。完成后，您可以在前端保存和检查您的工作。

旁注：我希望看到一个添加虚拟帖子数据而不是默认占位符的插件。

第一步：选择单帖模板
选择一个帖子模板。

要对所有单个帖子进行此布局更改，您必须通过管理员中的外观 > 编辑器转到站点编辑器。选择左上角的 WordPress 徽标/图标以打开滑出式面板。从那里，单击模板链接。下一个屏幕应显示可编辑模板列表。选择“单个帖子”。

如果您希望将其设为可选模板，您应该从模板编辑器中进行操作。过程类似，但 UI 确实有一些差异。

第二步：调整网站标题（可选）
调整标题行块的对齐和填充。

二十二个标题不适用于我们正在构建的布局类型。它的底部有很多填充物，并且宽度有限。您将需要进行一些更改以获得更理想的设计。请注意，这将更改整个站点的标题，除非您将其另存为单独的模板部分。此步骤是可选的，但最终结果看起来会更好。

在编辑器的Header区域，选择包含Site Title和Navigation块的Row块。从工具栏中，选择“全宽”对齐选项。在右侧的块侧边栏面板中，将 Padding 选项设置为 2rem 或您的首选值。

第三步：创建栏目
将post Header和帖子特色图像块包裹在列中。

因为 TwentyTwoTwo 已经将帖子标题和帖子特色图片块放在一起，所以这里没有必要从头开始。用鼠标或键盘选择两者，单击工具栏中的“转换为”按钮，然后选择“列”选项。

如果使用具有不同布局的主题，您可以手动添加具有 50/50 设置的分栏块，并在两列中插入帖子标题和帖子特色图片块。

第四步：设计栏目
调整栏目块的对齐方式、颜色和填充。

我们修复了一些无聊的布局问题。现在，您可以开始将自己的艺术品牌添加到这个东西中。我为 Columns 块选择了黑色背景和白色文本。但是，请随意添加您想要的任何颜色。您甚至可以尝试将其与边框选项混合。

现在，回到无聊的布局调整。

要使此布局生效，您应该对 Columns 块进行两处更改。首先，从工具栏中选择“全宽”对齐方式。

然后，将块侧边栏中的填充选项更改为 0。将其设置为零允许特色图像拉伸到边缘。如果你想在它周围留一点空间，这不是一个硬性要求。

第五步：标题组
添加帖子标题栏被分组并添加了一些填充。

因为我们在上一步中将填充归零，帖子标题块现在将紧靠布局的一侧。字体在设计中总是需要呼吸的空间，所以我们需要解决这个我们为自己创造的问题。

有两种方法可以解决这个问题。第一种是简单地在帖子标题所在的列块中添加填充。这应该可以正常工作，但 WordPress 处理得不好（它没有对 Column 块使用 box-sizing:border-box）。如果你在这里添加填充，它会使左边比右边宽。不幸的是，这是一个会产生额外工作的小怪癖。

最好的选择是选择帖子标题并将它们分组。然后，在边栏中找到 Fill 控件并将其更改为 2rem 或您喜欢的值。

某些主题可能会纠正列填充问题，因此如果使用的不是 22，请尝试第一个选项。

第六步：调整特色图片
来自帖子特色图像块删除边距。

WordPress 和 Twenty Twenty-2 都没有为 Post Featured Image 块添加任何默认边距处理。