曾经尝试在WordPress中建立中继盒吗? 不仅对于初学者,甚至对于高级WordPress开发人员来说,都是一团糟。 幸运的是,对于WordPress社区,社区本身可以针对此类麻烦的问题提出优雅的解决方案。 CMB2是其中之一。
在“智能WordPress开发者工具箱”系列的这一部分中,我们将介绍CMB2,CMB2是一个广泛的库,用于在WordPress中开发自定义元框和表单。
创建自定义元框的极其例外的方式
由于这不是关于创建自定义元框的教程,因此,我不会教您如何使用核心功能来实现它-但我将给出几个有用的链接。 相反,我将遍历它的普通例程:
创建metabox:不可否认,这部分是必不可少的,甚至CMB2都使用类似的方法-您必须使用一个add_meta_box()
函数来创建自定义metabox,该函数必须与add_meta_boxes
动作挂钩。 不是太容易,不是太难,而是介于两者之间。
创建要显示在metabox中的字段:在这一部分中,您必须创建一个单独的函数(您还必须在add_meta_box()
函数中引用该函数)并在其中编写add_meta_box()
HTML,例如div
s和label
s和input
,以显示您的表单字段, 除非您将HTML与复杂的PHP绑定在一起,否则它将无法正常工作 。 文本输入很好,但是创建下拉菜单或复选框吗? 准备感到困惑。 (甚至没有让我开始进行文件上传和颜色选择器。)哦,您忘记使用wp_nonce_field()
来提高安全性吗? 太糟糕了,您的代码将永远无法工作。
清理并保存字段值:是的。 为了使表单存储数据,您必须使用另一个函数来检查一堆东西,清理数据并将值保存在自定义metabox中。 而且,您必须将该函数连接到save_post
操作。 整齐。
如果您想以“核心方式”进行操作,并花几个小时来创建几个元框,那么,这对您有好处,走的路很长。 但是当然,有时候可能您将无法使用CMB2之类的帮助程序框架。 在这种情况下,您可以参考Narayan Prusty撰写的此SitePoint教程或Tom McFarlin 撰写的 有关Tuts + Code的广泛教程系列 。
输入CMB2:创建自定义元框的绝佳方式
如果我告诉过您,您可以通过创建一个挂钩到一个动作的函数并使用非常聪明的函数来创建自定义元框,这些函数将完成创建HTML并将所有内容神奇地绑定在一起的所有艰苦工作? 相信我,我一点也不夸张!
借助CMB2,您将能够以“核心方式”花费很少的时间创建自定义元框。
设置CMB2
CMB2有两种形式: 插件形式和框架形式 。 如果您打算在不会为社区发布的项目中使用CMB2,则建议您使用该插件,因为更新CMB2插件会容易得多,而且您不必包含文件CMB2引擎。 但是,如果要将项目发布到社区,则最好通过从GitHub下载文件,将它们放置到项目的文件夹中并使用其中的以下行来将CMB2集成到项目中:
<?php
// require the init.php file
if ( file_exists( __DIR__ . '/path/to/cmb2/init.php' ) ) {
require_once __DIR__ . '/path/to/cmb2/init.php';
}
?>
当然,请记住,您必须编辑以上各行以指向CMB2的init.php
文件。
创建您的第一个自定义元框
在创建第一个元框之前,我们需要创建唯一的函数,该函数将钩接到CMB2自己的cmb2_init
操作:
<?php
// hook the function to the cmb2_init action
add_action( 'cmb2_init', 'cmb2_sample_metaboxes' );
// create the function that creates metaboxes and populates them with fields
function cmb2_sample_metaboxes() {
// set the prefix (start with an underscore to hide it from the custom fields list
$prefix = '_my_prefix_';
}
?>
之后,创建元框就像创建新变量一样简单:
<?php
// hook the function to the cmb2_init action
add_action( 'cmb2_init', 'cmb2_sample_metaboxes' );
// create the function that creates metaboxes and populates them with fields
function cmb2_sample_metaboxes() {
// set the prefix (start with an underscore to hide it from the custom fields list
$prefix = '_my_prefix_';
// create the metabox
$cmb = new_cmb2_box( array(
'id' => 'test_metabox',
'title' => 'Test Metabox',
'object_types' => array( 'page', 'post', 'customposttype' ), // post type
'context' => 'normal', // 'normal', 'advanced' or 'side'
'priority' => 'high', // 'high', 'core', 'default' or 'low'
'show_names' => true, // show field names on the left
'cmb_styles' => false, // false to disable the CMB stylesheet
'closed' => true, // keep the metabox closed by default
) );
}
?>
用字段填充自定义元框
创建第一个自定义元框后,是时候使用CMB2提供的“字段”来使其变得有用了。 这样做就像使用刚刚创建的metabox变量运行一个函数一样简单:
<?php
// metabox title
$cmb->add_field( array(
'name' => 'Test Title',
'desc' => 'This is a title description',
'type' => 'title',
'id' => 'wiki_test_title'
) );
// email input
$cmb->add_field( array(
'name' => 'Test Text Email',
'id' => 'wiki_test_email',
'type' => 'text_email',
) );
// file uploader
$cmb->add_field( array(
'name' => 'Test File',
'desc' => 'Upload an image or enter an URL.',
'id' => 'wiki_test_image',
'type' => 'file',
// Optionally hide the text input for the url:
'options' => array(
'url' => false,
),
) );
// remember when I said doing a color picker would be super hard when using core functions?
$cmb->add_field( array(
'name' => 'Test Color Picker',
'id' => 'wiki_test_colorpicker',
'type' => 'colorpicker',
'default' => '#ffffff',
) );
?>
CMB2提供了30多种字段类型,包括常规文本输入,所见即所得编辑器,日期选择器,颜色选择器,文件上传器,甚至分类选择器。 有关字段类型的完整列表, 请查看CMB2的此Wiki页面 。
更棒
创建功能完备的自定义元框确实很棒,但是CMB2并不止于此。 您可以使用CMB2做很多事情:
- 您可以使用CMB2 为您的主题创建一个选项页面 。
- 您可以使CMB2起作用以创建帖子提交表单 。
- 您可以添加自己的
show_on
过滤器,并有条件地显示或隐藏您的元框。 - 您甚至可以创建自己的字段类型 。
要了解有关此类CMB2超级功能的更多信息,您可以查看以下页面:
- CMB2的第三方资源
- CMB2 Wiki上的“提示和技巧”页面
- CMB2代码段库 ,该页面包含一些非常有用的代码段
- CMB2的创建者WebDevStudios的博客
总结今天
无可否认,在构建内容时坚持WordPress核心并不总是听起来那么简单。 因此,使用CMB2之类的帮助程序框架将加快我们的开发过程。 而且我相信,即使CMB2像现在一样出色,它还有更多的改进空间(不仅是自定义元框的领域,而且还有其他方向),所以我会一直关注这一点。项目,如果我是你。
在下一部分中,我们将介绍WP-CLI,WP-CLI是一种独特的WordPress工具,它使我们有机会通过命令行管理WordPress安装。
翻译自: https://code.tutsplus.com/tutorials/toolbox-of-the-smart-wordpress-developer-cmb2--cms-24090