如何创建自定义 WordPress 页面模板

已发表: 2020-06-05

一个真正专业的 WordPress 网站几乎肯定会包含自定义页面模板。 事实上,许多最常见的网站类型都依赖于模板。 一个房地产网站需要一个房子的模板,一个产品的电子商务网站,一个会员的会员网站,等等。

您可以使用 Gutenberg 工具集为您的单个帖子创建 WordPress 页面模板。

模板定义了页面和帖子在前端的外观。 它是蓝图,说明您将如何以及在何处显示每个帖子上的所有内容。 例如,您对烹饪网站上的食谱模板所做的任何更改都会影响所有食谱在前端的显示方式。

我将介绍两种类型的自定义 WordPress 页面模板:

  1. 常规页面的模板
  2. 单个帖子页面的模板

为什么您需要为常规页面自定义 WordPress 模板

模板是一种确保相似页面遵循相同结构的简单方法。 不必为每个页面单独创建布局,您只需创建一次模板并将其分配给您喜欢的任何页面。 然后这些页面将遵循模板。

让我们想象一个例子。 在烹饪网站上,您可能有许多带有烹饪技巧的页面,例如“如何制作完美的意大利面”、“如何煮鸡蛋”等。

我有一本关于烹饪的电子书,我想在所有这些页面上展示。 无需编辑具有相同内容的每个页面(这将花费大量时间),我只需创建一次模板并将模板分配给页面。 这样每个页面都会包含一个号召性用语来下载我的电子书。

这就是我的常规页面模板在前端的外观。
这与上图完全相同的模板。 注意结构是如何相同的。

在上面的两个页面上,您都可以在右侧看到我的号召性用语。 那是因为我为两个页面分配了相同的模板。

创建自定义 WordPress 页面模板的两种方法

您可以通过两种方式创建自定义 WordPress 页面模板:

  • 艰难的方式。 主题自动提供在 WordPress 中定义模板的 PHP 文件。 当您创建自定义帖子类型(例如食谱)时,您需要编辑这些 PHP 字段或创建新字段以确保您的网站显示您的帖子。
  • 简单的方法。 您可以使用 WordPress 插件(例如 Toolset)来创建模板。 Toolset 在几分钟内创建模板,无需任何编码。 此外,使用工具集块,您可以将块添加到具有动态内容的 WordPress Gutenberg 编辑器。
工具集允许您在不使用编码的情况下创建自定义网站。

下面小编就给大家简单介绍一下。

首先,我将为常规页面创建一个模板,其中将包含右侧的号召性用语。

其次,我将为我的食谱自定义帖子类型创建一个模板。

如何为常规页面创建自定义 WordPress 页面模板

步骤 1:创建内容模板结构

您首先需要为您的页面创建内容模板。 安装工具集后,您可以打开一个新的内容模板并开始添加块。

首先,我安排模板的结构。 您可以在下面看到我添加了 Toolset 自己的网格块,它允许我将模板分成多个部分。 我已将模板一分为二,并扩展了左侧的部分,使其占据页面的 75%。

我添加了 Grid 块来创建模板结构并拖动网格以展开左侧部分。

第 2 步:向模板添加内容

现在我有了结构,我需要插入包含我想要显示的内容的块。 在左侧,我添加了帖子内容。 我需要做的就是插入 Toolset 的单字段块,它允许我为内容选择我喜欢的任何来源。

下面我选择右侧的帖子内容作为块的来源。

要选择块中显示的内容,您需要选择源。

对于模板的右侧,我将添加号召性用语。 我需要做的就是根据内容选择我想要的任何块。 下面我使用了标题块和工具集的按钮块。 对于按钮块,我还包含了这本书的链接。

您可以添加一个链接,以便在用户单击按钮时将用户带到正确的页面。

第 3 步:设置块的样式

当您将 WordPress 与 Toolset 结合使用时,您可以为添加到模板中的块设置样式。 如果您选择“艰难的方式”创建块,那么您将需要依靠您的编码技能来获得良好的样式。

当您单击一个块时,您将在右侧看到许多用于设计和增强模板的选项。

在“排版”下,您可以更改以下内容:

  • 字体
  • 字体大小
  • 间距
  • 风格
  • 文字颜色
在右侧边栏上,我可以编辑块的排版。

那不是全部。 在“样式设置”下,您还可以更改以下内容:

  • 背景颜色
  • 边距/填充
  • 边界
  • 框影

下面我为号召性用语添加了新的背景颜色。 请注意,您无需对任何更改进行编码,只需选择所需的颜色和任何其他样式即可。

您还可以在右侧边栏上更改背景颜色、填充等。

第 4 步:针对不同的屏幕尺寸调整模板

您很可能在笔记本电脑或台式机上构建模板,但重要的是要记住,您的用户可能不会在相同的屏幕尺寸上查看网站。 事实上,越来越多的人将使用平板电脑或移动设备。

