初學者的高級自定義欄位教程:創建和顯示欄位

作為「 WordPress開發人員的內容編輯器」銷售的高級自定義欄位(ACF)插件對於一些不熟悉該插件功能的人來說似乎是令人生畏的。但是,不要讓這些流行語成為您的話題,因為每個人都應該使用「高級自定義欄位」,因為它是網路開發中最大的節約工具之一。這就是為什麼我們將「高級自定義欄位」教程組合在一起向您展示所有內容的原因。

是的,「高級自定義欄位」插件使初學者感到困惑。但是學習曲線並不壞,定期使用此插件的優勢將使您成為一個信徒。

想要開始使用#WordPress上的「高級自定義欄位」嗎? ⚙️初學者的#教程

點擊鳴叫

重要提示:儘管我們會介紹一些非代碼方法來在您的網站上顯示您的自定義欄位,但是如果這些無代碼的解決方案不夠靈活,您可能需要開發人員的幫助。

高級自定義欄位插件有什麼作用?

高級自定義欄位使您可以在WordPress編輯器中收集有關您的內容的其他信息。

WordPress是一個靈活的開源平台,因此您應該能夠創建所需的任何網站,並具有不同的功能 電子商務之類的東西寫博客,事件等。

WordPress可視編輯器具有出色的工具,從豐富的內容編輯到媒體格式。

但是,有時開發人員可以針對特定用例使其更加直觀。

問題在於自定義WordPress內容編輯器通常需要仔細的格式設置和潛在的代碼編輯。

高級自定義欄位允許您更改內容編輯器並標準化收集和顯示某些信息的方式,從而簡化了此過程。

使更新樣式內容更加容易

網站開發完成並準備啟動後,您的許多管理過程都涉及更改小的細節。

例如,公司的常見調整是更改新銷售和公告的首頁標題或背景。在該標題區域中更改文本也是很常見的。

標頭英雄形象

有時,這就是企業主定期訪問網站的全部內容!

完全可以,但是使用WordPress可讓您意識到可視化編輯器的敏感性。一個錯誤的退格鍵,您可能會刪除文本格式。上傳一張錯誤的圖片,您可能會使整個首頁看起來像垃圾。

標準化重複內容的顯示

重複的操作也保證使用ACF。

一個例子是電影評論博客。

假設您的每條評論都要求您輸入製作公司,發行年份和電影評分。

或者,也許您有一個簡單的電影分級以及分級等級的說明。

電影評論

可以在WordPress編輯器中完成此操作,但是最好保持各個帖子的格式相同。此外,使用相同的欄位進行調整可將過程減少到幾次單擊,而不必輸入所有內容。

高級自定義欄位教程

首先要做的是下載Advanced Custom Fields插件。看看我們的 安裝和激活WordPress插件的指南 如果您需要任何幫助。

高級自定義欄位高級自定義欄位

作者: 艾略特·康登

當前版本:5.8.7

上次更新時間:2019年11月13日

advanced-custom-fields.5.8.7.zip

98%評級 1,000,000+安裝 4.7.0要求

我們可以製作包含數千個示例的Advanced Custom Fields教程。用途廣泛。

但是,我們將以運行電影評論網站為例。

對於每個新評論,我們要顯示以下數據:

  • 發行年份
  • 工作室
  • 電影等級

繼續閱讀以了解其工作原理。

步驟1:建立新的欄位群組

欄位組是自定義欄位的集合。

我計劃在電影評論網站上擁有的所有欄位都屬於同一類別,因此將它們放在同一欄位組中是有意義的。

要創建新的欄位組,請轉到WordPress中的「自定義欄位」。

自定義欄位」 class =「 wp-image-28113」 width =「 881」 height =「 717

在新屏幕上,單擊添加新按鈕。

添加新的「 class =」 wp-image-28114「 width =」 1024「 height =」 361

以下屏幕可能看起來令人生畏,但通常只需要更改一些元素即可。您還可以對其進行測試,以了解它們如何在您的網站上運行。

添加欄位組「 class =」 wp-image-28115「 width =」 1024「 height =」 830

暫時將您的欄位組命名為「電影評論數據」。

步驟2:將欄位新增至您的群組

現在該添加單個自定義欄位了。

單擊藍色的添加欄位按鈕。

添加欄位-高級自定義欄位教程「 class =」 wp-image-28116「 width =」 1024「 height =」 239

這會打開另一種有點混亂的長格式,但是一兩次使用後很容易掌握。

首先在欄位標籤中輸入。在本教程中,我們使用發行年份。

第一欄位「 class =」 wp-image-28117「 width =」 1024「 height =」 776

然後,將自動填充欄位名稱。用於將結果放入模板和編碼中。那將由您的開發人員使用。

也選擇您的欄位類型。對於這一類,我們正在選擇「文本」欄位類型,但是您有數十種選項,從圖像到複選框和手風琴。

