2025年3月29日 星期六 甲辰(龙)年 月廿八 设为首页 加入收藏
rss
您当前的位置:首页 > 计算机 > 服务器 > 万维网络 > WordPress

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

时间:12-14来源:作者:点击数:15
CDSY,CDSY.XYZ

如何给 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代码来响应前端的操作。

CDSY,CDSY.XYZ
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门
本栏推荐