如何使用 CMB2 創建自定義元框

幾年前，我一直在尋找一種方法來查詢帖子並在 Google 地圖上顯示帖子的位置。 在我的研究中，我偶然發現了一篇關於如何使用 CMB2 和 Google 地圖構建商店定位器的博客文章。 從那時起，CMB2 就成為我最喜歡的插件之一，並在我的大部分項目中使用。

一、什麼是CMB2？

好吧，CMB 是 Custom Meta Boxes 的首字母縮寫詞，根據插件頁面上的描述，“CMB2 是 WordPress 的元框、自定義字段和表單庫，會讓你大吃一驚。” 它由 WebDevStudios 的 Justin Sternberg 開發，並在插件存儲庫中存在兩年多一點。 然而，去年 2 月，WordPress 插件存儲庫中的好人認識到，他們犯了錯誤並批准了 CMB2 作為插件，而他們不應該這樣做。

看，插件通常能夠開箱即用地做一些事情； 它們具有一些固有的功能。 CMB2實際上是一個框架。 正如 Sternberg 曾經解釋的那樣，“這是一個開發人員的框架，可以輕鬆地為您的主題和插件構建表單和字段。” 事實上，當你安裝 CMB2 時，什麼都不會發生。 您不會獲得管理頁面，也沒有管理用戶界面。 要使用 CMB2，您必須能夠編寫代碼並添加到您的functions.php文件中。 出於這個原因，我稱它為“非插件”插件。

好消息是插件審批團隊已同意將其保留在存儲庫中，因此您可以繼續從那裡下載和更新它。 您可以在賈斯汀的網站上閱讀有關歷史的所有信息。

如何設置 CMB2

為了開始，您需要從插件目錄中找到example-functions.php文件並將其複製到您的主題中。 它可以直接複製到主題的根文件夾中，但為了使您的項目井井有條，我建議將其複製到/lib/或/includes/之類的文件夾中。 如果您已經知道要如何使用 CMB2，那麼您可能需要繼續將文件重命名為更合適的名稱。 例如，如果您想使用它為推薦頁面創建自定義字段，您可以將其命名為testimonial-functions.php 。

接下來，您將需要通過向您的functions.php文件添加require_once語句來確保 WordPress 找到新文件。 看起來像這樣：

require_once( dirname(__FILE__) . '/lib/testimonial-functions.php');

現在是真正深入研究的時候了。打開testimonial-functions.php文件（或任何您命名的文件）。 您會注意到 Justin 不僅創建了幾乎所有類型字段的示例，而且他還創建了按主頁、類別、帖子 ID 等顯示字段的函數。

如何在 WordPress 中加載 JavaScript

JavaScript 是目前最流行的編碼語言之一。 它在構建網站或應用程序時非常有用，並且有無數的 JavaScript 庫和框架可供使用，...

注：本文旨在向您介紹CMB2； 它不會是關於如何使用它的各個方面的完整教程，並且因為它是一個框架並且是為幫助程序員而開發的，所以您應該對 PHP 和 WordPress 的內部工作有基本的了解。 如果您正在尋找具有管理用戶界面的自定義元框插件，您可能需要查看高級自定義字段插件。

所以，讓我們回到為簡單的東西（例如推薦）構建一些自定義元框。 首先，確定您需要的字段的數量和類型。 為了簡單起見，假設我們需要三個字段。 一個用於實際證明，一個用於提供證明的人的姓名，一個用於該人的圖像。

在testimonial-functions.php文件中工作，您需要找到用於註冊和添加新功能的部分。 該代碼看起來像這樣。

add_action( 'cmb2_admin_init', 'yourprefix_register_demo_metabox' );

接下來，我建議您將函數重命名為與您的主題和項目相關的名稱。

add_action( 'cmb2_admin_init', 'register_testimonial_metabox' );
/**
 * Hook in and add a testimonial metabox. Can only happen on the 'cmb2_admin_init' or 'cmb2_init' hook.
 */