所有欄位類型都有不同的選項,但是以下是您可能需要為文本欄位類型填寫的一些項目:

  • 現場說明–您可能要提醒您的作家只輸入四位數。

  • 必填–您可以在發布前將此欄位作為必填項。

  • 默認值–如果您希望一個值始終顯示,即使它為空也很有用。

  • 佔位符文本–當作者在編輯器中時,它將顯示在輸入欄位中。

  • 字元數限制–您可能不希望作者超過一定的字元數。

那不是那裡的所有欄位,但是這些都不是必需的。因此,最好自己進行測試。此外,您可能會看到其他選項,具體取決於欄位類型。

步驟3:將更多欄位添加到組中

保存第一個欄位後,該添加工作室和我們的電影評分欄位了。

幸運的是,這是相同的過程!

只需返回到「欄位組」,單擊「添加欄位」,然後為它們命名不同的名稱。

欄位選項」 class =「 wp-image-28118」 width =「 1024」 height =「 767

製作公司領域沒有什麼特別的,但是我們可以利用工具來進行電影分級。

欄位標籤「 class =」 wp-image-28119「 width =」 1024「 height =」 808

此欄位類型是一個數字。

我們還可以在「現場指導」中指定「將該電影的質量從1評級為10。

然後,我們將最小值標記為1,將最大值標記為10,將步長標記為1。

值「 class =」 wp-image-28120「 width =」 1024「 height =」 425

步長表示可用的增量。

步驟4:設定欄位位置

現在是時候配置欄位在網站上的顯示位置和方式。

轉到「位置」面板。

位置-高級自定義欄位教程「 class =」 wp-image-28121「 width =」 1024「 height =」 200

這要求有關欄位應出現在何處的規則。對於此示例,有意義的是在「帖子類型等於帖子」時顯示欄位組,因為這意味著每個帖子。

如果您使用的是自定義帖子類型,則還可以將自定義欄位組與自定義帖子類型相關聯。

在「設置」下,您可以設計欄位在WordPress編輯器中的顯示方式。

設置-高級自定義欄位教程「 class =」 wp-image-28122「 width =」 1024「 height =」 846

本質上,此部分使您可以根據自己的需要自定義設計界面。

例如:

  • 訂單號–使您可以組織組中的欄位列表。

  • 位置–具有用於顯示編輯器上方或下方的欄位的選項。

  • 樣式–考慮將欄位放在metabox中。

  • 在屏幕上隱藏-刪除不需要的面板。

後端完成「 class =」 wp-image-28123「 width =」 1024「 height =」 721

步驟5:在網站的前端顯示自定義欄位信息

現在,在WordPress編輯器中添加了一些自定義欄位數據後,您需要一種在網站前端顯示該信息的方法。

如前所述,您可能必須僱用開發人員才能在前端獲得自定義欄位的結果。但是,首先要考慮一些適合初學者的解決方案!

  • 使用簡碼在編輯器中顯示ACF欄位。
  • 找到 頁面構建器插件 支持顯示ACF欄位。
  • 將欄位的簡碼放入可重複使用的塊組中。

第一種選擇涉及 使用ACF簡碼。該插件沒有簡碼構建器,因此您必須使用以下格式:

[acf field=”field_name”]

這僅適用於基於文本的欄位,並且您必須將field_name替換為您的欄位名稱。

例如,您可以在欄位列表中找到欄位名稱。

name-of-the-field.jpg

然後,只需一點時間即可將欄位名稱添加到編輯器中的那些短代碼中。

shortcodes.jpg

確保您的職位數據已填寫。

make-sure-fields-are-filled-in-with-information.jpg

單擊發布按鈕以在前端查看結果!

frontend.jpg

您還可以找到一個頁面構建器,使您可以在編輯器中顯示ACF欄位。例如, Elementor Pro我們的評論), 迪維海狸生成器+海狸主題,還有其他一些選項可以實現此目的。

另一個出色的解決方案是創建 一個街區 在編輯器中,將短代碼放在此處,然後將其保存為可重用的塊,以備將來使用。

reusable-blocks.jpg

第6步:如果其他所有方法均失敗,則將其發送給您的開發者以在您的網站上顯示

高級自定義欄位教程的前端」 class =「 wp-image-28124」 width =「 1024」 height =「 778

如果上面的無代碼方法對您不利,那麼您的下一個選擇就是將其發送給WordPress開發人員,該過程不會花很長時間,而且價格不菲。

本質上,開發人員要做的就是在您的模板文件中添加一些代碼,或者也許在單個post文件中添加一些代碼。

因此,我們 建議找一個有信譽的開發商 幫助解決這個問題。

高級自定義欄位教程:讓您的WordPress編輯器變得更加用戶友好,玩得開心!

通過高級自定義欄位,您可以以新穎有趣的方式使用WordPress。如果您想進一步擴展網站,可以 了解如何創建自定義帖子類型 然後將自定義欄位添加到這些新帖子類型。

想要開始使用#WordPress上的「高級自定義欄位」嗎? ⚙️初學者的#教程

點擊鳴叫

如果您對我們的高級自定義欄位教程有任何疑問,請在下面的評論中告訴我們!

Total
0
Shares
相關文章