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

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

一、什麼是CMB2？

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

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

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

如何設置 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 等顯示字段的函數。

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

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

在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 網站提升到一個新的水平，我希望它也能為您做同樣的事情。