怎样在WordPress中创建文章（Post）的自定义Meta Boxes

似乎WordPress功能最复杂的部分之一是添加meta box到编辑主页面。这种复杂性在教程被写的过程中奇怪的循环，并且只会变得越来越多。甚至meta box“框架”已经被开发出来。我将要告诉你一个小秘密：这其实并不复杂。

一旦你创建了你的第一个工具，将它融入到wordPress的核心代码中，创建自定义meta box是非常简单的。在本教程中，我将带你亲自经经历所有关于meta box你需要知道的东西：

创建meta box

使用任何类型的meta box

处理数据验证

保存自定义元数据

在前端获取自定义元数据

注意：当我在本教程中使用“文章”这个术语使，我是指一篇文章的类型，而不仅是与WordPress默认博客文章类型。

什么是meta box？

meta boxes是一个在文章编辑页面可以拖动的显示框。它的目的是除了主要的发布的内容之外，允许用户选择和输入信息。这个信息应该与某种方式的文章有关。

一般来说，两种类型的数据会添加到meta box：

Metadata(元数据),比如定制字段

Taxonomy terms

当然，可能有其他的用途，但这两个是最常见的。在这个教程，你将学习如何开发meta box处理自定义元数据。

文章元数据是什么？

文章元数据是保存在数据库的wp_postmeta表中的数据。每个条目在此表中保存为4个字段:

meta_id: 为这个特定的元数据设定的唯一的ID

post_id: 附加到此元数据的post_id

meta_key: 主要用于识别数据（这个通常你会用来工作）

meta_value: 元数据的值

在下面的截图中，可以看到在数据库中这看来是怎样的。

WordPress元数据在数据库中的表现

当你认真思考它的时候，元数据是对保存为一个特定区域的键/值。这允许你添加各种自定义数据到你的文章。当你开发定制类型时，这是特别有用的。唯一的限制就是你的想象力

注意：要记住一件事，一个meta关键可以有很多个元值。这不是普遍使用，但它是非常强大的。

处理后的元数据

现在，你可能想要建立一些自定义meta box。然而，了解如何自定义meta box使有用的，你必须要了解怎样添加、更新、删除和发布元数据。

我可以写一本关于各种使用元数据方法的书，但这不是主要的指导目的。如果你不熟悉他们的工作，你可以使用以下链接去学习元功能在WordPress的运用。

add_post_meta(): Adds post metadata.添加元数据

update_post_meta(): Updates post metadata.更新元数据

delete_post_meta(): Deletes post metadata.删除元数据

get_post_meta(): Retrieves post metadata.检索元数据

本教程假设你至少熟悉这些函数是如何工作的。

设置

在建立meta box之前，你必须要有一些关于使用什么类型的元数据的想法。本教程将重点构建meta box，保存自定义CSS类，用于设计。

我将开始教你做一些非常简单的事情来开发自定义代码：

为你增加一个输入框听见一个自定义的类（meta box）

保存文章的smashing_post_class meta 键

用过滤器post_class添加你的自定义类

你可以使用meta box做更复杂的事情，但是你首先需要学习基础知识。

把下面所有的PHP代码插入你的自定义插件文件或主题功能中。PHP文件。

构建一个自定义meta box

现在你要知道你正在构建什么，是时候开始深入编写一些代码。在本节教程的前两个代码片段，大部分是关于设置所有的meta box函数。

因为你只想要你的文章meta box出现在编辑器屏幕上，你将使用load-post。php 和 load-post-new。php初始化你的meta box代码。

/* Fire our meta box setup function on the post editor screen. */
add_action( 'load-post.php', 'smashing_post_meta_boxes_setup' );
add_action( 'load-post-new.php', 'smashing_post_meta_boxes_setup' );

大多数WordPress开发人员应该熟悉Hook是如何工作的，所以不应该给你新的东西。上面的代码告诉WordPress，你想要在编辑屏幕上添加smashing_post_meta_boxes_setup函数。下一步是创建这个函数。

下面的代码将在你的meta box创建函数add_meta_boxes。WordPress提供这个hook到meta box

/* Meta box setup function. */
function smashing_post_meta_boxes_setup() {

  /* Add meta boxes on the 'add_meta_boxes' hook. */
  add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' );
}

现在，你可以开始有趣的东西了

在上面的代码中，你添加smashing_add_post_meta_boxes()基础于add_meta_boxes hook.该函数的目的应该是添加meta box。

在下一个示例中，你将创建一个使用add_meta_box()WordPress函数创建meta box。然而，你可以尽可能多的像此时开发你自己的项目那样添加meta box。

在继续之前，让我们一起看看add_meta_box() 函数：

add_meta_box( $id, $title, $callback, $page, $context = 'advanced', $priority = 'default', $callback_args = null );

$id: This is a unique ID assigned to your meta box. It should have a unique prefix and be valid HTML.

$title: The title of the meta box. Remember to internationalize this for translators.

$callback: The callback function that displays the output of your meta box.

$page: The admin page to display the meta box on. In our case, this would be the name of the post type (post, page, or a custom post type).

$context: Where on the page the meta box should be shown. The available options are normal, advanced, and side.

$priority: How high/low the meta box should be prioritized. The available options are default, core, high, and low.

$callback_args: An array of custom arguments you can pass to your $callback function as the second parameter.

下面的代码将添加一些meta box到编辑界面：

/* Create one or more meta boxes to be displayed on the post editor screen. */
function smashing_add_post_meta_boxes() {

  add_meta_box(
    'smashing-post-class',      // Unique ID
    esc_html__( 'Post Class', 'example' ),    // Title
    'smashing_post_class_meta_box',   // Callback function
    'post',         // Admin page (or post type)
    'side',         // Context
    'default'         // Priority
  );
}

