WordPress中添加Add_Meta_Box使用方法

2024-09-07 00:51:46

字体：大中小

来源：转载

供稿：网友

Add_Meta_Box是从wordpress2.5以来出的一个插件了,我们可以利用它来实现添加meta模块了,具体来看一些例子,希望对各位有帮助.

描述:add_meta_box() 函数是在 WordPress 2.5 添加的,用来给插件开发者添加 Meta模块到管理界面.

用法:

<?php

add_meta_box( $id, $title, $callback, $post_type, $context,$priority, $callback_args );

?>

参数:

$id（字符串）（必需）Meta模块的 HTML“ID”属性

$title（字符串）（必需）Meta模块的标题，对用户可见

$callback（回调）（必需）为Meta模块输出 HTML代码的函数

$post_type（字符串）（必需）显示Meta模块的文章类型，可以是文章（post）、页面（page）、链接（link）、附件（attachment）或自定义文章类型（自定义文章类型的别名）

$context（字符串）（可选）Meta模块的显示位置（'normal','advanced', 或 'side'）

默认值：'advanced'

$priority:（字符串）（可选）Meta模块显示的优先级别（'high', 'core', 'default'or 'low'）

默认值: 'default'

$callback_args:（数组）（可选）传递到 callback 函数的参数。callback 函数将接收 $post 对象和其他由这个变量传递的任何参数。

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

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

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

function add_rating_meta_box($post_type, $post) {

    // 需要哪些post type添加推荐指数 Meta Box

    $types = array( 'post', 'page' );



    foreach ( $types as $type ) {

        add_meta_box(

            'rating_meta_box_id', // Meta Box在前台页面中的id，可通过JS获取到该Meta Box

            '推荐指数', // 显示的标题

            'render_rating_meta_box', // 回调方法，用于输出Meta Box的HTML代码

            $type, // 在哪个post type页面添加

            'side', // 在哪显示该Meta Box

            'default' // 优先级

        ); //开源软件:Vevb.com

    }

}

add_action( 'add_meta_boxes', 'add_rating_meta_box' );

这里我们在$types数组中定义了Post和Page都需要推荐指数这个自定义字段,然后告诉WordPress使用“render_rating_meta_box”方法来渲染Meta Box,位置在侧边栏(side),因为内容不多,所以侧边栏足够,若内容较多,可以将“side”改为“advanced”,这样就会在主内容区域渲染Meta Box.

接下来看看是如何渲染的,代码如下:

function render_rating_meta_box( $post ) {

    // 添加 nonce 项用于后续的安全检查

    wp_nonce_field( 'rating_nonce_action', 'rating_nonce_name' );

    // 获取推荐指数的值

    $rating_key = 'rating';

    $rating_value = get_post_meta( $post->ID, $rating_key, true );

    $rating_value = (int)$rating_value;

    $html = '<select name="rating_field">';

    for ($i = 0; $i <= 10; $i++) {

        $selected = '';

        if ($i == $rating_value) {

            $selected = 'selected="selected"';

        }//开源软件:Vevb.com

        $html .= sprintf('<option value="%s" %s>%s星</option>', $i, $selected, $i/2);

    }

    $html .= '</select>';

    echo $html;

}

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

最后,当文章被保存时,需要将推荐指数也保存起来,代码如下:

function save_rating_post_data( $post_id ) {

    // 检查nonce是否设置

    if (!isset($_POST['rating_nonce_name'])) {

        return $post_id;

    }

    $nonce = $_POST['rating_nonce_name'];

    // 验证nonce是否正确

    if (!wp_verify_nonce( $nonce, 'rating_nonce_action')) {

        return $post_id;

    }

    // 如果是系统自动保存，则不操作

    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {

        return $post_id;

    }



    // 检查用户权限

    if ($_POST['post_type'] == 'post') {

        if (!current_user_can('edit_post', $post_id )) {

            return $post_id;

        }

    }

    $rating_key = 'rating';

    // 获取数据

    $rating_value = $_POST['rating_field'];

    // 更新数据

    update_post_meta( $post_id, $rating_key, $rating_value );

}

add_action( 'save_post', 'save_rating_post_data' );

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

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

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

// 原来的代码

$rating_key = 'rating';

// 改后的代码

$rating_key = '_rating';

