WordPress教程

WordPress自定义文章添加自定义字段面板

阿里云

以前我们分享了 WordPress 创建自定义文章类型教程创建的文章类型仅有标题和正文内容,但是我们在开发 WordPress 主题时,以及 wordpress 自定义字段操作函数,但是对于自定义字段的时候,在后台添加的使用通过那个面板添加十分不方便,比如你要使用自定义字段来实现 SEO 功能,那么你每次都需要重复输入字段名称。特别对于产品文章类型来说,不仅仅标题和正文,还需要单独设置一些其它的参数,如产品价格、产品型号、规格大小等,那么就需要给文章类型添加 Meta Box,通俗点理解就是自定义字段表单,下面以添加产品价格为例进行说明。自定义 Meta Box 需要用到 add_meta_box 函数:

  1. add_meta_box( $id, $title, $callback, $post_type, $context,$priority, $callback_args );
也想出现在这里?联系我们
创客主机

参数说明

  1.     $id:字段id,唯一
  2.     $title:标题名称
  3.     $callback:回调函数
  4.     $post_type:文章类型
  5.     $context:显示位置
  6.     $priority:优先级

注册一个 Meta Box 示例

  1. add_action( 'add_meta_boxes', 'product_director' );
  2. function product_director() {
  3.     add_meta_box(
  4.         'product_director',
  5.         '产品价格',
  6.         'product_director_meta_box',
  7.         'product',
  8.         'side',
  9.         'low'
  10.     );
  11. }

创建回调函数 product_director_meta_box

配置参数里面指定了回调函数 product_director_meta_box,需要在这个函数里面创建表单:

  1. function product_director_meta_box($post) {
  2.     // 创建临时隐藏表单,为了安全
  3.     wp_nonce_field( 'product_director_meta_box', 'product_director_meta_box_nonce' );
  4.     // 获取之前存储的值
  5.     $value = get_post_meta( $post->ID, '_product_director', true );
  6. ?>
  7.     <label for="product_director"></label>
  8.     <input type="text" id="product_director" name="product_director" value="<?php echo esc_attr( $value ); ?>" placeholder="输入产品价格">
  9. <?php
  10. }

提示:添加上面代码后,新建文章时,在右则就可以看到一个产品价格的输入框。

这时候表单还不能用,因为提交文章之后并没有保存这个 Meta Box 的内容,下面是验证保存内容的代码:

  1. add_action( 'save_post', 'product_director_save_meta_box' );
  2. function product_director_save_meta_box($post_id){
  3.     // 安全检查
  4.     // 检查是否发送了一次性隐藏表单内容(判断是否为第三者模拟提交)
  5.     if ( ! isset( $_POST['product_director_meta_box_nonce'] ) ) {
  6.         return;
  7.     }
  8.     // 判断隐藏表单的值与之前是否相同
  9.     if ( ! wp_verify_nonce( $_POST['product_director_meta_box_nonce'], 'product_director_meta_box' ) ) {
  10.         return;
  11.     }
  12.     // 判断该用户是否有权限
  13.     if ( ! current_user_can( 'edit_post', $post_id ) ) {
  14.         return;
  15.     }
  16.  
  17.     // 判断 Meta Box 是否为空
  18.     if ( ! isset( $_POST['product_director'] ) ) {
  19.         return;
  20.     }
  21.  
  22.     $product_director = sanitize_text_field( $_POST['product_director'] );
  23.     update_post_meta( $post_id, '_product_director', $product_director );

把上面的代码按顺序添加到主题的 functions.php 文件,至此,Meta Box 注册完成,就可以开始添加参数了:

调用代码

  1. <?php 
  2. 	if(get_post_meta($post->ID,'_product_director',true)){
  3. 		echo get_post_meta($post->ID,'_product_director',true);
  4. 	}
  5. ?>

扩展应用

把 Meta Box 添加把后台所有产品列表字段中显示,通过 manage_$post_type_posts_custom_column 实现,代码如下:

  1. add_action("manage_posts_custom_column",  "product_custom_columns");
  2. add_filter("manage_edit-product_columns", "product_edit_columns");
  3. function product_custom_columns($column){
  4.     global $post;
  5.     switch ($column) {
  6.         case "product_director":
  7.             echo get_post_meta( $post->ID, '_product_director', true );
  8.             break;
  9.     }
  10. }
  11. function product_edit_columns($columns){
  12.     $columns['product_director'] = '产品价格';
  13.     return $columns;
  14. }

在主题 functions.php 文件中接着上面的代码添加,效果如下:

完整代码

  1. add_action( 'add_meta_boxes', 'product_director' );
  2. function product_director() {
  3.     add_meta_box(
  4.         'product_director',
  5.         '产品价格',
  6.         'product_director_meta_box',
  7.         'product',
  8.         'side',
  9.         'low'
  10.     );
  11. }
  12. function product_director_meta_box($post) {
  13.     // 创建临时隐藏表单,为了安全
  14.     wp_nonce_field( 'product_director_meta_box', 'product_director_meta_box_nonce' );
  15.     // 获取之前存储的值
  16.     $value = get_post_meta( $post->ID, '_product_director', true );
  17. ?>
  18.     <label for="product_director"></label>
  19.     <input type="text" id="product_director" name="product_director" value="<?php echo esc_attr( $value ); ?>" placeholder="输入产品价格">
  20. <?php
  21. }
  22. add_action( 'save_post', 'product_director_save_meta_box' );
  23. function product_director_save_meta_box($post_id){
  24.     if ( ! isset( $_POST['product_director_meta_box_nonce'] ) ) {
  25.         return;
  26.     }
  27.     if ( ! wp_verify_nonce( $_POST['product_director_meta_box_nonce'], 'product_director_meta_box' ) ) {
  28.         return;
  29.     }
  30.     if ( ! current_user_can( 'edit_post', $post_id ) ) {
  31.         return;
  32.     }
  33.     if ( ! isset( $_POST['product_director'] ) ) {
  34.         return;
  35.     }
  36.     $product_director = sanitize_text_field( $_POST['product_director'] );
  37.     update_post_meta( $post_id, '_product_director', $product_director );
  38. }
  39. add_action("manage_posts_custom_column",  "product_custom_columns");
  40. add_filter("manage_edit-product_columns", "product_edit_columns");
  41. function product_custom_columns($column){
  42.     global $post;
  43.     switch ($column) {
  44.         case "product_director":
  45.             echo get_post_meta( $post->ID, '_product_director', true );
  46.             break;
  47.     }
  48. }
  49. function product_edit_columns($columns){
  50.     $columns['product_director'] = '产品价格';
  51.     return $columns;
  52. }

WordPress 自定义文章添加自定义字段面板

已有 700 人购买
查看演示升级 VIP立刻购买

收藏
(1)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!