如何創建自定義 WordPress 元框
已發表: 2015-06-09什麼是自定義 WordPress 元框？
自定義元框允許將附加信息添加到帖子、頁面和自定義帖子類型中，除了標準元框可以自動在 WordPress 中“開箱即用”使用，它們包含在 WordPress 核心中。
無論您是否意識到，您已經使用元框有一段時間了。 儀表板小部件、編輯器、自定義字段、特色圖像、類別和標籤等都是元框的示例。
如何創建自定義 WordPress 元框
當您需要創建一個額外的元框時會發生什麼，也許是為您的項目更自定義的東西？ 現有的插件可以幫助創建自定義元框，這可能是很好的選擇。 即使您決定這是您要採取的路線，了解自定義元框的基本概念仍然很重要。
使用 CSS Sprites 使您的徽標具有響應性
還記得 CSS 精靈嗎？ 它們是一組不同的圖形組合到一個文件中，我們將使用它們來創建響應式徽標。 這是一種用於優化瀏覽器性能的技術...
當我們創建這個非常簡單的元框時，我們將在非常高的層次上討論概念。 完成後，我們將有一個自定義元框，允許我們輸入產品標題。
儘管我們從簡單開始，但請記住，這個想法可以擴展到更複雜的需求。 自定義元框中可以包含許多選項和附加功能。 複選框、文件上傳等都是自定義元框的可能功能。 本教程假設您熟悉 CSS，這是設置字段樣式所必需的。 我們不會詳細討論樣式，但這是在您的元框啟動並運行後可以輕鬆完成的事情。
開發自定義元框
元框的自定義代碼可以包含在 functions.php 或插件中。 此示例將以插件的形式包含所需的代碼。 這可以逐步複製以製作一個可以使用的完整文件。
食典是您的指南
Codex 將是你最好的朋友，如果它還沒有的話。 不同的論點有不同的選擇，法典將對此進行詳細解釋。 值得一提的是，Codex 是您應該熟悉的東西。
先在本地測試
這是本教程的唯一免責聲明。 請先在本地開發環境中嘗試。 儘管我們都喜歡生活中的小冒險，但沒有人喜歡死亡的白屏，尤其是在現場直播中。 我們將逐步完成本教程，並且在我們閱讀它時會出現依賴關係。 因此，中途進行保存很有可能會導致錯誤。
第一步：創建標題並將其放入插件中
創建插件可能聽起來很複雜，但並非所有插件都必須有數百行。 插件可以非常簡單，這是一個很好的例子。 如果你去wp-content 文件夾，你會看到一個plugins 文件夾。 創建一個名為custom-post-meta-box的新文件夾，其中包含一個custom-post-meta-box.php文件。 這是您將使用的文件。
創建插件時，請確保此信息出現在您的任何自定義代碼之前：
<?php /* Plugin Name: Custom Meta Box Plugin URI: www.yourwebsite.com Description: Creates a meta box in WordPress Version: 1.0.0 Author: Your Name Author URI: www.yourwebsite.com License: GPL2 */
激活插件
即使我們還沒有在其中添加任何代碼，我們也可以通過轉到插件並查找自定義元框並選擇激活來激活插件。 請記住，一切都不會改變。
可選的 CSS
這是可選的，但如果您打算添加一些自定義 css，請將其複製到您的插件文件中。 確保在插件的css文件夾中找到.css文件。
function cmb_add_admin_styles() {
wp_enqueue_style('cmb-admin', plugins_url( 'custom-post-meta-box/css/admin.css' ) );
}
add_action( 'admin_enqueue_scripts', 'cmb_add_admin_styles' );
第二步：添加元框
add_meta_box函數用於創建自定義元框。 此函數僅負責註冊和顯示自定義元框。
function cmb_add_meta_box() {
add_meta_box(
'custom_post_metabox',
'Our Products',
'cmb_display_meta_box',
'post',
'normal',
'high'
);
}
add_action( 'add_meta_boxes', 'cmb_add_meta_box' );
看一下儀表板，標題“我們的產品”出現了，但沒有文本字段供我們輸入文本。
第三步：在後台添加元框字段
我們需要確保信息有標籤和字段。 通過使用 html，這是可能的。
function cmb_display_meta_box( $post ) {
wp_nonce_field( plugin_basename(__FILE__), 'cmb_nonce_field' );
$html = '<label id="product-title" for="product-title">';
$html .= 'Product Title';
$html .= '</label>';
$html .= '<input type="text" id="product-title" name="product-title" value="' . get_post_meta( $post->ID, 'product-title', true ) . '" placeholder="What is the Product Title?" />';
echo $html;
}
// this echoes a single stream of html
看看東西是如何包裝在<label>中的？ 我們可以看到描述性文本“產品標題”，它可以幫助用戶了解該字段是什麼以及應該輸入什麼類型的信息。 另請注意，有佔位符文本，它也添加了有用的信息。
您的輸入可能沒有那麼廣泛。 完成了一些自定義 css，以便可以顯示所有佔位符文本； 標籤的寬度為 100%。
第四步：保存數據以及使用 nonce 的重要性
您可能在第三步中輸入了文本並意識到它實際上並沒有被保存或顯示在頁面上。 這一步真的是所有魔法發生的地方。
function cmb_save_meta_box_data( $post_id ) {
if ( cmb_user_can_save( $post_id, 'cmb_nonce_field' ) ) {
if ( isset( $_POST['product-title'] ) && 0 < count( strlen( trim( $_POST['product-title'] ) ) ) ) {
$product_title = stripslashes( strip_tags( $_POST['product-title'] ) );
update_post_meta( $post_id, 'product-title', $product_title );
}
}
}
add_action( 'save_post', 'cmb_save_meta_box_data' );
function cmb_display_product( $content ) {
if ( is_single () ){
$html = 'The Product Title is: ' . get_post_meta( get_the_ID(), 'product-title', true );
$content .= $html;
}
return $content;
}
add_action('the_content', 'cmb_display_product');
function cmb_user_can_save( $post_id, $nonce ) {
$is_autosave = wp_is_post_autosave( $post_id );
$is_revision = wp_is_post_revision( $post_id );
$is_valid_nonce = ( isset( $_POST[ $nonce ] ) && wp_verify_nonce( $_POST [ $nonce ], plugin_basename( __FILE__ ) ) );
return ! ( $is_autosave || $is_revision ) && $is_valid_nonce;
}
這裡發生了一些事情。 基本上， cmb_save_meta_box_data函數是我們進行所有保存所需要的。 我們將專注於具有 nonce 值的安全性。 這是一項安全措施，可確保要保存的數據來自正確的來源。 此外，我們要確保帖子不是自動保存或修訂。 然後隨機數將被驗證並且用戶可以保存。
現在我們可以安全地保存，這就是元信息在頁面上的顯示方式。 正如你所看到的，它可以很容易地設置樣式，但它確實有效並且數據被保存了。
進一步閱讀和家庭作業
如您所見，只需幾個步驟，您就可以擁有一個自定義元框。 像大多數開發項目一樣，有多種方法可以實現相同的目標，因此您可能會找到其他方法來完成相同的任務。
我們對自定義元框進行了非常高級的研究，因此您可能想更深入地了解這些概念。 如果您發現自己對自定義元框有更大的需求，這裡有一些很好的資源可供進一步發現：
- 關於隨機數的更多信息
- 元盒插件
- add_meta_box 函數的選項