在开发 WordPress 用户中心的时候，我们需要让用户在前段上传自定义图片作为头像，因为很多用户都是小白，上传头像之前要求他们按照尺寸裁剪好是不大现实的。为了提升用户体验，我研究测试了很久，终于搞定了让 WordPress 用户在前段上传图片并裁剪的功能。上传图片用了 jQuery Ajax Upload 插件，裁剪功能用了 jQuery Jcorp，都是比较成熟，并且浏览器兼容性较好的 jQuery 插件。功能的使用效果如下图。

WordPress 使用 jcorp 裁剪图片作为自定义头像

上传并裁剪图片用到的功能函数

处理上传的图片用到了 Github 上找到的一个 WordPress 上传辅助类 MediaUpload，其他的处理函数用到了 WordPress 为我们提供的以下几个函数：

update_user_meta：添加或更新用户自定义字段，主要用来添加上传的图片为用户头像

wp_get_attachment_url：获取用户头像的src地址

wp_get_attachment_metadata：获取上传的图片的meta信息，用来进一步处理裁剪图片

wp_upload_dir：获取WordPress的上传目录，保存裁剪后的图片的时候需要用到

wp_get_image_editor：获取图片编辑器，裁剪图片主要就是使用的这个功能

保存使用Ajax方式上传的图片

这一步使用了 MediaUpload 类，比较简单，只需要新建一个MediaUpload实例，然后把 Ajax 传过来的图片名称赋值给这个实例就可以了。保存后会返回一个图片附件 ID，把这个 ID 作为用户自定义头像字段的值保存到数据库里面就可以了。

// 引入上传图片辅助类

include_once( 'MediaUpload.php' );

/*Ajax上传图片*/

add_action( 'wp_ajax_upload', 'ajax_upload' );

add_action( 'wp_ajax_nopriv_upload', 'ajax_upload' );

function ajax_upload() {

$current_user = wp_get_current_user();

$uid = $current_user->ID;

$tmp = new MediaUpload;

if ( $_FILES ) {

foreach ( $_FILES as $file => $array ) {

$newupload = $tmp->saveUpload( $field_name=$file );

}

}

update_user_meta($uid, 'cus_avatar', $newupload['attachment_id']);

$res = array(

'id' => $newupload['attachment_id'],

'url' => wp_get_attachment_url($newupload['attachment_id'])

);

echo json_encode($res);

die(); //停止执行

}

使用 Jcorp 裁剪原始图片并保存到 WordPress 上传目录

这一步的难点在于获取图片名称和上传目录，很多朋友可能会在这里遇到问题，我也是尝试了很久才测试成功的，下面的代码是我测试过的，可以直接拿去用。

/*Ajax上传图片*/

add_action( 'wp_ajax_subcorp', 'subcorp_img' );

add_action( 'wp_ajax_nopriv_subcorp', 'subcorp_img' );

function subcorp_img() {

/*获取用户id*/

$current_user = wp_get_current_user();

$uid = $current_user->ID;

/*获取上传的字段*/

$src1 = $_POST["goods_img"];

$src_x = $_POST["x"];

$src_y = $_POST["y"];

$src_w = $_POST["w"];

$src_h = $_POST["h"];

/*获取上传目录名和文件名*/

$wp_upload_dir = wp_upload_dir();

$img_meta = wp_get_attachment_metadata($src1);

$img_file = $wp_upload_dir['basedir'] . '/' . $img_meta['file'];

/*保存裁剪后的图片到上传目录*/

$image = wp_get_image_editor( $img_file );

if ( ! is_wp_error( $image ) ) {

$image->crop( $src_x, $src_y, $src_w, $src_h, $dst_w = $src_w, $dst_h = $src_h, $src_abs = false );

$new_name = $image->generate_filename();

$image->save($new_name);

}

// 获取图片扩展名

$filetype = wp_check_filetype( basename( $new_name ), null );

// 准备插入附件

$attachment = array(

'guid' => $wp_upload_dir['url'] . '/' . basename( $new_name ),

'post_mime_type' => $filetype['type'],

'post_title' => preg_replace( '/\.[^.]+$/', '', basename( $new_name ) ),

'post_content' => '',

'post_status' => 'inherit'

);

// 插入附件，并更新自定义头像字段

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

update_user_meta($uid, 'cus_avatar', $attach_id);

$corped_url = wp_get_attachment_url($attach_id);

echo $corped_url;

exit;

}

除了上传自定义头像，本文介绍的方法同样可以用在前端上传文章缩略图或文章相册上面，只需要稍作改动就可以了。因为前端部分基本上不涉及 WordPress，在这里就不再做介绍了，有能力的朋友可以直接参照上面提到的两个 jQuery 插件的文档使用。如果对本文有什么疑问或更好的看法，欢迎在评论中提出交流，如果你觉得自己实现上面的功能比较吃力或者太浪费使用，欢迎联系 WordPress 智库定制开发。