function register_testimonial_metabox() {

我還建議您重命名前綴。

// Start with an underscore to hide fields from custom fields list
$prefix = '_yourprefix_'; //note, you can use anything you'd like here, but you need to remember what you use, because you will be using it again later.

有幾種不同的字段類型可供選擇。 我將使用：

'type' => 'textarea_small' // for the author field
'type'    => 'wysiwyg' // for the testimonial in case we want to include html
'type' => 'file' // for the image of the project or author

$cmb_demo->add_field( array(
	'name' => __( 'Testimonial Author', 'cmb2' ),
	'desc' => __( 'Who is the testimonial from', 'cmb2' ),
	'id'   => $prefix . 'author', //Note, I renamed this to be more appropriate
	'type' => 'textarea_small',
	) );

$cmb_demo->add_field( array(
	'name'    => __( 'Testimonial', 'cmb2' ),
	'desc'    => __( 'add the testimonial here', 'cmb2' ),
	'id'      => $prefix . 'testimonial', //Note, I renamed this to be more appropriate
	'type'    => 'wysiwyg',
	'options' => array( 'textarea_rows' => 5, ),
	) );

	$cmb_demo->add_field( array(
	'name' => __( 'Author Image', 'cmb2' ),
	'desc' => __( 'Upload an image or enter a URL.', 'cmb2' ),
	'id'   => $prefix . 'image', //Note, I renamed this to be more appropriate
	'type' => 'file',
	) );

這三個新字段需要添加到新函數中，如下所示：

add_action( 'cmb2_admin_init', 'register_testimonial_metabox' );
/**
 * Hook in and add a testimonial metabox. Can only happen on the 'cmb2_admin_init' or 'cmb2_init' hook.
 */
function register_testimonial_metabox() {

 // Start with an underscore to hide fields from custom fields list
    $prefix = '_yourprefix_'; //note, you can use anything you'd like here

/**
 * Start field groups here
 */

$cmb_demo->add_field( array(
	'name' => __( 'Testimonial Author', 'cmb2' ),
	'desc' => __( 'Who is the testimonial from', 'cmb2' ),
	'id'   => $prefix . 'author', //Note, I renamed this to be more appropriate
	'type' => 'textarea_small',
	) );

$cmb_demo->add_field( array(
	'name'    => __( 'Testimonial', 'cmb2' ),
	'desc'    => __( 'add the testimonial here', 'cmb2' ),
	'id'      => $prefix . 'testimonial', //Note, I renamed this to be more appropriate
	'type'    => 'wysiwyg',
	'options' => array( 'textarea_rows' => 5, ),
	) );

	$cmb_demo->add_field( array(
	'name' => __( 'Author Image', 'cmb2' ),
	'desc' => __( 'Upload an image or enter a URL.', 'cmb2' ),
	'id'   => $prefix . 'image', //Note, I renamed this to be more appropriate
	'type' => 'file',
	) );
}

就是這樣！ 您的最終代碼應如下所示：

<?php
/**
 * Include and set up custom metaboxes and fields. (Make sure you copy this file outside the CMB2 directory)
 *
 * Be sure to replace all instances of 'yourprefix_' with your project's prefix.
 * http://nacin.com/2010/05/11/in-wordpress-prefix-everything/
 *
 * @category YourThemeOrPlugin
 * @package  Demo_CMB2
 * @license  http://www.opensource.org/licenses/gpl-license.php GPL v2.0 (or later)
 * @link     https://github.com/WebDevStudios/CMB2
 */

/**
 * Get the bootstrap! If using the plugin from wordpress.org, REMOVE THIS!
 */

if ( file_exists( dirname( __FILE__ ) . '/cmb2/init.php' ) ) {
	require_once dirname( __FILE__ ) . '/cmb2/init.php';
} elseif ( file_exists( dirname( __FILE__ ) . '/CMB2/init.php' ) ) {
	require_once dirname( __FILE__ ) . '/CMB2/init.php';
}

add_action( 'cmb2_admin_init', 'register_testimonial_metabox' );
/**
 * Hook in and add a testimonial metabox. Can only happen on the 'cmb2_admin_init' or 'cmb2_init' hook.
 */
function register_testimonial_metabox() {

 // Start with an underscore to hide fields from custom fields list
    $prefix = '_yourprefix_'; //note, you can use anything you'd like here

/**
 * Start field groups here
 */

// This first field group tells WordPress where to put the fields. In the example below, it is set to show up only on Post_ID=10

$cmb_demo = new_cmb2_box( array(
		'id'            => $prefix . 'metabox',
		'title'         => __( 'Homepage Custom Fields', 'cmb2' ),
		'object_types'  => array( 'page', ), // Post type
		'show_on'      => array( 'id' => array( 10, ) ), // Specific post IDs to display this metabox
		) );

$cmb_demo->add_field( array(
	'name' => __( 'Testimonial Author', 'cmb2' ),
	'desc' => __( 'Who is the testimonial from', 'cmb2' ),
	'id'   => $prefix . 'author', //Note, I renamed this to be more appropriate
	'type' => 'textarea_small',
	) );

$cmb_demo->add_field( array(
	'name'    => __( 'Testimonial', 'cmb2' ),
	'desc'    => __( 'add the testimonial here', 'cmb2' ),
	'id'      => $prefix . 'testimonial', //Note, I renamed this to be more appropriate
	'type'    => 'wysiwyg',
	'options' => array( 'textarea_rows' => 5, ),
	) );

	$cmb_demo->add_field( array(
	'name' => __( 'Author Image', 'cmb2' ),
	'desc' => __( 'Upload an image or enter a URL.', 'cmb2' ),
	'id'   => $prefix . 'image', //Note, I renamed this to be more appropriate
	'type' => 'file',
	) );
}

完成後，您應該有一個如下所示的頁面：

使用 CMB2 是為您的網站提供所需內容的好方法，因為選項確實無窮無盡。 例如，CMB2 可用於創建一個主題選項頁面，其中包含用於徽標的元框、社交媒體網站的 URL 或視頻。 在為客戶構建網站的情況下，CMB2 非常適合自定義管理員，這樣客戶就不必格式化內容來匹配您的主題風格。 輸入數據後，您可以在 HTML 和 CSS 中顯示所有樣式已經到位的內容。

掌握使用 CMB2 添加基本字段後，請嘗試添加可重複字段組。 有了這些，您將能夠添加任意數量的任何內容類型，然後使用 for-each 循環，您可以開始創建幻燈片或輪播。

CMB2 讓我將我的 WordPress 網站提升到了一個新的水平，我希望它也能為你做同樣的事情。

接下來是什麼：插件！

找到一個可以加快網站開發速度的完美 WordPress 插件有點像試圖在一串代碼中找到一個錯字——這可能需要一些時間。 如今，針對不同任務的插件如此之多，以至於很難準確確定站點需要（或不需要）哪些功能，以及哪些插件以有效的方式提供了這些功能。

下載此電子書以獲取我們最推薦給開發人員的插件列表！