如何使用 Gutenberg 创建博客页面(基于 Gutenberry 主题)

已发表: 2019-10-31

从本教程中,您将找到使用 Gutenberg 编辑器和 GutenBerry 主题创建博客页面所需的一切。

使用 Gutenberg 创建博客页面

博客页面是一个页面,您的访问者可以在其中查看您网站上现有的所有出版物。 它是一个动态页面,这意味着它会显示您网站上添加的出版物,从最近到最早,按日期排序。

重要的是要知道,目前您可以设计出版物的显示方式,但是,帖子摘录、特色图片、帖子元和标题将从出版物中提取。

您需要确保您的网站上有出版物,并且您已经预先设置了特色图片以及您想要在帖子列表中的博客页面上展示的所有信息。

要在您的网站上创建博客页面,您需要转到页面 > 添加新页面,我们开始了!
首先,您必须选择页面的名称。 我们将其命名为“我的第一个博客页面”,但您的页面名称必须是一小段介绍。

您可以使用经典的古腾堡帖子块填充页面。 但是,如果您想节省时间并获得更多额外设置来自定义您的博客页面,您可以使用 ZeGuten 插件。 它有 5 个响应式帖子布局,使您的页面更具吸引力和吸引力。

创建帖子

创建基于 Gutenberry 的博客页面

创建博客页面后,您可以导航到仪表板 > 设置 > 阅读,然后在此处找到帖子页面下拉列表。 指定您刚刚创建的页面并点击保存更改按钮。

恭喜! 现在您已将新创建的页面指定为您的博客页面。 但是,您仍然可以通过多种方式对其进行自定义并使其独一无二。

在定制器中打开新创建的博客页面并访问博客设置选项卡,然后转到博客选项卡以查看您可以执行的操作。

定制博客

默认情况下,您很可能会看到您网站上的所有出版物都显示为列表。 要更改出版物的显示方式,请使用:

布局博客类型 - 在这里您可以从下拉列表中选择一种布局,使您的出版物显示为网格。

列 – 当您为博客设置网格布局后,您将看到下拉列表以选择将在其中显示帖子的列数。

博客设置

还有一些设置可以帮助您决定要展示的帖子的元数据:帖子作者、发布日期、类别、标签、评论数等。

最后一个复选框允许您启用要显示的帖子摘录。

启用显示阅读更多按钮,让访问者点击它并导航到单个帖子页面。

此外,您必须设置粘性标签类型以将您的帖子标记为粘性(如果有)。

为博客页面启用导航

当您的网站上有很多帖子时(是的,您是博主,确定您已经收到了),您就会知道访问者在寻找您已经找到的特定帖子时需要向下滚动页面时可能会感到多么不安前段时间发表。

为了简化流程,您可以向博客页面添加导航类型。 它可以是允许从页面到页面或导航箭头的选项。

当您在定制器中时,您可以在导航类型下拉列表中更改用于博客页面的导航类型。

其他博客设置

在这里您可以选择分页或导航。

如果您没有看到任何分页元素,这意味着您仍然需要设置每页显示的帖子数量。

转到仪表板 > 设置 > 阅读并定义博客页面显示的最大值(它应该小于您拥有的帖子数量,以便您看到分页选项)。

设置帖子编号

在大多数情况下,这足以创建一个博客页面。 但是,如果要创建带有动态出版物列表的静态页面,则可以在 Gutenberg 中进行。 继续阅读以了解如何操作。

使用 Gutenberg 创建包含动态内容的静态博客页面

您应该再次创建一个新页面。 现在我们开始了。

让我们将 Posts 块添加到页面的画布中! 只需单击“开始书写或键入/选择块”文本左侧的“+”图标即可。 选择名为“帖子”的块 - 您可以在 ZeGuten 块类别中找到它。

现在您可以看到 Posts 块使用默认设置显示您网站上的出版物。 让我们稍微调整一下以获得更好的结果。

顺便说一句,您可以轻松使用 Gutenberg 的快捷方式来加快工作速度。 如果您不知道如何使用键盘快捷键,请随时阅读本指南。

帖子块设置。 在古腾堡设置帖子布局

让我们建立所有必要的设置来处理帖子布局的设计以及您想要从帖子中提取以在博客中显示的内容。 幸运的是,在 Gutenberg 编辑器中,您可以在使用 Posts 块时执行所需的一切操作。 不会超过几分钟。

帖子块:布局选项

选择布局

找到页面画布右侧的块设置栏。 如果您没有看到它,这意味着您之前已关闭它。 要取回它,请单击右上角的齿轮图标。 然后单击画布上的 Posts 块以使其处于活动状态并访问其设置。

Posts 块允许从 3 种不同的布局选项中进行选择:

  • 帖子列表 - 这是一个干净的布局,帖子一一排成一列;
  • 帖子网格 – 一种布局,您可以在其中显示多列和多行帖子,设置网格以展示出版物;
  • 不均匀的帖子列表 - 使用此布局按国际象棋顺序排列帖子。 在这里,您将拥有一列,帖子以列表形式一一显示,偶数行显示左侧的特色图片,不均匀的行显示在右侧。

打开下面的帖子设置以选择您要使用此块提取的出版物。

设置设置

您可以在这里设置:

  • 类别 – 您要从中显示出版物的类别。
  • 项目数 - 将出版物限制为一定数量,并且不显示超过一定数量。 最多 100 个出版物,但您当然可以使用“阅读更多”设置来使块看起来更短。
  • 列 - 使用此切换设置网格布局的列数。 最大列数为 6。
  • 选择标题标签 - 在这里您可以设置用于标题的 html 标签(H1 - H6)。 确保您的标题设置正确,以便在搜索结果中显示更高的范围。
  • 排序依据 - 此选项允许按从最旧到最新、从最新到最旧的顺序对出版物进行排序,并使用字母顺序来设置顺序。

还有以下选项:

  • 显示特色图片——您必须确保已将特色图片设置到您的出版物中才能看到它们;
  • 显示发布日期——显示发布日期的选项;
  • 显示帖子类别——这将允许访问者查看帖子与哪个类别相关;
  • 显示帖子摘录 - 启用此选项以显示您帖子的摘录(它可以是自定义的或从您的内容生成的摘录),您还可以通过修剪字数来设置摘录内容的长度;
  • 显示帖子作者 – 启用此开关以显示谁撰写了此出版物。

阅读更多设置

只要您希望访问者打开您的帖子并继续阅读,您就可以显示“阅读更多”链接并自定义其显示方式,将默认文本替换为您自己的文本等。

阅读更多

您还可以决定是否要将每个帖子的“阅读更多”选项显示为文本或按钮。

posts 块适用于处理动态发布,但它还不允许享受自定义查询的全部功能。 然而,在处理博客网站的静态页面时,这将是一项无与伦比的资产。

请注意,目前还没有分页选项,因此如果您想展示所有帖子,则需要将帖子数量设置为最大。 您也可以在设置中将新创建的页面指定为您的主要博客页面,或者您可以保持原样,并使其仅在菜单中显示为您的博客(您应该链接它的位置),同时保留博客页面作为您的帖子存档。

完成此任务的另一种方法是将指向帖子存档页面(您在本教程第一部分中创建的真实博客)的链接添加到帖子列表的底部,以便访问者访问所有出版物。

恭喜! 您已经创建并设计了自己的第一个博客页面! 请订阅我们的时事通讯,以获取有关如何与古腾堡和古腾莓合作的更多提示!