WordPress自定義欄位的基本指南

如果WordPress的一項功能使它與其他內容管理系統(CMS)脫穎而出,那就是自定義。WordPress中的自定義欄位是CMS的內置部分,它使您不僅可以擴展顯示的元數據和信息,還可以完全更改帖子或頁面的功能和實用程序。我們想幫助您了解基本知識。我們將討論什麼是自定義欄位,為什麼有用,並提供一些使用它們的真實示例。

什麼是WordPress自定義欄位?

簡而言之,WordPress自定義欄位為您提供了一種向頁面添加特定元素的方法。它可能是一種特定類型的圖像,署名或作者簡介,或者是評分,甚至是類似的內容,例如自定義欄位上食典條目說的是心情,當前正在閱讀,正在收聽或正在播放天氣信息。

這些欄位構成了帖子的元數據(基本上是文章主要內容中未包含的任何內容)。默認情況下,WordPress具有用於通用信息的元框,例如標籤,類別,永久鏈接,特色圖像等。如果要添加更多信息,將使用自定義欄位。

您甚至可能想要添加團隊中的每個作者都需要完成的信息才能發布帖子。

the-essential-guide-to-wordpress-custom-fields WordPress自定義欄位的基本指南

您可以創建一個必填欄位,直到選中某些條件後才能發布該帖子。因此請記住,這些自定義欄位不僅用於前端信息。它們對於後端也很有用。

將自定義欄位添加到WordPress帖子中

默認情況下,頁面和帖子編輯器中禁用WordPress自定義欄位。如果您使用的是「塊編輯器」,則啟用它們很容易。只需點擊屏幕右上角的齒輪圖標。選擇選項。

the-essential-guide-to-wordpress-custom-fields-1 WordPress自定義欄位的基本指南

然後選擇啟用彈出窗口底部附近的「自定義欄位」。您將必須重新載入頁面,因此請確保先保存您的工作。

the-essential-guide-to-wordpress-custom-fields-2 WordPress自定義欄位的基本指南

啟用並重新載入後,您的自定義欄位元框將顯示在屏幕底部。在屏幕的內容編輯器部分下方。

the-essential-guide-to-wordpress-custom-fields-3 WordPress自定義欄位的基本指南

儘管WordPress自定義欄位功能強大,但默認欄位僅限於文本值。需要PHP和開發才能使其更強大。幸運的是,有一些插件可以為您工作,我們將逐步指導您如何使它們運行。如果您需要的只是某些帖子上的文本欄位,並且不需要插件,請隨意跳過以下有關將WordPress自定義欄位添加到主題前端的內容。這適用於默認欄位以及由「高級自定義欄位」之類的插件生成的欄位。

使用高級自定義欄位插件

與WordPress中的大多數內容一樣,您在實現上有兩個選擇。您可以手動編輯PHP文件以添加自定義欄位功能,也可以使用插件。在這種情況下,我們強烈建議您使用插件路由但是,如果您需要編輯PHP並進入代碼,則可以在外觀–主題編輯器下進行。這是自定義欄位上WP Codex頁面,可助您一臂之力。它鏈接到各種模板標記和鉤子,您需要使它們工作。

但同樣,我們強烈建議您在調整代碼時使用Advanced Custom Fields插件。該插件允許您從自定義欄位(然後是某些欄位)中獲取所需的一切,因此我們不需要重新發明輪子。當它起作用時,它起作用。用它。

the-essential-guide-to-wordpress-custom-fields-4 WordPress自定義欄位的基本指南

一旦安裝並激活了ACF,您將在WordPress管理面板的左側欄中看到一個自定義欄位條目。它帶有三個選項:「欄位組」,「添加新項」和「工具」。

the-essential-guide-to-wordpress-custom-fields-5 WordPress自定義欄位的基本指南

可以將欄位組視為集合。您想在同一框中顯示的所有內容都將包含在同一組中。添加新項將使您既可以添加新組,又可以添加新的自定義欄位。雖然可以使用「工具」從其他WordPress網站導入和導出現有的不同自定義欄位集。

the-essential-guide-to-wordpress-custom-fields-6 WordPress自定義欄位的基本指南

ACF的基礎

自己創建欄位非常簡單。移至「添加新窗口」。

the-essential-guide-to-wordpress-custom-fields-7 WordPress自定義欄位的基本指南

無論如何,ACF自定義欄位將包含在欄位組中。這僅表示同一框中包含的特定欄位。因此,您可以為它命名,只要您希望它出現在帖子編輯器中即可。每次要將個人條目添加到組中時,都將單擊「添加欄位」按鈕。每次在同一個meta框中需要不同的欄位時,請執行此操作。位置規則確定該框的顯示位置和時間。在此示例中,由於「過帳類型」等於「過帳」,這意味著它將僅顯示在「過帳」上。不是Pages或其他自定義帖子類型

接下來,您實際上要為欄位本身選擇設置。它要做什麼以及它將在網站上提供的功能。

the-essential-guide-to-wordpress-custom-fields-8 WordPress自定義欄位的基本指南

