如何在 Divi 中使用自定义字段和动态内容构建讲道布局

已发表: 2018-10-31

访问和收听讲道的能力是任何教会网站的重要组成部分。而且，随着 Divi 的新 Church Layout Pack 的发布，我认为向您展示如何使用动态内容构建讲道布局会很有用。为此，我将使用高级自定义字段插件创建一个组自定义字段，您可以在帖子的后端更新该字段。通过使用 Divi 的动态内容功能，我将向您展示如何设计布局以引入这些自定义字段来填充您的帖子内容。一切都完成后，您将拥有一个带有动态内容的漂亮布道布局，可以在后端使用自定义字段的直观 UI 进行更新，而无需部署可视化构建器。

让我们开始吧。

你需要什么

对于本教程，您将需要以下内容：

迪维主题
高级自定义字段插件
教会布局包中的教会博客布局（可从 Divi Builder 访问）

讲道布局先睹为快

这是我们将要构建的布局的一瞥。这种布局的美妙之处在于，大部分内容都是使用动态内容从后端的自定义字段生成的。

使用高级自定义字段插件创建自定义字段

高级自定义字段 (ACF) 插件使您可以轻松地将自定义字段组合在一起，用作帖子或页面上的动态内容。它支持多种字段类型（如日期选择器、所见即所得编辑器和 oEmbed），使更新自定义字段变得非常容易。这对于为客户提供更直观的 UI 以使用自定义字段更新其站点非常有帮助。

安装并激活 ACF 插件后，转到 WordPress 仪表板和自定义字段 > 添加新。

添加新字段组

要设置新组，请为新字段组命名。

在位置部分（或切换）下更改设置，使帖子类型等于“项目”而不是帖子。这基本上告诉插件只在 Divi 内置的项目帖子类型上显示这个自定义字段组（如果你愿意，你也可以将其保留为帖子。你的选择。）

然后向下滚动到设置部分并更新以下内容：

位置：高（内容后）

此位置设置确定您的自定义字段组在您的帖子或页面的后端编辑器中的位置。

将自定义字段添加到字段组

现在您的组已经创建和设置，是时候开始向组添加自定义字段了。

扬声器自定义字段

对于第一个自定义字段，让我们添加一个供用户输入讲道演讲者的位置。要添加新字段，请单击“添加字段”按钮并输入以下内容：

字段标签：扬声器
字段名称：扬声器
字段类型：选择
选项（在新行中输入）：主任牧师、副牧师、青年牧师、演讲嘉宾

讲道标题自定义字段

接下来，为讲道标题添加一个自定义字段。

字段标签：讲道标题
字段名称：sermon_title
字段类型：文本
占位符文本：讲道标题

讲道日期自定义字段

然后，为讲道日期添加一个自定义字段。我们将设置一个日期选择器字段类型，以便在后端添加新日期变得轻而易举。

字段标签：讲道日期
字段名称：sermon_date
字段类型：日期选择器
显示格式：F j, Y
返回格式：F j, Y
一周开始于：星期一

讲道描述自定义字段

接下来，为讲道描述添加一个自定义字段。这将允许用户使用所见即所得编辑器更新帖子的内容，而无需打开可视化构建器。

字段标签：讲道描述
字段名称：sermon_description
字段类型：所见即所得编辑器

讲道音频嵌入自定义字段

接下来，使用 oEmbed 字段类型为布道音频嵌入添加自定义字段。这将允许我们通过简单地更新后端嵌入的音频 url 来嵌入讲道的音频嵌入。

字段标签：讲道音频嵌入
字段名称：sermon_audio_embed
字段类型：oEmbed

讲道音频 URL 自定义字段

接下来，为讲道音频 URL 添加一个自定义字段，以便我们可以使用 URL 填充模块中的链接以创建文件的下载链接。

字段标签：讲道音频 URL
字段名称：sermon_audio_url
字段类型：网址

