如何使用 Divi 和 ACF 向 CTA 添加動態 URL

已發表: 2020-01-04

創建網站結構時,您很可能希望在多個頁面、帖子和項目中包含相同的 CTA。 當然,您可以將 URL 放在附近並隨時復制粘貼它們,但這不一定是最簡單的方法。 在開始創建頁面、帖子和項目之前,您可以設置您可能需要的所有 URL 的列表,為它們設置默認值並在您創建的新項目上使用默認值。

如果出於某種原因,某個頁面、帖子或項目上的 URL 不同,您可以在項目本身內更改它,而不會將其應用於整個字段默認值。 附加到 URL 的默認值將幫助您在創建新頁面、帖子或項目時搶先一步。 在本教程中,我們將逐步向您展示如何到達那裡!

讓我們開始吧!

教程概述

  • 如果您在開始添加頁面、帖子和項目之前將自定義字段組添加到新網站,則此方法最有效
  • 在您的 WordPress 網站上安裝高級自定義字段插件
  • 在插件中,您將能夠設置一個字段組,該組將顯示在您的所有頁面、帖子和項目中
  • 為整個網站中可能需要的所有可能的 URL 創建一個單獨的 URL 字段
  • 為每個字段分配一個默認值; 此默認值將自動出現在每個頁面、帖子或項目上
  • 在現有頁面、帖子和項目上,只有在您進入後端並保存默認 URL 後,這些值才會出現
  • 將整個 Divi 設計中的 URL 字段用作動態鏈接內容(頁面、帖子、項目、模板)
  • 如果您在字段設置中更改默認 URL,舊的默認 URL 仍將應用於繼承先前默認值的頁面、帖子和項目

1. 安裝並激活 ACF 插件

您需要做的第一件事是在您的網站上安裝高級自定義字段插件。 您可以在此處下載該插件,也可以在 WordPress 儀表板中搜索它。 安裝插件後,請確保也將其激活,以便您可以立即開始使用。

動態網址

2. 在所有帖子、頁面和項目上設置字段組

現在,一旦安裝了 ACF 插件,就可以創建 URL 字段組了。 該組將包含您將在頁面、帖子和項目中多次使用的所有 CTA。 轉到您的WordPress 儀表板 > 自定義字段 > 添加新的

動態網址

給你的小組一個標題,然後繼續設置規則。 我們確保字段組出現在我們網站上的每個帖子類型中。 但是,如果您希望鏈接僅顯示在一種特定的帖子類型上,則可以根據需要調整規則。

在以下情況下顯示此字段組:

  • 帖子類型 - 等於 - 帖子
  • 帖子類型 – 等於 – 頁面
  • 帖子類型等於 – 項目

動態網址

3.添加不同的默認值的URL字段

我們將繼續添加不同的 URL 字段。 如前所述,您需要為在帖子類型中多次使用的每個 URL 設置一個單獨的 URL 字段。 為了說明它是如何工作的,我們將添加三個不同的 URL 字段。 其中一個字段會將訪問者重定向到 Divi 畫廊登錄頁面,第二個字段會將訪問者引導到聯繫頁面,其餘字段會將用戶重定向到會員區。

動態網址

因此,假設我們從將人們重定向到 Divi 畫廊登錄頁面的 CTA 開始。 我們將為它添加一個新字段並為其指定一個可識別的字段名稱。 這樣,一旦我們進入 Divi 構建器,就不會在選擇正確的 URL 時感到困惑。

動態網址

我們將繼續向下滾動字段設置並選擇“URL”作為字段類型。

動態網址

您需要做的下一件也是最後一件事情是為該字段添加一個默認值。 您將在此處放置您希望 CTA 重定向到的 URL。 添加此默認值後,它將自動應用於您添加的每個新頁面、帖子和項目。

動態網址

對您網站上需要的每個 CTA 字段重複上述步驟。 對於這個特定示例,這意味著我們要創建兩個額外的字段; 一次用於聯繫頁面,另一次用於會員區。

動態網址

添加所有 URL 字段後,請確保保存對字段組所做的所有更改。

4. 鏈接按鈕鏈接到動態 URL

現在,當輸入帖子、頁面或項目時,您會注意到底部的 URL 字段組。 如果出於任何原因您想在該特定頁面、帖子或項目上使用不同的 URL,您可以在該字段中添加另一個 URL。 您添加的 URL 僅適用於您正在處理的特定頁面、帖子或項目。 在字段組的核心中,默認 URL 仍將與您在創建字段時添加的 URL 相同。

動態網址

如果您使用默認 URL,請切換到 Visual Builder 以開始將設計中的按鈕鏈接到正確的 URL。

動態網址

將動態 URL 添加到您的 Divi 按鈕非常簡單。 打開您可以在頁面上找到的任何按鈕,轉到鏈接設置,然後單擊動態內容圖標。

動態網址

單擊動態圖標後,您將找到可供選擇的動態內容列表。 在該列表中,您還會看到不同的 URL 字段出現。 選擇要鏈接到的正確 URL 字段。

動態網址

對頁面上的每個按鈕重複這些步驟。 如果頁面、帖子或項目上的 URL 因任何原因發生變化,您可以返回該特定頁面、帖子或項目並在後端更改 URL 動態內容。

動態網址

同樣的方法也適用於向模板添加動態 URL。 例如,如果您想為博客帖子模板中的按鈕添加動態 URL,您可以轉到網站的主題構建器並打開帖子正文模板編輯器。

動態網址

繼續打開按鈕模塊設置,轉到鏈接設置並單擊動態內容圖標。

動態網址

同樣,將顯示一個下拉菜單,您可以在其中選擇與 CTA 匹配的 URL 動態內容。

動態網址

確保在添加動態 URL 後更改所有主題構建器更改!

動態網址

動態網址

最後的想法

在這篇文章中,我們向您展示瞭如何創建動態 URL,並讓它們在您網站上的每個頁面、帖子或項目中可用。 我們將 Divi 的動態內容與 ACF 插件結合使用。 我們能夠設置默認值並將該 URL 值應用於我們的 CTA。 本教程的重點是讓您在使用 Divi 創建網站時盡可能高效! 如果您有任何問題或建議,請隨時在下面的評論部分發表評論。

如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品,請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道,這樣您將永遠是第一批了解此免費內容並從中受益的人之一。