WordPress文章、頁面自定義欄位建立與管理

WordPress文章、頁面自定義欄位建立與管理

作為最受歡迎的內容管理系統 (CMS)之一,WordPress以其各種功能和自定義選項而廣為人知。

一種這樣的選擇是擴充套件後設資料,它指的是頁面或文章的關鍵資訊,包括作者姓名、標題和描述。

使用者可以通過在WordPress中啟用自定義欄位來包含其他後設資料,從而擴充套件特定文章或頁面的功能。例如,收集作者的電子郵件,在贊助文章上放置免責宣告,或在產品上附加額外的細節。

與大多數 WordPress 功能類似,您可以手動或使用專用外掛將自定義欄位新增到您的文章和頁面。

在本文中,我們將解釋什麼是自定義欄位以及如何使用這兩種方法將它們新增到您的WordPress內容中。

什麼是WordPress自定義欄位

您建立的每個WordPress頁面和文章都帶有自己的後設資料。WordPress中的預設後設資料包括作者姓名、日期和時間。例如,在下面的文章中,您可以看到文章標題上方顯示的後設資料。

WordPress自定義欄位

但是,在某些情況下,您需要新增WordPress不支援開箱即用的後設資料——這是自定義欄位派上用場的地方。WordPress自定義欄位是一種向文章或頁面輸入附加資訊的功能。

自定義欄位為您提供了一種輸入該資料並擴充套件內容資訊的方法:

  • 靈活且可定製。自定義欄位由程式碼片段組成,允許您自定義和控制它們在網站前端的展示位置。
  • 更容易輸入和更新。如果您想更新文章上顯示的資訊,只需修改自定義欄位,而不是單獨編輯每個文章。
  • 一致的。自定義欄位可確保您的所有文章以相同的格式顯示相同的資訊。

最後,重要的是要注意自定義欄位和自定義文章型別之間的區別。

自定義文章型別是一種特殊格式的內容,例如評論文章或產品頁面。在許多情況下,人們會在他們的自定義文章中新增自定義欄位,但您也可以單獨使用它們。

如何將WordPress自定義欄位新增到您的文章和頁面

在以下部分中,我們將幫助您使用兩種不同的方法建立自己的自定義欄位。

第一種方法涉及安裝專用外掛以簡化該過程。第二個要求您手動編輯WordPress主題檔案。

使用Advanced Custom Fields外掛

有很多外掛可以幫助您快速新增WordPress自定義欄位。最受歡迎的一種是Advanced Custom Fields(ACF)

Advanced Custom Fields(ACF)

它帶有易於使用的使用者介面,只需單擊幾下即可新增30種自定義欄位型別。要開始使用,您需要安裝外掛並啟用它。

轉到您的儀表盤並進入外掛->安裝外掛選項卡。到達那裡後,使用搜尋欄查詢Advanced Custom Fields

搜尋Advanced Custom Fields外掛

繼續並單擊立即安裝按鈕。等到文字變為啟用,然後再次單擊它。

高階自定義欄位啟動並執行後,您將在儀表盤中看到一個新的Custom Fields選項卡。單擊它將顯示自定義欄位組列表,該列表應為空。

自定義欄位管理

要設定欄位組,只需單擊螢幕頂部的Add New按鈕。

單擊“Add Field”按鈕繼續。為您的新欄位選擇一個標籤,該標籤也將用作其名稱。您還需要選擇要設定的欄位型別——一些選項包括文字、覈取方塊和電子郵件。

新增自定義欄位

對於這個例子,我們將建立一個電子郵件欄位來收集每個作者的電子郵件地址。

自定義欄位示例

要編寫一組說明,只需填寫提供的欄位。例如,您可以新增“請在釋出文章之前填寫您的電子郵件地址”。

儘管此步驟不是必需的,但它可以幫助網站上的其他管理員瞭解如何處理自定義欄位。

自定義欄位說明文字

繼續前進,您還需要指出這是否是必填欄位。這樣,不填寫就無法儲存文章或頁面。

是否必要欄位

