通过添加 Meta Box 给 WordPress 的文章添加固定自定义字段

Question

如何给 WordPress 的 wp_posts 表添加一个字段，然后每次发布文章时就自动给这个字段添加内容，这个字段也就和文章标题、内容、发布时间等平起平坐了，是文章的固有属性。

在通常情况下，我们如果想在 WordPress 博客中给文章添加额外的属性，那么我们一般都会想到使用自定义栏目（也称自定义字段），这也极大的增强了 WordPress 的扩展性，如我想使用 WordPress 制作一个在线销售的网站，那么每件商品有价格、颜色、重量等属性，这个时候我就可以使用自定义栏目来记录这部分数据。

在 WordPress 中自定义栏目的数据是存放在 wp_postmeta 这个表中的，如果你的一篇文章中创建了 3 个自定义栏目，那么对应的就要往 wp_postmeta 这个表中插入 3 行数据，这样就实现与wp_posts 表的分离，好处是你可以无限制添加自定义栏目，坏处是有点浪费存储空间。

首先我们添加一个 hook，挂载到 admin_init 上面，这个 hook 会添加一个自定义的 Meta Box：

add_action( 'admin_init', 'my_admin' );
function my_admin() {
    add_meta_box( 'goods_review_meta_box', '商品属性', 'display_goods_review_meta_box', 'goods', 'normal', 'high' );
}

熟悉 WordPress 插件机制的都知道这时候需要一个回调函数，上面中的 display_goods_review_meta_box 就是我们的回调函数，我们需要自定义这个函数：

function display_goods_review_meta_box($goods){
?>
<table class="goods_attr">
    <tr>
        <td width="60">宝贝主图</td>
        <td>
        <ul class="goods_thumb">
        <li>+</li>
        <li>+</li>
        <li>+</li>
        <li>+</li>
        <li>+</li>
        <li>+</li>
        </ul>
        </td>
    </tr>
    <tr>
        <td>宝贝状态</td>
        <td>
        <label><input name="radio30" value="0" checked="checked" type="radio">立刻上架</label>
        <label><input name="radio30" value="1" type="radio">定时上架</label>
        <label><input name="radio30" value="2" type="radio">放入仓库</label></td>
    </tr>
    <tr>
        <td>宝贝价格</td>
        <td>销售价<span class="division"></span>
        <input type="text" style="width:10em;" class="regular-text" name="size_format[]"/>
        <span class="division"></span>
        <span class="division"></span>
        市场价 <span class="division"></span>
        <input style="width:10em;" type="text" class="regular-text" name="size_format[]"/>
        </td>
    </tr>
</table>
<?php

还需要添加一些样式：

#goods_review_meta_box table{width:100%; border-collapse:collapse}
.goods_attr td{ padding:15px;}
.goods_thumb{ overflow:hidden; padding:0; margin:0;}
.goods_thumb li{ float:left; border:1px solid #DDD; cursor:pointer; font-size:80px; width:100px; height:100px; line-height:80px; text-align:center; margin:0 10px 0 0; color:#CCC;}
.goods_thumb li:hover{ border:1px solid #0073aa; color:#0073aa;}
.goods_thumb img{width:100px; height:100px;}
.division{ display:inline-block; height:12px; width:15px;}

最后再保存文章的时候，同时保存我们自定义的字段：

add_action( 'save_post', 'add_goods_review_fields', 10, 2 );
function add_goods_review_fields( $goods_id, $goods ) {
    if ( $goods->post_type == 'goods' ) {
        if ( isset( $_POST['goods_thumb'] ) && $_POST['goods_thumb'] != '' ) {
            update_post_meta( $goods_id, 'goods_thumb', $_POST['goods_thumb'] );
        }
    }
}

基本上就是这样了，可能你还需要编写一些JS代码来响应前端的操作。