你仍然需要显示meta box的网页，这就是smashing_post_class_meta_box() 函数（从上面调取参数）

/* Display the post meta box. */
function smashing_post_class_meta_box( $object, $box ) { ?>

  

  
    
    

    
  

上面的函数是显示HTML输出meta box。它显示一个隐藏的nonce输入（你可以阅读更多关于WordPress上nonce的法典)。然后显示添加一个自定义文章类的一个输入元素以及一个已经输入输出的自定义类。
此时，你应该在你的编辑屏幕有一个好看的meta box，它应该看起来像下面的截图。
meta box实际上不做任何事。例如，它不会保存你的自定义类。这就是本教程的下一节。
保存元数据链条

现在，你已经学习了如何建立一个meta box，接下来学习如何保存元数据。
你记住之前创建的smashing_post_meta_boxes_setup() 函数吗？你需要修改下这一点，你需要添加下面的代码。
/* Save post meta on the 'save_post' hook. */
add_action( 'save_post', 'smashing_save_post_class_meta', 10, 2 );

So, that function will actually look like this:

/* Meta box setup function. */
function smashing_post_meta_boxes_setup() {

  /* Add meta boxes on the 'add_meta_boxes' hook. */
  add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' );

  /* Save post meta on the 'save_post' hook. */
  add_action( 'save_post', 'smashing_save_post_class_meta', 10, 2 );
}

你添加的新代码告诉WordPress，你想要在the save_post hook运行一个自定义函数。该函数将保存、更新或删除你的自定义元。
在保存文章元数据的时候，你的函数需要运行的过程：

	
在meta box中设置验证 nonce

	
检查当前用户是否有权限进行编辑

	
获取输入值

	
决定是否元应该添加、更新、或删除是基于文章的值和旧值


我把以下函数变成通用，这样你就可以拥有一个开发自己的meta box的灵活性。最好的代码，你需要保存你的自定义类的元数据meta box。
/* Save the meta box's post metadata. */
function smashing_save_post_class_meta( $post_id, $post ) {

  /* Verify the nonce before proceeding. */
  if ( !isset( $_POST['smashing_post_class_nonce'] ) || !wp_verify_nonce( $_POST['smashing_post_class_nonce'], basename( __FILE__ ) ) )
    return $post_id;

  /* Get the post type object. */
  $post_type = get_post_type_object( $post->post_type );

  /* Check if the current user has permission to edit the post. */
  if ( !current_user_can( $post_type->cap->edit_post, $post_id ) )
    return $post_id;

  /* Get the posted data and sanitize it for use as an HTML class. */
  $new_meta_value = ( isset( $_POST['smashing-post-class'] ) ? sanitize_html_class( $_POST['smashing-post-class'] ) : '' );

  /* Get the meta key. */
  $meta_key = 'smashing_post_class';

  /* Get the meta value of the custom field key. */
  $meta_value = get_post_meta( $post_id, $meta_key, true );

  /* If a new meta value was added and there was no previous value, add it. */
  if ( $new_meta_value && '' == $meta_value )
    add_post_meta( $post_id, $meta_key, $new_meta_value, true );

  /* If the new meta value does not match the old value, update it. */
  elseif ( $new_meta_value && $new_meta_value != $meta_value )
    update_post_meta( $post_id, $meta_key, $new_meta_value );

  /* If there is no new meta value but an old value exists, delete it. */
  elseif ( '' == $new_meta_value && $meta_value )
    delete_post_meta( $post_id, $meta_key, $meta_value );
}

在这一点上，你可以从你的文章编辑器屏幕保存、更新或删除“后类”中meta box。
从meta box使用元数据

你有一个自定义meta box的作品，但你仍然需要做一些省略的元数据。创建meta box的点。如何从将会改变的项目处理你的元数据，这不是我能回答你的。然而，你学习如何使用你已经创建了的meta box。
既然你已经建立了一个meta box，允许用户输入一个自定义类，你需要过滤WordPress的post_class hook，从而定制类似的类别。
从更早的教程记住get_post_meta() 函数了吗？你需要。
下面的代码从你的自定义原盒添加自定义类。
/* Filter the post class hook with our custom post class function. */
add_filter( 'post_class', 'smashing_post_class' );

function smashing_post_class( $classes ) {

  /* Get the current post ID. */
  $post_id = get_the_ID();

  /* If we have a post ID, proceed. */
  if ( !empty( $post_id ) ) {

    /* Get the custom post class. */
    $post_class = get_post_meta( $post_id, 'smashing_post_class', true );

    /* If a post class was input, sanitize it and add it to the post class array. */
    if ( !empty( $post_class ) )
      $classes[] = sanitize_html_class( $post_class );
  }

  return $classes;
}

如果你看到这篇文章显示的页面的源代码，你将看到类似于下面的截图。

很酷，对吧？你可以使用这个自定义风格的帖子在你想要的主题样式表中。
安全链接

有一件事，你应该记住，保存数据的安全。安全是一个冗长的主题，超出了文本的范围，然而，我认为他至少提醒你保持安全。
你已经得到了目前解释本教程的链接。我想为你提供其他的关于WordPress Codex指南数据验证的资源。这个文档将是学习如何保存元数据的最好伙伴，将为你提供你需要的工具，可以保证你的插件/主题安全。
谁能说出本教程中使用的所有安全措施。
创建一个定制的meta box

一旦你复制、粘贴和测试了本教程的代码，我希望你去尝试更复杂的东西。如果你真的想看强大的meta box和元数据，可以试着做一些单个原件和多个元值键（那是一个挑战）
我希望你喜欢这个教程，随时在评论中提出关于如创建meta box