WordPress 添加Meta Box的方法

所属分类: CMS教程 / WordPress 阅读数: 1769
收藏 0 赞 0 分享
相信很多站长都知道并且已经在使用WordPress自定义字段,很多插件也使用了这一功能。

自定义字段是一个非常不错的功能,它能够让我们为文章添加各种自定义的属性,高度灵活,操作简单。比如可以为文件添加一个SEO MetaDescription的自定义字段,我们可以输入一段文字来概括文章内容,在前台显示的时候可以根据该字段来生成HTML的<meta>标签,使搜索引擎更加方便的了解页面的内容,帮助索引。

但是,由于它的高度灵活,导致了一些问题,尤其因为自定义字段的值的输入是一个文本框,导致在输入时会非常不便,例如,设计的是一个整形的字段,但是由于文本框没有验证和提示,导致可能会输入非整数,在前台使用时就会出现问题,甚至导致网站挂掉。或者字段的值是预定义的值集合中的一个(比如有个性别的字段,就只是男和女中的一个值),但是文本框是不会提示你可以输入哪些值。

总的来说,不方便之处是文本框的单一输入方式无法满足不同场景下不同字段类型的输入需求和验证需求。

那么,解决方案来了,使用自定义Meta Box来自定义编辑页面。

以添加一个自定义字段——【推荐指数】为例,来讲讲如何使用Meta Box。

备注:推荐指数,在本例中指的是文章作者对文章的打分,分数在1~10分,为整数。分数越高,越推荐。
先来看看最终的样子,我们可以通过下拉列表来选择值了。




首先,需要使用到add meta boxes Action,该Action允许我们为任何文章类型注册Meta Box,在该Action中,我们需要使用add_meta_box()方法来添加Meta Box的相关信息。代码如下

PHP Code复制内容到剪贴板
  1. function add_rating_meta_box($post_type$post) {   
  2.     // 需要哪些post type添加推荐指数 Meta Box   
  3.     $types = array'post''page' );   
  4.        
  5.     foreach ( $types as $type ) {   
  6.         add_meta_box(   
  7.             'rating_meta_box_id'// Meta Box在前台页面中的id,可通过JS获取到该Meta Box   
  8.             '推荐指数'// 显示的标题   
  9.             'render_rating_meta_box'// 回调方法,用于输出Meta Box的HTML代码   
  10.             $type// 在哪个post type页面添加   
  11.             'side'// 在哪显示该Meta Box   
  12.             'default' // 优先级   
  13.         );   
  14.     }   
  15. }   
  16. add_action( 'add_meta_boxes''add_rating_meta_box' );  
这里我们在$types数组中定义了Post和Page都需要推荐指数这个自定义字段,然后告诉WordPress使用“render_rating_meta_box”方法来渲染Meta Box,位置在侧边栏(side)。因为内容不多,所以侧边栏足够,若内容较多,可以将“side”改为“advanced”,这样就会在主内容区域渲染Meta Box。

接下来看看是如何渲染的
PHP Code复制内容到剪贴板
  1. function render_rating_meta_box( $post ) {   
  2.     // 添加 nonce 项用于后续的安全检查   
  3.     wp_nonce_field( 'rating_nonce_action''rating_nonce_name' );   
  4.   
  5.     // 获取推荐指数的值   
  6.     $rating_key = 'rating';   
  7.     $rating_value = get_post_meta( $post->ID, $rating_key, true );   
  8.     $rating_value = (int)$rating_value;   
  9.   
  10.     $html = '<select name="rating_field">';   
  11.     for ($i = 0; $i <= 10; $i++) {   
  12.         $selected = '';   
  13.         if ($i == $rating_value) {   
  14.             $selected = 'selected="selected"';   
  15.         }   
  16.         $html .= sprintf('<option value="%s" %s>%s星</option>'$i$selected$i/2);   
  17.     }   
  18.     $html .= '</select>';   
  19.     echo $html;   
  20. }  

这里先使用wp_nonce_field()添加了一个nonce field,用来做安全检查,然后,读取推荐指数的值,循环1~10来输出可供选择的值,如果和推荐指数相同,则默认选上。通过下拉框,既可以解决输入不方便和无法验证的问题。记住这里下拉框的name属性的值(rating_field),将通过它在下面的代码中获取选择的值。