因此,您可能需要针对每个屏幕尺寸调整模板。 使用工具集和 WordPress 很容易做到这一点。

在每个样式元素旁边的右侧边栏上,有一个选项可以在桌面、平板电脑和移动设备之间切换。

在编辑块时,您可以在屏幕大小之间切换。

如您所见,当我在选项之间切换时,模板会自行调整,以便您可以查看模板在每个设备上的外观。

您还可以在页面顶部的屏幕尺寸之间切换。

第 5 步:将模板分配给您的页面

现在我有了一个模板,我只需要将它分配给正确的页面。 完成此操作后,每个页面都将显示相同的模板。

我需要做的就是编辑每个页面并选择正确的内容模板。

在右侧边栏上,我可以分配一个模板。

在前端,我现在将在我分配给它的任何页面上看到模板。

这是前端的模板。

为什么您需要为单个帖子定制 WordPress 页面模板

除了为常规帖子创建模板之外,您很可能还需要为自定义帖子类型中的每个帖子创建模板。

对于我的烹饪网站,我为我的食谱创建了自定义帖子类型。 在下面,您可以在后端看到我的一个食谱。 请注意我为其创建的所有自定义字段,例如准备时间、烹饪时间和食谱图像。

您可以看到我为帖子创建的所有自定义字段。

我还没有为我的食谱分配模板。 看看当我们在前端没有模板的情况下查看配方时会发生什么。

如果没有模板,任何自定义字段都不会出现在前端。

如您所见,前端没有显示任何自定义字段。 实际上,您只能看到主要的帖子内容,例如帖子标题和帖子正文。 这就是为什么模板对您的单个帖子如此重要,因为它允许您显示所有内容,包括自定义字段。

下面你可以在前端看到我的两个食谱。 您现在可以看到自定义字段,因为我已经为它们分配了一个模板。

这就是我的模板在前端的外观。
这是与上图相同的模板,但配方不同。

下面我将向您展示我如何为我的食谱创建这个模板。

第 1 步:创建模板

我需要做的第一件事是创建模板,我将在其中添加我的内容。 我可以从 WordPress 后端的工具集仪表板执行此操作。

通过从工具集仪表板为我的食谱创建模板,所有食谱帖子都将自动分配给模板。

通过这种方式选择模板,我会自动将模板分配给我创建的所有食谱。 因此,我不需要回到每个配方并手动分配模板。

第 2 步:将内容添加到模板

现在在内容模板上,我可以开始添加和构建内容,就像我为常规帖子的前一个模板所做的那样。

再一次,我可以添加工具集网格块来创建模板的结构。

使用 Grid 块,我可以选择我想要的布局类型。

我现在可以开始为我的内容添加块了。 例如,在我的食谱中,我在左栏中有一个图像。 从古腾堡的一组块中,我可以添加工具集的图像块。 我需要工具集版本的块,因为它允许我添加动态内容。

要添加具有动态内容的块,我需要使用 Toolset 的块而不是默认版本。

动态内容意味着您可以创建一个元素,例如图像,并且对于每个帖子,它将为该特定帖子绘制正确的内容。 例如,动态内容意味着我的香蕉蛋糕食谱将显示,您已经猜到了,香蕉蛋糕。 否则,内容将是静态的,而不是香蕉蛋糕,您会看到我在模板中创建它时插入的任何图像。

通过使用工具集和 WordPress,我可以为我的每个块选择动态源来告诉它显示什么。

例如,我创建了一个新块来添加我的自定义字段之一准备时间。 添加块后,我可以选择 Prep Time 字段作为右侧块的源。 该块也是动态的,因为准备时间会根据配方要求而变化。

要使您的块动态,您可以选择要在右侧栏上显示的字段。

您可以添加多种不同类型的块,包括用于添加多个项目(例如配方的多行)的重复字段块、图像滑块块、YouTube 块等等。

第 3 步:设置块样式

就像常规帖子的第一个模板一样,我可以为每个块设置样式。

第 4 步:针对不同的屏幕尺寸调整模板

同样,与之前的模板类似,我可以针对不同的屏幕尺寸调整结构。

要为不同的屏幕尺寸调整模板,您可以在桌面、平板电脑和移动屏幕之间切换。

第 5 步:检查每个帖子的模板外观

最后,您还可以选择在模板上查看的食谱,以便查看它是否适合所有食谱。 使用页面顶部的下拉菜单在帖子之间切换。

通过使用下拉菜单,我可以看到我的每个食谱在模板中的外观。

准备好后,您可以在前端检查您的模板。

我的每个食谱现在都将具有相同的模板。

就像那样,我有一个食谱模板。 现在,当我创建一个全新的配方时,它将立即遵循模板结构。

立即开始构建您自己的自定义 WordPress 页面模板

现在轮到您了解构建自己的 WordPress 页面模板是多么容易。 您需要做的就是下载 Toolset,然后查看其文档,了解无需编码即可为帖子创建模板的速度。