如何创建自定义 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 函数的选项