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

发布于 2017-11-13 22:10:46 字数 3392 浏览 3242 评论 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代码来响应前端的操作。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

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

列表为空,暂无数据

关于作者

JSmiles

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

0 文章
0 评论
84935 人气
更多

推荐作者

淹不死的鱼

文章 0 评论 0

zhangMack

文章 0 评论 0

爱的故事

文章 0 评论 0

linces

文章 0 评论 0

早乙女

文章 0 评论 0

鸵鸟症

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。