如何使用 Advanced Custom Fields 和 Elementor Pro 自訂 WordPress 文章頁面

文章大綱

Views: 647

今天,我們將介紹一個名為 ACF (Advanced Custom Fields) 的外掛,並展示如何安裝和使用它。

首先,從 WordPress 外掛頁面安裝 ACF。進入外掛搜尋頁面,輸入 “ACF” 並搜尋。你會看到 Advanced Custom Fields 外掛,點擊安裝並啟用。

啟用後,我們來看看在發表文章時的效果。我們進入部落格頁面,有四篇文章。隨便打開其中一篇,比如 “Crafting”。

進入文章後,你可以在標題和內容中輸入文字,並進行一些調整。我們將介紹如何在 Elementor 中使用這些字段。點擊進入 Elementor,關掉翻譯功能。

在 Elementor 中,我們可以使用主題建構器 (Theme Builder) 來設計頁面。這裡我們選擇標題、作者資訊、特色圖片、內文、上一篇和下一篇文章的導航,以及相關文章和留言區。

現在,我們返回 WordPress 並安裝 Elementor 外掛。我們安裝免費版的 Elementor,然後重新整理頁面。左側欄會出現 Elementor 選項,我們進入範本頁面,可以看到主題建構器選項。

免費版的 Elementor 有很多功能是鎖定的,需要升級到 Pro 版。我們點擊升級,登入已購買的帳號或下載最新版本並安裝。安裝並啟用 Elementor Pro 後,我們回到主題建構器頁面,可以看到之前鎖定的功能已經解鎖。

現在,我們來設計 Single Post 單一文章頁面。我們新增一個 Single Post,預設會有標題、圖片和內文。我們可以根據需要進行調整,添加或刪除不同的元素。

我們將使用 ACF 來新增自訂欄位。回到 ACF,新增一個 Field Group,選擇 URL 類型的欄位,命名為 “YT 連結”。設定完成後,這個欄位會出現在文章編輯頁面中,標題下方。

現在,我們在新增或編輯文章時,可以看到 YT 連結欄位。我們可以在這裡輸入 YouTube 影片的連結。保存文章後,回到 Elementor,新增一個影片元件,設定來源為動態 URL,選擇剛剛新增的 YT 連結欄位。

此外,我們還可以新增按鈕,連結到 YouTube 影片,設定按鈕點擊後在新視窗中打開。

我們回到文章頁面,重新整理,可以看到新增的影片和按鈕。如果文章沒有設置影片連結,該欄位會是空的。

ACF 不僅可以新增 URL 欄位,還可以新增其他類型的欄位,如文字、圖片等。我們可以靈活地使用這些欄位,來豐富我們的文章內容。

於是我們展示了如何安裝 ACF 和 Elementor,並使用它們來設計和自訂文章頁面。ACF 是一個非常靈活且強大的工具,可以幫助我們輕鬆地新增和管理文章中的自訂欄位。希望大家能夠嘗試並充分利用這些功能。

發佈留言