如何在 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 以便短代碼可以工作。