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

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

发布于 2017-11-13 字数 3875 浏览 3120 评论 0

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

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

在通常情况下,我们如果想在 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代码来响应前端的操作。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

伊面

文章 0 评论

白况

文章 0 评论

七禾

文章 0 评论

亢潮

文章 0 评论

悲念泪

文章 0 评论