WordPress自定義欄位是使WordPress成為靈活的內容管理系統的重要組成部分，而不僅僅是“一個部落格平臺”。
對於WordPress自定義欄位，Advanced Custom Fields外掛是最知名的名稱之一。它使在各個方面使用自定義欄位變得更加容易，這也是我們今天文章的主題。
具體來說，我們將解釋為什麼高階自定義欄位如此有價值，然後逐步向您展示如何將其應用到您的WordPress網站。
以下是您將在這篇文章中找到的所有內容：
什麼是Advanced Custom Fields外掛？
由Elliot Condon開發的高階自定義欄位（通常簡稱為 ACF）是一個WordPress外掛，允許您向網站新增和管理WordPress自定義欄位。它既可以作為免費外掛也可以作為高階外掛使用，稱為ACF PRO，終身更新和1個站點的起價為25美元。
什麼是WordPress自定義欄位？他們讓你做什麼？
WordPress自定義欄位可讓您新增、儲存和顯示有關WordPress中某段內容的附加資訊。在更技術層面上，自定義欄位可幫助您儲存後設資料。
即使您不熟悉這個術語，自定義欄位也會為您喜歡的外掛和主題中的大部分功能提供支援。
例如，構建電子商務商店的最流行方式WooCommerce使用自定義欄位來儲存有關產品的其他資訊，例如：
- 價格
- 重量
- 顏色
或者，如果您有WordPress事件日曆外掛，該外掛將使用自定義欄位來儲存有關事件的額外資訊，例如：
- 地點
- 開始/結束時間
- 價格
您還可以建立自己的自定義欄位來儲存與您的獨特需求相關的資訊，這就是整篇文章的內容。
什麼時候應該使用自定義欄位？
現在，您可能想知道為什麼首先需要自定義欄位。
例如，如果您想在您的WordPress網站上釋出活動，您不能將所有這些資訊作為常規文字放入WordPress編輯器中嗎？
嗯，是的，你可以。但是出於以下幾個原因，使用自定義欄位是一種更好的方法：
- 更輕鬆的輸入——而不是從頭開始輸入內容，佈局良好的自定義欄位組將使輸入資料變得更加容易。例如，您可以直接從日期選擇器中選擇日期，而不是輸入日期。
- 一致性——您在自定義欄位中輸入的資訊將始終根據您的設定顯示，這意味著它將在您的整個站點中保持一致。
- 易於更新和維護——如果您想更改該資訊在未來的顯示方式，您可以只更新一件事，而不必單獨編輯每個帖子。
WordPress包括內建的自定義欄位功能
WordPress實際上包含用於向您的內容新增自定義欄位的內建功能。在經典的TinyMCE編輯器中，您可以從螢幕選項區域啟用此功能。或者，在新的區塊編輯器中，您可以從選項區域啟用它：
如何在區塊編輯器中訪問自定義欄位
然後，您可以使用鍵/值對輸入自定義欄位資料：
內建的WordPress自定義欄位功能
這種本機自定義欄位功能是完全實用的，但它不是最使用者友好的做事方式，這就是為什麼很多人轉而使用高階自定義欄位外掛的原因。
Advanced Custom Fields使其更容易
簡而言之，Advanced Custom Fields使在WordPress中使用自定義欄位變得更加容易……幾乎所有方面。
它簡化了在WordPress儀表盤中新增和管理自定義欄位的介面，還簡化了在站點前端顯示自定義欄位資訊的過程。這一事實僅有助於解釋為什麼它在超過100萬個網站上活躍，並在1,000多條評論中獲得4.9星評級。
在後端，它可以讓您建立使用者友好的元框，其中包括預選的欄位型別。因此，您將能夠使用日期選擇器、覈取方塊等，而不是通用鍵值對介面（如您在上面看到的那些）：
區塊編輯器中的高階自定義欄位
高階自定義欄位總共提供 30 多種不同的欄位型別，您可以將它們新增到儀表板中的任何區域，包括文章、使用者、分類法、媒體、評論，甚至自定義選項頁面。
高階自定義欄位還通過詳細記錄的功能、簡碼、古騰堡塊等，使顯示該資訊變得更加容易。
或者，您可以找到與其他工具的整合，例如一些拖放式WordPress頁面構建器。
Advanced Custom Fields免費與專業：您需要哪一個？
高階自定義欄位既有免費版本，也有價格實惠的高階版本。
對於大多數基本用途，免費版本完全沒問題。它使您可以訪問幾乎所有的欄位型別，以及上面概述的所有節省時間和使用者友好的功能。
如果您只想儲存有關您的內容的一些額外資訊，免費版本就是您所需要的。
話雖如此，專業版確實新增了一些非常方便的功能，可以幫助您以更有趣的方式使用高階自定義欄位：
- 重複欄位——這些允許您在逐個帖子的基礎上重複某些欄位/欄位組。例如，如果您要向事件新增有關發言人的資訊，中繼器欄位將幫助您處理有多個發言人的情況（您可以根據需要多次“重複”發言人的欄位，它可以讓您處理有多個揚聲器的邊緣情況）。
- ACF區塊– 將您的欄位顯示為Gutenberg區塊，而不是元框。如果您正在為客戶構建站點並希望為他們提供一種簡單的方法來輸入和視覺化自定義欄位資料，這將特別方便。
- 靈活的內容欄位– 從其他欄位建立佈局。它有點像基於自定義欄位資訊的輕量級頁面構建器。
- 相簿欄位– 將多個影象上傳到單個欄位。
還有一些其他差異，例如選項頁面、克隆欄位的能力、對關係欄位的改進以及其他較小的調整。
您可以在此處檢視所有ACF PRO功能。
ACF PRO起價為25美元，可在單個站點上終身使用。或者，您可以支付100美元在無限網站上終身使用。
如有疑問，請從免費版本開始，直到您確切瞭解所需的功能。如果需要，您可以隨時升級。
Advanced Custom Fields教學：如何新增欄位
現在讓我們深入研究實際的高階自定義欄位教學，我將向您展示如何建立和顯示您的第一組自定義欄位。
對於這個例子，假設你有一個關於跑步的部落格。你喜歡……真的很喜歡跑步，你想與你的讀者分享你的日常鍛鍊。具體來說，對於每篇博文，您都想分享一次跑步：
- 目的——假設你有兩種不同型別的跑步：“速度訓練”和“訓練”。
- 距離——你跑了多長時間。
- 開始時間——你開始跑步的時間。
- 完成時間——你完成跑步的時間。
- 位置——你跑步的地方。
要收集該資訊，您需要新增五個自定義欄位。
請務必注意，您將在此高階自定義欄位教學中學習的原則適用於任何用例。我們只是選擇一個具體的例子，因為它有助於有一個具體的例子來連線。
我們將把本教學分為兩部分：
- 如何在後端新增和管理您的自定義欄位。
- 如何在您的網站前端顯示自定義欄位資訊。
1.建立一個新的欄位組
從WordPress.org安裝並啟用Advanced Custom Fields的免費版本後，轉到Custom Fields > Add New以建立您的第一個Field Group。
顧名思義，“Field Group”是一組一個或多個自定義欄位，它們一起顯示在您的WordPress儀表盤中。
對於此示例，您將建立一個包含五個自定義欄位的欄位組。
為您的欄位組命名，然後選擇其Location。在本例中，我們希望為常規WordPress部落格文章顯示這些自定義欄位，因此您可以將其保留為預設Post。
但是，如果您想在其他地方顯示自定義欄位，例如自定義文章型別或分類，您需要更改此設定。您還可以設定多個規則以在多個位置顯示您的欄位：
建立一個新的ACF欄位組
2.新增自定義欄位
接下來，單擊+ Add Field按鈕以新增您的第一個自定義欄位：
新增新欄位
這將開啟很多選項，但您不一定需要填寫所有內容。
兩個最重要的選擇是：
- Field Label——這是將出現在編輯器中的內容。它還將用於生成欄位名稱，這是您將在程式碼中使用的名稱。您不需要更改欄位名稱（儘管您可以根據需要更改）。
- Field Type— 這是您要收集的資訊型別。例如，您需要一個Number欄位來收集號碼資訊或一個Email欄位來收集電子郵件地址。
對於第一個欄位，您需要一個Radio Button欄位型別：
配置欄位
再往下，您可以在“Choices”框中輸入單選按鈕選擇選項：
輸入單選框選項
您還可以做出許多其他選擇，例如是否需要欄位和預設值。隨意配置這些以滿足您的需求。
讓我們看另一個示例：用於收集跑步距離的自定義欄位。這一次，您需要一個Number欄位型別：
建立數字欄位
您還可以通過選擇Append距離單位使事情變得更加使用者友好。如果您願意，您還可以使用Minimum Value和Maximum Value新增驗證。例如，你可能不會跑1000英里（如果你這樣做了……天哪，你就是終極阿甘正傳）！
更多欄位設定
只需對您要收集的所有其他自定義欄位重複該過程。完成後，它應該看起來像這樣：
5個不同的ACF欄位
3.配置設定和釋出
要完成任務，請向下滾動到“Settings”框。在這裡，您可以控制欄位在WordPress編輯器中的顯示方式。
大多數情況下，您可以將這些保留為預設值。但是，如果您願意，請隨時更改。例如，您可以選擇在常規WordPress編輯器上方顯示自定義欄位：
配置ACF欄位組設定
做出選擇後，Publish您的欄位組以使其生效。
4. 在WordPress編輯器中新增一些資訊
釋出欄位組後，您會在建立新文章時看到您的欄位。
預設情況下，它們將一起出現在經典TinyMCE編輯器和新區塊編輯器中的編輯器下方：
區塊編輯器中的高階自定義欄位
您在此處輸入的資訊將儲存在您網站的WordPress資料庫中，以便於檢索（您將在我們的高階自定義欄位教學的下一部分中看到）。
探索條件邏輯
在我們繼續之前，讓我們快速繞道。
看，高階自定義欄位如此受歡迎的原因之一是它允許的所有有趣的實現。
這裡一個強大的選項是條件邏輯（Conditional Logic），它允許您根據前一個欄位的回答方式顯示/隱藏欄位。
讓我們看一個簡單的例子來說明它是如何工作的……
假設您想寫關於食物、旅行或跑步以外的任何內容的部落格。當您撰寫關於非執行主題的文章時，顯示有關執行資訊的自定義欄位沒有多大意義，對吧？
如果不是自動顯示您剛剛建立的所有自定義欄位，而是可以新增一個自定義欄位，上面寫著“Is this a run？”：
條件邏輯示例
如果您選中該框，則執行資訊欄位會自動出現。如果您不選中它，它們將保持隱藏狀態：
選中時顯示其他欄位
這就是條件邏輯允許您做的事情！
要進行設定，您將編輯您的欄位組併為“Is this a run？”新增一個新的True/False欄位：
新增True/False欄位
然後，您將編輯現有欄位並開啟條件邏輯（Conditional Logic），以便每個欄位僅在“Is this a run？”時顯示。檢查欄位：
向其他欄位新增條件邏輯
如何在前端顯示高階自定義欄位
好的，我們的高階自定義欄位之旅已經完成了一半。您現在可以將資訊新增到您的自定義欄位，將其與相關的文章型別相關聯，並將其儲存在您的資料庫中。
但是，仍然存在一個潛在問題：自定義欄位中的資訊還沒有出現在前端的任何地方！
也就是說，即使您為部落格文章新增了一些自定義欄位到編輯器，您的部落格文章仍然看起來像前端的普通部落格文章：
前端沒有自定義欄位
讓我們解決這個問題。
您可以通過幾種不同的方式在網站前端顯示高階自定義欄位資料。您選擇的確切方法將取決於您的需求和知識水平。以下是實現這一目標的三種不同方法：
- 您的主題的模板檔案——這需要一點技術知識，但大多數時候這是最好的方法，尤其是當您對使用主題的模板檔案感到滿意時。
- 使用簡碼– 如果您只想逐個插入自定義欄位資料，這是一個超級簡單且不錯的選擇。但是，它需要更多的手動工作，因為您需要為每個文章新增短程式碼。
- 使用Elementor Pro — 這很棒，因為它完全無需使用PHP，但它是一款優質產品，這也意味著您需要使用Elementor Pro進行模板製作。
您可以單擊上方直接跳轉到特定方法，也可以通讀所有方法。由你決定。
如何在主題模板檔案中新增高階自定義欄位
顯示自定義欄位資訊的第一種方法是將高階自定義欄位的PHP函式直接新增到子主題的模板檔案中。
這有點高階，因為它需要您深入研究主題的模板檔案，但它可以確保您的自定義欄位每次都會自動顯示在同一位置。
具體來說，您需要為相關文章型別編輯single模板。
對於普通的部落格文章，這是single.php。或者，一些主題將事物分解為模板部分。例如，對於TwentyNineteen主題，您實際上需要編輯content-single.php模板部分。
如果您在這裡感到迷失，您可能想要使用不同的方法。
找到單個文章的主題模板檔案後，您可以使用高階自定義欄位的the_field()函式來顯示欄位的資訊。例如，
<?php the_field('FIELD_NAME'); ?>
在此處瞭解更多資訊。
例如，要顯示“Purpose”欄位，您可以使用
<?php the_field('purpose'); ?>
您可以在編輯欄位組時找到欄位名稱：
在哪裡可以找到ACF欄位名稱
因此，將一點HTML標記與PHP結合起來，您可能會得到類似這樣的東西來顯示所有欄位：
<div class="run-information">
<ul>
<li><strong>Purpose:</strong> <?php the_field('purpose'); ?></li>
<li><strong>Distance:</strong> <?php the_field('distance'); ?></li>
<li><strong>Start Time:</strong> <?php the_field('start_time'); ?></li>
<li><strong>End Time:</strong> <?php the_field('finish_time'); ?></li>
<li><strong>Location:</strong> <?php the_field('location'); ?></li>
</ul>
</div>
要將其新增到常規文章內容之上，您需要將其新增到the_content()上方的主題模板檔案中：
在主題模板檔案中新增程式碼的位置
而現在，重新整理博文後，您可以看到常規WordPress內容上方的自定義欄位資料：
您現在可以在前端看到欄位
要了解更多資訊，請檢視高階自定義欄位的完整文件。
如何使用簡碼顯示高階自定義欄位資料
要以更簡單的方式顯示自定義欄位的資料，您還可以使用簡碼。但是，這裡的缺點是每次要顯示自定義欄位時都需要新增短程式碼。沒有簡單的方法可以自動執行此任務。
簡碼是這樣的：
[acf field="FIELD_NAME"]
例如，如果您在WordPress編輯器中輸入：
使用簡碼顯示ACF資料
然後，您網站的前端看起來與之前的主題模板方法完全相同：
短程式碼看起來與主題模板檔案相同
如何使用Elementor Pro顯示高階自定義欄位
Elementor是最受歡迎的WordPress頁面構建器之一。它允許您使用視覺化的拖放式編輯來構建您的設計。
使用付費外掛Elementor Pro，您還可以構建主題的模板檔案，包括將來自高階自定義欄位的動態自定義欄位資料插入到您的設計中的選項。
如果您希望靈活地在模板中自動包含自定義欄位資料，但不方便直接對主題的模板檔案進行程式碼編輯，這是一個很好的選擇。
要開始，您將轉到Templates > Theme Builder併為您的文章單建立一個新的Elementor模板：
建立一個新的Elementor Single模板
您可以為您的Post Title和Post Content新增常規的Elementor小部件。然後，要顯示自定義欄位資料，您需要新增常規文字編輯器小部件。這裡唯一的區別是，您無需編輯文字，而是選擇“Dynamic”選項：
Elementor Pro“Dynamic”選項
在此之後，您可以從下拉選單中選擇ACF Field：
選擇“ACF Field”
從那裡，您可以選擇使用高階自定義欄位新增的特定欄位：
選擇要顯示的特定欄位
您還可以使用“Advanced”選項卡新增或附加資訊，這樣您就可以新增標籤和單位：
預先或附加資訊
容易，對吧？現在只需重複其他自定義欄位！
小結
使用高階自定義欄位，您可以通過易於使用的解決方案，用更多資料和資訊豐富您的頁面和部落格文章。更多：您可以開始為您網站上的任何內容收集附加資訊，然後在前端顯示給您的訪問者。
為此，您有3個選項：
- 您主題的模板檔案
- 使用簡碼
- 使用Elementor Pro
您在這篇文章中獲得的知識將讓您釋放WordPress的巨大潛力來構建100%自定義網站，這些網站遠遠超出了WordPress的部落格根源。
評論留言