最后,当文章被保存时,需要将推荐指数也保存起来
PHP Code复制内容到剪贴板
  1. function save_rating_post_data( $post_id ) {   
  2.     // 检查nonce是否设置   
  3.     if (!isset($_POST['rating_nonce_name'])) {   
  4.         return $post_id;   
  5.     }   
  6.     $nonce = $_POST['rating_nonce_name'];   
  7.   
  8.     // 验证nonce是否正确   
  9.     if (!wp_verify_nonce( $nonce'rating_nonce_action')) {   
  10.         return $post_id;   
  11.     }   
  12.   
  13.     // 如果是系统自动保存,则不操作   
  14.     if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {   
  15.         return $post_id;   
  16.     }   
  17.        
  18.     // 检查用户权限   
  19.     if ($_POST['post_type'] == 'post') {   
  20.         if (!current_user_can('edit_post'$post_id )) {   
  21.             return $post_id;   
  22.         }   
  23.     }   
  24.   
  25.     $rating_key = 'rating';   
  26.     // 获取数据   
  27.     $rating_value = $_POST['rating_field'];   
  28.   
  29.     // 更新数据   
  30.     update_post_meta( $post_id$rating_key$rating_value );   
  31. }   
  32. add_action( 'save_post''save_rating_post_data' );  

这里做了一系列检查,包括对刚刚设置的nonce检查,用户权限的检查,排除自动保存的情况。然后使用update_post_meta()方法将数据存入数据库。

至此,我们就完成了对推荐指数自定义字段的改装,可以很方便的选择文章的推荐指数。

等等。。。

细心的朋友可能发现了,在应用了上面三段代码后,的确可以实现功能。但是,在默认的自定义栏目区域下,是可以看到,有一个名为“rating”的栏目,这就是我们刚刚选择的推荐指数。如果想让他不在自定义栏目下,显示,可以将上述代码中的$rating_key改为以下划线开头,这样,WordPress就不会显示出来了。注意有两个地方要改。

PHP Code复制内容到剪贴板
  1. // 原来的代码   
  2. $rating_key = 'rating';   
  3. // 改后的代码   
  4. $rating_key = '_rating';   
更多精彩内容其他人还在看

WordPress 防止恶意评论的方法

本文章详细的介绍了关于WordPress 防止恶意评论代码处理办法
收藏 0 赞 0 分享

wordpress制作自定义菜单的方法

本文介绍了wordpress中自定义菜单制作详细教程
收藏 0 赞 0 分享

WordPress增加文章排序方式

很多网站的文章列表页面都可以查看排序方法,但是在wp系统中是没有这个功能,下面我们来看看关于WordPress系统中增加选择文章的排序方式的解决办法
收藏 0 赞 0 分享

wordpress get_posts函数的使用方法 禁止输出指定类别的文章

本文向大家介绍wordpress使用get_posts函数功能禁止输出指定类别文章的方法,大家可以参考一下
收藏 0 赞 0 分享

在wordpress文章末尾添加内容的简单方法

如何在wordpress的文章末尾添加内容,在wordpress每篇文章的末尾添加文字、链接等内容,比如你想加个“原创文章如转载,请注明本文链接:”,其实很简单,有多种方法,下面就介绍给大家
收藏 0 赞 0 分享

wordpress dynamic_sidebar()函数使用方法

本文简单介绍wordpress dynamic_sidebar()函数使用的方法,在wordpress开发中会经常用到
收藏 0 赞 0 分享

WordPress导航菜单函数wp_nav_menu()详解

本文主讲内容是WordPress导航菜单函数wp_nav_menu()详细使用的说明,大家可以看参考一下,在开发WordPress模板时会使用到这个函数自定义菜单
收藏 0 赞 0 分享

WordPress自定义多个边栏的方法

在wordpress后台中,在外观>小工具里面,可以自定义边栏要显示的内容,一般的主题都支持至少一个自定义边栏,那么它是如何实现的呢
收藏 0 赞 0 分享

wordpress全局变量$wpdb初始化并声明为全局变量的方法

wordpress操作数据库用一个全局变量$wpdb来进行各种操作,使用的时候先在函数声明global $wpdb,然后调用它的数据库操作方法。那么它是在哪里进行初始化并声明为全局变量的呢
收藏 0 赞 0 分享

wordpress中强大的调用文章函数query posts 用法

query posts是一个非常好用的调用文章函数,可以做到同页面内显示多种特定范围的文章,下面为大家详细的介绍下wordpress中强大的query posts 用法,喜欢的朋友可以参考下
收藏 0 赞 0 分享
查看更多