在构建Wordpress自定义post meta框之前，您必须对你要使用的Custom post meta数据类型有一些想法。本教程将重点介绍如何创建带样式的自定义文章META框。

1、建立自定义POST META框:
如果你仅仅是需要将META框显示在后台发布文章页面使用，你只需用load-post.php和load-post-new.php这两个钩子来应用Custom META框代码。

/* 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' );

以下代码将创建文章META框，我们可以用WordPress的钩子实现：

/* 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' );
}

这里需要对add_meta_box()的具体用法做点说明：

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

• $id: meta框唯一ID。
• $title: meta框标题。
• $callback: meta框输出内容。
• $page: 显示meta框的文章类型页面。例如：post, page, 或自定义文章类型。
• $context: meta框显示在页面哪里。可选：normal, advanced, 和side。
• $priority: 可选项：default, core, high, 和low。
• $callback_args: 一个自定义参数的数组，你可以通过回调函数为第二个参数。

以下代码将添加post class meta box到文章编辑页：

/*
添加meta box到文章编辑页
代码来源: www.wpzxbj.com
*/
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
  );
}

输出HTML代码：

function smashing_post_class_meta_box( $object, $box ) { ?>

  

  

    
    

    <input class="widefat" type="text" name="smashing-post-class" id="smashing-post-class" value="ID, 'smashing_post_class', true ) ); ?>" size="30" />
  
<?php }

至此，你已经可以在文章编辑页面看到自定义META框了。

2、保存自定义POST META数据：

第一步只解决了文章编辑页面显示文章自定义META框的问题，还需要解决保存填入的数据。我们可以用save_post这个钩子来实现，以下是代码：

/* 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 );
}

最终完整的保存custom post meta数据代码如下：

/*
添加自定义meta box到文章编辑页
代码来源: www.wpzxbj.com
*/
/* 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 );
}

3、如何获取自定义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;
}