您基本上可以選擇放置位置(在編輯器中的帖子內容下方,側邊欄,內容上方等)以及文本和欄位本身的位置。屏幕上隱藏區域是最有趣的。根據您需要使用自定義欄位的方式,可以從草稿中排除任何其他元框。選擇此自定義欄位的外觀條件,然後確定是否還有其他框出現。很多時候,您甚至不必擔心這一點。

使用ACF創建自定義欄位

命名欄位組後,可以單擊「添加欄位」按鈕。同一組中可以有任意多個欄位,但是請確保它們彼此相關。您可以使用ACF進行幾乎可以想像的任何輸入欄位

在此示例中,我們假設我們正在運行一個流行文化WordPress網站,該網站查看電影並希望自定義欄位顯示等級,列出該電影是否在流式播放,以及是否在流式播放中找到它。

the-essential-guide-to-wordpress-custom-fields-9 WordPress自定義欄位的基本指南

這些都將在同一個欄位組下,但是在不同的欄位下。如您在上面看到的,它在流嗎?欄位被設置為帶有「是/否」選擇器的單選按鈕,發布前需要此選擇器。此外,如果該欄位標記為「是」,我們希望顯示一個條件欄位。只需再次按下添加欄位即可完成。

the-essential-guide-to-wordpress-custom-fields-10 WordPress自定義欄位的基本指南

啟用「條件邏輯」切換後,您只需要選擇該欄位所屬的欄位以及值是什麼即可。在這種情況下,是否正在流式傳輸?必須等於是。 

在帖子編輯器中,自定義欄位條目將如下所示:

the-essential-guide-to-wordpress-custom-fields-11 WordPress自定義欄位的基本指南

而且,當您發布帖子時,您輸入的元數據將成為帖子的一部分。但是仍然存在一個問題。您看不到它,訪客也看不到。

如何在WordPress前端上顯示自定義欄位

即使您已完美地完成了所有這些操作,您所輸入的數據也不會經過一些調整就不會顯示在站點的前端。畢竟,它會出現在哪裡?很多時候,您的主題將具有一種顯示元數據和自定義欄位的方法,但是這些主題因主題而異。檢查主題選項以獲取文檔。

在前端顯示自定義欄位的另一種方法是內置的ACF短代碼儘管ACF中未內置任何定製程序或構建器,但是您只能將以下簡碼用於文本欄位。

the-essential-guide-to-wordpress-custom-fields-12 WordPress自定義欄位的基本指南

但是,由於它僅限於文本欄位,因此對於許多人來說,它的使用可能有限。您也可以進入PHP並使用ACF代碼,如其文檔示例中所示您還可以升級到ACF Pro,並訪問內置的Gutenberg塊,該完全按照您在構建器中設置的樣式顯示自定義欄位。

但是就像我們說的那樣,這些天來很多主題都帶有自定義欄位集成,我們將向您展示在Divi中是如何處理的

如何使用Divi在前端顯示自定義欄位

首先,請記住,許多Divi模塊都可以呈現短代碼。如此多次,您可以使用ACF中創建的文本自定義欄位簡單地使用它們的短代碼插入,就像我們上面提到的那樣。

對於上面的使用條件邏輯和單選按鈕的示例,我們將使用Divi的動態內容功能它也非常易於使用。我們將通過Divi Theme Builder向您展示這一點,但是您可以在常規Divi Builder中支持它的任何模塊中使用它。單擊黑色+,然後選擇所需的模塊。為此,它是文本模塊。

the-essential-guide-to-wordpress-custom-fields-13 WordPress自定義欄位的基本指南

接下來,找到要將自定義欄位插入其中的模塊部分。在支持該功能的任何位置的右側查找「動態內容」圖標。

the-essential-guide-to-wordpress-custom-fields-14 WordPress自定義欄位的基本指南

單擊它,從下拉菜單中選擇所有可用的動態內容,包括所有自定義欄位。他們可能處於最底層。

the-essential-guide-to-wordpress-custom-fields-15 WordPress自定義欄位的基本指南

Divi使您可以選擇基本在欄位內容之前/之後添加標籤。我們希望我們的文章能自然地閱讀,所以這部電影可以在線播放嗎?呈現欄位時,它將放置在值之前。另外,我們確實在末尾添加了尾隨空格以將標籤與ACF值分開。

the-essential-guide-to-wordpress-custom-fields-16 WordPress自定義欄位的基本指南

由於每個模塊區域只能包含一個動態內容,因此對其他欄位重複此過程。但是請注意,即使自定義欄位是有條件的,Divi模塊也不是。因此,如果在條件欄位上使用前/後標籤,則仍會看到該標籤。如果將它們留為空白,則將不會顯示任何值。

the-essential-guide-to-wordpress-custom-fields-17 WordPress自定義欄位的基本指南

此外,「啟用原始HTML」選項將允許您放入ACF欄位中的任何代碼進行呈現,例如指向各種平台的鏈接等。

總結

如您所見,儘管WordPress定製欄位看起來很複雜,但它並不是一項使開發人員正確使用的功能。只需安裝ACF並開始自定義您和您的團隊輸入信息的方式。無論是評論網站,電子商務市場,還是只是一個友好的博客,您都希望在其中分享生活中發生的事情,因此,通過調整和完善帖子和頁面的元數據可以將您的網站提升到一個新的水平。

相關文章