如果需要,您可以調整其他一些高階設定。填寫基本屬性後,向下滾動以找到Close Field按鈕。

自定義欄位高階設定

單擊它會自動將您的自定義欄位組新增到列表中。要新增更多自定義欄位,只需選擇“Add Field”按鈕並重復該過程。

新增多個自定義欄位

建立自定義欄位組後,您需要通過自定義Location設定來配置這些自定義欄位組的顯示位置。

如果您可以使用它來配置顯示選項,則有一個標記為Show this field group if選項。

在此示例中,我們將自定義欄位配置為顯示在常規文章中。如果需要,您可以使用Add rule group按鈕新增多個位置以顯示您的自定義欄位。

設定自定義欄位規則

最後,點選釋出按鈕儲存新的自定義欄位。

當您的領域準備就緒時,開啟WordPress文章編輯器。自定義欄位將顯示在文字編輯器的正下方。

顯示文章自定義欄位

請記住,您不能使用高階自定義欄位來為網站訪問者顯示自定義欄位 – 自定義欄位只會顯示在您的儀表盤中。

如果要在網站前端顯示自定義欄位,則需要編輯主題檔案。我們將在本文後面引導您完成此過程。

其他自定義欄位外掛

如果您正在尋找比高階自定義欄位提供更多選項的外掛,我們列出了三種替代方案,以幫助您找到更適合您網站需求的工具。

1.Meta Box

Meta Box外掛

使用Meta Box,在WordPress文章、頁面和表單中啟用自定義欄位。它支援多達40個自定義欄位,從文字列表和覈取方塊到影象和使用者欄位。

它提供免費擴充套件,允許您在評論和Yoast SEO中新增自定義欄位以提高您的內容的SEO分數。它還與Elementor和Beaver Builder等頁面構建器整合。

此外,Meta Box提供免費和高階版本。

憑藉其高階版本,起價為99美元/年,您將可以訪問其元框構建器。此功能允許您使用易於使用的拖放介面新增WordPress自定義欄位。

2.Custom Fields Suite

Custom Fields Suite

Custom Fields Suite提供了一種輕量級且直接的解決方案,可以在WordPress網站中啟用自定義欄位。

這個免費外掛支援14種欄位型別,包括迴圈、製表符、所見即所得、日期和true/false。您可以將自定義欄位新增到您的WordPress文章、頁面和自定義文章型別。

使用外掛建立自定義欄位組並將它們顯示在文章編輯器上。使用放置規則框,您還可以決定欄位組的顯示位置。例如,可以將它放在文字編輯器的上方或下方。

自定義欄位套件的唯一缺點是它沒有客戶支援團隊。但是,它提供了文件,您可以訪問以獲取有關外掛的更多資訊。

3.Pods

Pods

Pods在一個簡單幹淨的介面中管理所有自定義內容。這使得將自定義欄位新增到您的文章、頁面或任何自定義內容型別變得更加容易。

使用外掛的簡碼、小工具或模板在站點的任何位置顯示欄位。Pods還帶有預設的自定義欄位型別,但可以根據需要建立新型別。

Pods與Polylang、Beaver Builder和Gravity Forms等其他WordPress外掛很好地整合在一起。此外,它配備了廣泛的文件實時聊天支援,以指導使用者並解決任何問題。

手動新增WordPress自定義文章欄位並編輯您的主題以顯示它們

預設情況下,自定義欄位選項在 WordPress 中是隱藏的。要啟用此功能,請訪問您的頁面或文章編輯器

找到螢幕右上角的“螢幕選項”按鈕,然後選中自定義欄位”框。

顯示自定義欄位區域

這將使內容編輯器下方出現一個新對話方塊。

文章或者頁面編輯自定義欄位

您可以使用鍵/值對輸入自定義欄位資料。key是指您的自定義欄位的名稱,而value是您要顯示的資訊。

例如,我們想在贊助文章中新增免責宣告。因此,我們將Sponsored設定為名稱並在值框中填寫YesNo以顯示文章是否被贊助。

贊助文章自定義欄位

點選框底部的Add Custom Field按鈕以儲存它。

