WordPress divi主题

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

by | May 17, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

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

google广告开户

让我们开始吧。

你需要什么

对于本教程,您将需要以下内容:

  • 迪维主题
  • 高级自定义字段插件
  • Church Layout Pack 中的 Church 博客布局(可从 Divi Builder 访问)

讲道布局先睹为快

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

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

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

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

添加新字段组

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

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

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

WordPress divi主题

职位:高(内容后)

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

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

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

扬声器自定义字段

对于第一个自定义字段,让我们添加一个地方,供用户输入讲道的发言人。 要添加新字段,请单击“添加字段”按钮并输入以下内容:

字段标签:扬声器
字段名称:扬声器
字段类型:选择
选择(在新行输入):主任牧师、副牧师、青年牧师、演讲嘉宾

讲道标题自定义字段

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

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

fiverr建站WordPress程序员

布道日期自定义字段

然后,为布道日期添加一个自定义字段。 我们将把这个设置为日期选择器字段类型,以便在后端轻松添加新日期。

字段标签:布道日期
字段名称:讲道日期
字段类型:日期选择器
显示格式: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 构建器顶部的自定义字段组。

JasperAI 10000字免费额度试用

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

讲者:主任牧师(从下拉菜单中选择)
讲道标题:一个新的创造(或任何你想要的)
布道日期:从日期选择器中选择日期
讲道描述:使用所见即所得编辑器输入讲道的描述
布道音频嵌入:输入要嵌入媒体播放器的媒体文件的 url
讲道音频 URL:输入媒体文件的 URL(如果您希望点击后立即下载,则应为 zip 文件)

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

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

现在单击以使用 Visual Builder。

WordPress备份工具updrafplus

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

然后单击选项以选择预制布局。 从从库加载弹出窗口中,选择教堂布局包,然后单击以使用教堂博客页面布局。

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

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

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

<h3>Description</h3>

然后复制该文本模块并将内容更新为“立即收听”。

添加讲道布局动态内容

讲道说明

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

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

保存设置。

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

音频模块和音频嵌入

在标题为“立即收听”的文本模块下,添加一个新的音频模块。 然后使用以下动态内容更新文本内容:

标题:讲道标题(自定义字段)
艺术家姓名:演讲者(自定义字段)
专辑名称:讲道日期(自定义字段)

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

对于音频模块的封面图片,将鼠标悬停在图片预览区域上时单击动态内容图标,然后选择特色图片,即可添加动态内容。

现在,您在后端设置为特色图像的任何内容都将自动填充您的布道音频的封面艺术图像。

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

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

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

文字方向:左
自定义边距:0px 底部

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

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

现在我们可以将音频播放器放置在音频模块内,并带有一些自定义边距。 转到设计选项卡并更新以下内容:

自定义边距(桌面):顶部 -40 像素,左侧 280 像素,右侧 60 像素
自定义边距(平板电脑):0px 左,0px 右

下载链接

有时,下载音频文件对用户很有帮助。 为了使这更容易,您可以将音频文件的链接添加到您的帖子中。 为此,我们将使用动态内容来填充带有讲道标题和音频 url 的简介模块。

在audio模块下添加blurb模块,更新内容如下:

标题:讲道标题(自定义字段)
图标:见截图
标题链接 URL:讲道音频 URL(自定义字段)

要将简介设置为看起来更像可点击链接,请更新以下内容:

图标颜色:rgba(33,50,94,0.86)
图像/图标位置:左
标题字体样式:U
标题下划线颜色:rgba(33,50,94,0.86)
标题文字颜色:rgba(33,50,94,0.86)
标题行高度:2em
内容宽度:100%

为了使链接更容易识别为下载,您可以在“(下载)”的后面输入框中编辑占据宣传标题的讲道标题动态内容,并添加额外的文本。

将讲道标题和元数据添加到标题

最后一步,让我们确保我们的项目/帖子标题部分使用动态内容作为帖子标题以及演讲者姓名和布道日期。 为此,请打开全角标头模块设置并更新以下内容:

标题:讲道标题(自定义字段)
副标题文本:演讲者(自定义字段)
(注:对于Speaker动态内容,在前输入中输入“by:”)
按钮 #1 链接文本:删除
按钮 #2 链接文本:删除
内容:讲道日期(自定义字段)

现在转到设计选项卡并取出正在使用的自定义填充。

这是最终结果。

现在您需要做的就是将布局保存到您的 Divi 库中,以用于将来的布道帖子。 由于您已准备好自定义字段组以处理所有项目,因此您只需在后端更新自定义字段信息,而无需打开 Visual Builder。

此外,通过将讲道保存为项目,您可以轻松创建可过滤的投资组合来显示您的讲道!

最后的想法

我希望本教程有助于进一步了解动态内容以及如何将其与高级自定义字段插件一起使用来创建强大的布道布局。 设置一切可能需要一些时间,但回报绝对值得。 当然,同样的过程可以用于为不同的帖子类型创建各种动态内容。 如果您在下面的评论中有任何问题,请告诉我。 我期待着您的回音。

干杯!

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题