WordPress 元框 – 快速指南

WordPress 元框是顯示在您的編輯屏幕中的可拖動框，用於處理分類術語等附加數據。 在這篇文章中，我們將看一下 WordPress 元框，看看我們如何可以自定義自定義框，了解如何保存我們所做的更改以及如何在我們網站的前端顯示它們的內容。

讓我們開始吧！

自定義字段、元框和元數據

關於這三個術語之間的區別有很多混淆。 讓我們來看看這三個，以更好地了解它們是什麼以及它們是如何工作的。

元數據

帖子的元數據是關於存儲在數據庫 postmeta 表中的帖子的額外信息。

每個鍵/值對都被視為一個“發布字段”。 這個表可以有多少元條目沒有限制。

自定義字段

有些字段是 WordPress 預定義的，例如特徵圖像，它們在技術上是自定義字段。 其他可以通過插件或自定義代碼添加並由管理員用戶定義。 您可以通過閱讀我們的文章“WordPress 自定義字段入門”了解有關自定義字段的更多信息。

元盒

當您打開 WordPress 帖子進行編輯時，您會看到頁面被分成不同的部分（其中許多位於右側的側邊欄中）。

所有這些部分在技術上都是“元框”。 因此，主帖子編輯器、用於選擇類別、發布帖子、添加標籤、添加特色圖像的容器都是包含與帖子元數據交互的 HTML 元素的元框。 根據網站處理元數據的方式，這些框將出現在屏幕上的不同位置。

作為進一步的例子，讓我們看一下特色圖像元框。 這通常位於帖子管理屏幕的右側邊欄中。 在那裡，您可以輕鬆更改圖像。 執行此操作時，實際上是在更新該帖子元數據的_thumbnail_id 。

自定義字段元框，例如“源”（我們在自定義字段教程中添加），通常可以在主帖子編輯器下方找到。

為我們的自定義帖子類型創建一個元框

現在我們對元框到底是什麼有了更清晰的了解，我們可以繼續為我們的網站構建我們自己的自定義元框。 本教程繼我們關於自定義帖子類型的教程之後......如果您想逐步進行操作，那麼您需要查看該文章並創建一個名為“recipes”的自定義帖子類型，然後設置幾個“recipes” ' 選擇精選圖片的測試帖子。

在本教程中，我們將通過添加一個新的元框來擴展我們的自定義帖子類型，該元框將用於通過勾選複選框來定義食譜是否為素食主義者。

第 1 步 - 註冊元框

要在我們的自定義帖子類型中添加元框，我們使用 WordPress 提供的add_meta_box函數。 這是我們將使用的帶有參數的函數的結構：

 add_meta_box( $id, $title, $callback, $screen, $context )

對於唯一 id，我們將使用is_vegan ，對於元框的標題，字符串Is Vegan 。

顯示盒子內容的回調函數是display_vegan_meta_box 。 $screen屬性是指將顯示元框的管理屏幕。 在我們的例子中，這是菜譜的帖子編輯區域，所以它將是唯一的帖子類型名稱，如前所述， recipes 。 $context參數因管理屏幕而異。

我們將在此處使用的後期編輯屏幕上下文包括正常、側面和高級作為可用上下文值。 我們將使用 side 值在帖子編輯頁面的側邊欄中顯示元框。

因此，總而言之，使用上面定義的參數，我們應該在my-custom-post-type.php中添加的代碼應該如下所示：

 function my_metabox() { add_meta_box( 'is_vegan', 'Is Vegan', 'display_vegan_meta_box', 'recipes', 'side' ); } add_action( 'admin_init', 'my_metabox' );

正如您將看到的，我們使用了admin_init鉤子，當用戶訪問管理區域時，該鉤子在任何其他鉤子之前觸發。

現在，如果您訪問食譜帖子的編輯頁面，您應該會在側邊欄中看到該框。 當然，內容目前是空的。

下一步是用所需的內容填充框。

第 2 步 – 顯示 Meta Box 基本內容

我們將保持這個盒子的內容簡單。 我們只需要一個描述和一個複選框。 如前所述，內容在display_vegan_meta_box函數中返回。

請繼續並在my_metabox函數下添加以下代碼：

 function display_vegan_meta_box( $recipe ) { ?> <span class="title">Vegan recipe?</span> <span class="content"> <label for="vegan_checkbox"> <input type="checkbox" name="vegan_checkbox" value="yes" /> </label> </span> <?php }

我們在這個函數中所做的是輸出一個 HTML 複選框，現在它沒有被選中。 在我們介紹了保存功能之後，我們將回到這部分代碼進行更多更改，以便在帖子編輯頁面加載時，複選框將檢索保存的複選框狀態。

第 3 步 - 將 Meta Box 值保存到數據庫

為了保存元框的輸入字段值，我們使用 WordPress 提供的save_post操作掛鉤，如下所示：

 function update_vegan_box( $post_id ) { if( !current_user_can( 'edit_post' ) ) return; if ( 'recipes' == get_post_type() ) { if ( isset( $_POST['vegan_checkbox'] ) && $_POST['vegan_checkbox'] != '' ) { update_post_meta( $post_id, 'is_vegan', $_POST['vegan_checkbox'] ); }else { update_post_meta( $post_id, 'is_vegan', "no" ); } } } add_action( 'save_post', 'update_vegan_box' );

在帶有$post_id參數的update_vegan_bo x 函數中，我們包含了一些條件。 我們首先要檢查用戶是否有權編輯帖子，並確保我們正在編輯recipes帖子類型。

因此，如果帖子屬於recipes類型，我們將檢查復選框的值。 請記住，默認情況下，選中復選框時，存儲的數據庫值為“是”，如果不是，則該值為 NULL。 我們對此進行了一些調整，因此當我們在未選中素食元框的情況下保存帖子時會保存“否”值。

這裡我們使用了 WordPress 的 update_post_meta 函數update_post_meta( $post_id, $meta_key, $meta_value, $prev_value = '' )

在其參數中，我們定義了帖子 ID、元鍵、元值。 不過，該函數可以接受另一個參數， $prev_value
如果我們想在更新之前檢查先前的值，並且只有當它相等時，才繼續並更新。

第 4 步 – 優化 Meta Box 內容代碼

現在讓我們回到之前輸出元框內容的函數，並添加更多從數據庫中檢索相關數據的代碼行。

 function display_vegan_meta_box( $recipe ) { $is_value = esc_html( get_post_meta( $recipe->ID, 'is_vegan', true ) ); $checked; if ( $is_value == "yes" ) { $checked = "checked"; } else if ( $is_value == "no" ) { $checked = ""; } else { $checked="";} ?> <span class="title">Vegan recipe?</span> <span class="content"><label for="vegan_checkbox"> <input type="checkbox" name="vegan_checkbox" value="yes" <?php echo $checked; ?> /> </label></span> <?php }

因此，首先，我們檢索is_vegan元值，然後如果合適， checked的值將傳遞給$checked變量，並將在 HTML 輸出中回顯。

就是這樣。 我們現在有一個工作元框，可用於定義我們自定義帖子中的食譜是否為素食主義者。

結論

元框在帖子中提供了更高級別的控制和靈活性，並且可以通過多種方式加以利用。 它們特別好的地方在於它們與帖子的其餘內容分開，同時位於同一個管理屏幕上，這使得管理它們比它們位於 WordPress 管理員中的其他地方更容易。

與大多數 WordPress 編碼一樣，熟悉使用元框可能需要一段時間。 希望以上信息足以讓您入門。 快樂編碼！