好吧。将自定义字段添加到我们的字段组后，不要忘记保存您的字段组。现在我们可以开始为我们的自定义字段布道内容创建布道布局，以便在整个帖子中用作动态内容。

创建新项目

从 WordPress 仪表板，导航到项目 > 添加新。然后输入项目的标题，它也应该是讲道的标题（但这取决于你）。然后单击以使用 Divi Builder。您将看到显示在 divi 构建器顶部的一组自定义字段。

现在用特定于这篇文章的布道信息填写自定义字段。

讲者：主任牧师（从下拉菜单中选择）
讲道标题：新创造（或任何你想要的）
讲道日期：从日期选择器中选择日期
讲道说明：使用所见即所得编辑器输入讲道说明
布道音频嵌入：输入要嵌入媒体播放器的媒体文件的网址
讲道音频 URL：输入媒体文件的 URL（如果您希望在单击时立即下载，则应为 zip 文件）

然后为您的项目添加特色图片。这将用作讲道布局的音频播放器的图像。

为您的项目添加新的预制布局

现在单击以使用 Visual Builder。

（注意：目前后端构建器不支持动态内容，因此我们需要部署可视化构建器。如果您希望使用更多后端构建器功能自定义布局，只需部署可视化构建器并单击线框模式。）

然后单击选项以选择预制布局。从加载库弹出窗口中，选择 Church Layout Pack，然后单击以使用 Church Blog Page 布局。

将布局加载到页面后，从布局中删除第二、第四和第五部分。现在您的布局应该只有三个部分：顶部标题部分、“最新布道”部分和底部页脚部分。

接下来删除第二部分中的博客模块。

更新“最新布道”文本模块，使其具有以下内容：

<h3>Description</h3>

然后复制该文本模块并更新内容以说“现在收听”。

添加讲道布局动态内容

讲道说明

现在我们准备开始为我们的部分构建动态布道音频内容。首先，我们将在标题为“描述”的文本模块下添加讲道描述。为此，添加一个新的文本模块。将鼠标悬停在内容输入框上，然后单击动态内容图标。

然后从下拉列表中选择讲道描述自定义字段。

保存设置。

现在您的讲道描述将显示为动态内容。这意味着您在后端编辑器屏幕上的布道描述输入框中添加的任何内容都将动态更新到项目页面上。

音频模块和音频嵌入

在标题为“Listen Now”的文本模块下，添加一个新的音频模块。然后使用以下动态内容更新文本内容：

标题：讲道标题（自定义字段）
艺术家姓名：演讲者（自定义字段）
专辑名称：讲道日期（自定义字段）

标签并不重要，因为我们主要关心动态内容在音频模块中的位置。讲道标题、演讲者和讲道日期在音频模块中很好地显示，根本不需要做太多工作。

对于音频模块的封面图片，通过将鼠标悬停在图片预览区域上时单击动态内容图标并选择精选图片来添加动态内容。

现在，无论您在后端设置什么特色图片，都将自动为您的布道音频填充封面图片。

为了更好地匹配布局的设计，保存您的设置并通过右键单击部分设置中的背景类别文本并选择“复制背景”来复制底部部分的背景。

现在通过打开音频模块设置，右键单击背景类别文本，然后单击“粘贴背景”选项，将背景粘贴到音频模块背景设置中。

然后跳转到设计设置并更新以下内容：

文本方向：左
自定义边距：底部 0px

现在我们要完成布道音频播放器所剩下的就是嵌入的实际音频播放器。目前，音频模块内置的音频输入框不支持动态内容（我相信将来会支持），因此我们将做一个小的解决方法。我们将创建一个新的文本模块并添加使用动态内容嵌入的音频文件。并且由于 WordPress 识别自定义字段生成的短代码的方式，它将显示默认音频播放器。

为此，在音频模块下添加一个文本模块，然后添加自定义字段“Sermon Audio Embed”作为动态内容。确保启用原始 HTML 以便短代码可以工作。