作为 WordPress 管理员，如何更改用户的个人资料照片？

Question

我是我网站的管理员，但我无法更改任何用户的个人资料照片。它似乎只与 Gravatar 连接。

我该如何制作才能自己更改这张照片？有一个函数可以做到这一点吗？我宁愿没有一个完整的插件来做到这一点。

Answer 1

默认情况下，WordPress 使用 Gravatar 根据您在 Gravatar 注册的电子邮件 ID 显示用户\xe2\x80\x99s 个人资料图片。WordPress 在仪表板中有用户个人资料页面，其中包含用于输入用户数据的多个字段，但缺少用于添加自定义用户头像的图像字段。

\n\n

我们可以通过以下步骤自定义用户头像：

\n\n

第 1 步：将脚本添加到页面。

\n\n

在此步骤中，我们将向管理页面添加必要的 Javascript。首先，我们将调用 wp_enqueue_media ，它将使用所有媒体 JavaScript API 所需的所有脚本、样式、设置和模板排入队列。

\n\n

另一个脚本将用于在单击按钮时打开媒体上传器并在 DOM 中插入附件 ID。

\n\n

请将以下脚本复制到文件中并将该文件命名为 uploader.js

\n\n

    jQuery( document ).ready( function() {\n\n    /* WP Media Uploader */\n    var _shr_media = true;\n    var _orig_send_attachment = wp.media.editor.send.attachment;\n\n    jQuery( \'.shr-image\' ).click( function() {\n\n        var button = jQuery( this ),\n                textbox_id = jQuery( this ).attr( \'data-id\' ),\n                image_id = jQuery( this ).attr( \'data-src\' ),\n                _shr_media = true;\n\n        wp.media.editor.send.attachment = function( props, attachment ) {\n\n            if ( _shr_media && ( attachment.type === \'image\' ) ) {\n                if ( image_id.indexOf( "," ) !== -1 ) {\n                    image_id = image_id.split( "," );\n                    $image_ids = \'\';\n                    jQuery.each( image_id, function( key, value ) {\n                        if ( $image_ids )\n                            $image_ids = $image_ids + \',#\' + value;\n                        else\n                            $image_ids = \'#\' + value;\n                    } );\n\n                    var current_element = jQuery( $image_ids );\n                } else {\n                    var current_element = jQuery( \'#\' + image_id );\n                }\n\n                jQuery( \'#\' + textbox_id ).val( attachment.id );\n                                console.log(textbox_id)\n                current_element.attr( \'src\', attachment.url ).show();\n            } else {\n                alert( \'Please select a valid image file\' );\n                return false;\n            }\n        }\n\n        wp.media.editor.open( button );\n        return false;\n    } );\n} );\n

\n\n

现在，在管理中添加任何脚本，如下所示。

\n\n

function shr_add_admin_scripts(){ \n        wp_enqueue_media();\n        wp_enqueue_script(\'shr-uploader\', get_stylesheet_directory_uri().\'/js/uploader.js\', array(\'jquery\'), false, true );\n    }\n    add_action(\'admin_enqueue_scripts\', \'shr_add_admin_scripts\');\n

\n\n

请注意，uploader.js 保存在该主题的 js 文件夹中，因此您必须根据 uploader.js 在您的主题中的位置应用正确的路径。

\n\n

第 2 步：添加上传者按钮以编辑个人资料页面。

\n\n

function shr_extra_profile_fields( $user ) {\n\n    $profile_pic = ($user!==\'add-new-user\') ? get_user_meta($user->ID, \'shr_pic\', true): false;\n\n    if( !empty($profile_pic) ){\n        $image = wp_get_attachment_image_src( $profile_pic, \'thumbnail\' );\n\n    } ?>\n\n    <table class="form-table fh-profile-upload-options">\n        <tr>\n            <th>\n                <label for="image"><?php _e(\'Main Profile Image\', \'shr\') ?></label>\n            </th>\n\n            <td>\n                <input type="button" data-id="shr_image_id" data-src="shr-img" class="button shr-image" name="shr_image" id="shr-image" value="Upload" />\n                <input type="hidden" class="button" name="shr_image_id" id="shr_image_id" value="<?php echo !empty($profile_pic) ? $profile_pic : \'\'; ?>" />\n                <img id="shr-img" src="<?php echo !empty($profile_pic) ? $image[0] : \'\'; ?>" style="<?php echo  empty($profile_pic) ? \'display:none;\' :\'\' ?> max-width: 100px; max-height: 100px;" />\n            </td>\n        </tr>\n    </table><?php\n\n}\nadd_action( \'show_user_profile\', \'shr_extra_profile_fields\' );\nadd_action( \'edit_user_profile\', \'shr_extra_profile_fields\' );\nadd_action( \'user_new_form\', \'shr_extra_profile_fields\' );\n

\n\n

在上面的代码中，show_user_profile、edit_user_profile 和 user_new_form 挂钩用于添加上传按钮，以便该按钮对现有 user\xe2\x80\x99s 个人资料页面以及创建新用户时可见。

\n\n

输入按钮用于单击打开 WordPress 媒体上传器。\n输入隐藏字段用于存储从 WordPress 媒体上传器插入或选择的图像的附件 ID。

\n\n

步骤 3：将附件图像 ID 保存到 WordPress 中的 usermeta 表中。

\n\n

WordPress中的Usermeta表用于存储与用户相关的额外信息，这里我们将存储用户图像的附件ID。使用该附件 ID，我们可以获取相关图像的所有数据。

\n\n

为了保存附件 ID，我们将使用 profile_update 和 user_register 钩子，当创建任何新用户或更新现有用户时，它们将被触发。

\n\n

function shr_profile_update($user_id){\n\n    if( current_user_can(\'edit_users\') ){\n        $profile_pic = empty($_POST[\'shr_image_id\']) ? \'\' : $_POST[\'shr_image_id\'];\n        update_user_meta($user_id, \'shr_pic\', $profile_pic);\n    }\n\n}\nadd_action(\'profile_update\', \'shr_profile_update\');\nadd_action(\'user_register\', \'shr_profile_update\');\n

\n\n

那\xe2\x80\x99s它，你已经成功地将个人资料图片上传按钮添加到WordPress仪表板中的个人资料页面。

\n\n

参考： http: //sharethingz.com/wordpress/custom-user-avatar-in-wordpress/

\n