然而,這個過程並沒有就此結束。WordPress僅在後端保留自定義欄位值。要在網站前端顯示資訊,您需要編輯主題檔案。

有幾個選項可以編輯您的主題檔案- 通過您的管理儀表盤、連線到FTP或使用寶塔的檔案管理器。

無論您選擇哪種方法,我們都建議您使用子主題自由地進行實驗,而不會在過程中損壞主題。

在本教程中,我們將向您展示如何直接從WordPress儀表盤訪問檔案。繼續外觀-> 主題檔案編輯器,然後找到single.php檔案。

編輯文章對應程式碼

以下是顯示自定義欄位的常用程式碼示例:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<?php echo get_post_meta($post->ID, 'key', true); ?>
<?php echo get_post_meta($post->ID, 'key', true); ?>
<?php echo get_post_meta($post->ID, 'key', true); ?>

請注意,您將使用的確切程式碼可能會因您要顯示的操作或資訊而異。但是,請務必使用您的自定義欄位名稱更改‘key’佔位符。

在此示例中,我們希望為贊助文章顯示免責宣告訊息。因此,程式碼應如下所示:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<?php
$meta = get_post_meta( get_the_ID(), 'Sponsored Post' );
if( $meta[0] == 'Yes' ) {
?>
<center>This post contains affiliate links. We might earn a commission if you make a purchase using these links.</center>>
<?php } ?>
<?php $meta = get_post_meta( get_the_ID(), 'Sponsored Post' ); if( $meta[0] == 'Yes' ) { ?> <center>This post contains affiliate links. We might earn a commission if you make a purchase using these links.</center>> <?php } ?>
<?php
$meta = get_post_meta( get_the_ID(), 'Sponsored Post' );
if( $meta[0] == 'Yes' ) {
?>
<center>This post contains affiliate links. We might earn a commission if you make a purchase using these links.</center>>
<?php } ?>

您要做的是在WordPress迴圈中新增您的程式碼,該函式告訴WordPress當有人檢視您網站上的內容時需要提取和顯示哪些資料。

迴圈程式碼可能會有所不同,具體取決於您使用的主題。但是,這是預設WordPress迴圈的樣子:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php endwhile; else: ?>
<?php endif; ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <?php endwhile; else: ?> <?php endif; ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php endwhile; else: ?>
<?php endif; ?>

新增自定義欄位時,您可以自由控制其在網站上的位置。例如,要將其放在文章的頂部,請在以下行之前新增程式碼:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
while ( have_posts() ) : the_post();
while ( have_posts() ) : the_post();
while ( have_posts() ) : the_post();

成功將程式碼新增到主題編輯器後,單擊“更新檔案”按鈕以儲存更改。

我們應用的程式碼告訴WordPress尋找帶有Sponsored Post自定義欄位的文章並檢查值。

如果該值設定為“yes” ,WordPress 將顯示免責宣告訊息,因為該文章被標記為贊助。否則,它不會顯示任何附加資訊或後設資料。

文章自定義欄位顯示示例

請記住,上面的示例是WordPress自定義欄位的基本功能之一。要應用更復雜的操作,您需要進行一些額外的編碼。

以下是可用於自定義網站上的自定義欄位功能的幾個模板標籤:

小結

WordPress配備了自定義欄位等高階功能,使使用者能夠向文章或頁面新增額外資訊,從免責宣告到影象和覈取方塊。

WordPress內建的自定義欄位功能預設是隱藏的,因此我們提供了有關如何啟用它的步驟。

除此之外,我們還介紹了在WordPress中建立和使用自定義欄位的步驟:

  1. 通過安裝Advanced Custom Fields外掛或網站上建議的其他三個外掛中的任何一個。
  2. 手動編輯主題的single.php檔案。

原生WordPress自定義欄位功能可能不是最使用者友好的技術。出於這個原因,我們提供了使用自定義欄位外掛的選項來簡化流程。如果您對自定義欄位十分感興趣,推薦進一步閱讀“WordPress高階自定義欄位教程”。

評論留言