添加meta box 来上传图片

1.首先要支持图片的上传,要在functions.php中加入一下代码:

function my_add_edit_form_multipart_encoding() {

echo ' enctype="multipart/form-data"';

}

add_action('post_edit_form_tag', 'my_add_edit_form_multipart_encoding');

2.然后安装meta box,代码如下:

function my_setup_meta_boxes() {

add_meta_box('my_image_box', 'Upload Image', 'my_render_image_attachment_box', 'page', 'normal', 'high');//这个地方的参数大家可以去官方网站查看，我只是要说明一下第4个参数，如果想让post支持就填写post如果是page就填写page，如果是自定义类型就填写自定义类型的名称

}

add_action('admin_init','my_setup_meta_boxes');

3.添加回调函数,代码如下:

function my_render_image_attachment_box($post) {

    // 显示添加的图片

    $existing_image_id = get_post_meta($post->ID,'_my_attached_image', true);

    if(is_numeric($existing_image_id)) {

        echo '<div>';

            $arr_existing_image = wp_get_attachment_image_src($existing_image_id, 'large');

            $existing_image_url = $arr_existing_image[0];

            echo '<img src="' . $existing_image_url . '" />';

        echo '</div>';

    }

    // 如果已经上传了图片就提示

    if($existing_image) {

        echo '<div>Attached Image ID: ' . $existing_image . '</div>';

    }

    echo 'Upload an image: <input type="file" name="my_image" id="my_image" />';

    // 获得图片的状态

    $status_message = get_post_meta($post->ID,'_my_attached_image_upload_feedback', true);

    // 显示图片状态

    if($status_message) {

        echo '<div class="upload_status_message">';

            echo $status_message;

        echo '</div>';

    }

    // 自动保存

    echo '<input type="hidden" name="my_manual_save_flag" value="true" />';

}

4.图片的更新,代码如下:

function my_update_post($post_id, $post) {

//获得图片类型

    $post_type = $post->post_type;

    if($post_id && isset($_POST['my_manual_save_flag'])) {

        switch($post_type) {

            case 'page':

                if(isset($_FILES['my_image']) && ($_FILES['my_image']['size'] > 0)) {

                    $arr_file_type = wp_check_filetype(basename($_FILES['my_image']['name']));

                    $uploaded_file_type = $arr_file_type['type'];

                    $allowed_file_types = array('image/jpg','image/jpeg','image/gif','image/png');

                    if(in_array($uploaded_file_type, $allowed_file_types)) {

                        $upload_overrides = array( 'test_form' => false );

                        $uploaded_file = wp_handle_upload($_FILES['my_image'], $upload_overrides);

                        if(isset($uploaded_file['file'])) {

                            $file_name_and_location = $uploaded_file['file'];

                            $file_title_for_media_library = 'your title here';

                            $attachment = array(

                                'post_mime_type' => $uploaded_file_type,

                                'post_title' => 'Uploaded image ' . addslashes($file_title_for_media_library),

                                'post_content' => '',

                                'post_status' => 'inherit'

                            );

                            $attach_id = wp_insert_attachment( $attachment, $file_name_and_location );

                            require_once(ABSPATH . "wp-admin" . '/includes/image.php');

                            $attach_data = wp_generate_attachment_metadata( $attach_id, $file_name_and_location );

                            wp_update_attachment_metadata($attach_id,  $attach_data);

                            $existing_uploaded_image = (int) get_post_meta($post_id,'_my_attached_image', true);

                            if(is_numeric($existing_uploaded_image)) {

                                wp_delete_attachment($existing_uploaded_image);

                            }

                            update_post_meta($post_id,'_my_attached_image',$attach_id);

                            $upload_feedback = false;

                        } else {

                            $upload_feedback = 'There was a problem with your upload.';

                            update_post_meta($post_id,'_my_attached_image',$attach_id);

                        }

                    } else {

                        $upload_feedback = 'Please upload only image files (jpg, gif or png).';

                        update_post_meta($post_id,'_my_attached_image',$attach_id);

                    }

                } else {

                    $upload_feedback = false;

                }

                update_post_meta($post_id,'_my_attached_image_upload_feedback',$upload_feedback);

            break;

            default:

        }

    return;

}

    return;

}

add_action('save_post','my_update_post',1,2);