如何自定义wooccommerce帐户的上传图像字段

我试图在wooccommerce帐户设置部分添加一个图像字段，以便用户可以上传他们的头像。

在这里对stack进行了一些研究后，我遇到了一个有效的问题，并为我的问题提供了解决方案：在我的帐户上添加个人资料图片(文件上传(>在WooCommerce 中编辑帐户

然而，也出现了其他问题，我曾考虑扩大问题范围，以改善最终结果，因为我认为这是一种非常常见的情况。

所以我希望有人能回答这个问题。

上传的图片不会出现在帖子评论部分或wooccommerce产品评论中吗？我们需要为此更改元image吗？能够在网站上的任何地方查看上传的图像，包括评论和评论部分，这将非常有用。
如果用户想删除图像并返回默认值，他该怎么做？没有删除图像按钮。有没有办法插入一个按钮并删除上传的图像？
有没有办法设置上传限制？例如，上传的图像必须是jpeg或png，并且大小不得超过1mb。
最大的问题是保存图像的目录，它会与默认的媒体库不同吗？此外，当用户更改多个图像时，前一个图像不会被删除，并且将永远保留在媒体库中，不必要地占用空间。

我相信这些问题的答案完成了wooccommerce世界默认情况下所缺乏的东西。这可能是大多数用户的标准解决方案。

为了方便起见，我报告了上一个问题的代码：

// Add field
function action_woocommerce_edit_account_form_start() {
?>
<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
<label for="image"><?php esc_html_e( 'Image', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label>
<input type="file" class="woocommerce-Input" name="image" accept="image/x-png,image/gif,image/jpeg">
</p>
<?php
}
add_action( 'woocommerce_edit_account_form_start', 'action_woocommerce_edit_account_form_start' );
// Validate
function action_woocommerce_save_account_details_errors( $args ){
if ( isset($_POST['image']) && empty($_POST['image']) ) {
$args->add( 'image_error', __( 'Please provide a valid image', 'woocommerce' ) );
}
}
add_action( 'woocommerce_save_account_details_errors','action_woocommerce_save_account_details_errors', 10, 1 );
// Save
function action_woocommerce_save_account_details( $user_id ) {  
if ( isset( $_FILES['image'] ) ) {
require_once( ABSPATH . 'wp-admin/includes/image.php' );
require_once( ABSPATH . 'wp-admin/includes/file.php' );
require_once( ABSPATH . 'wp-admin/includes/media.php' );
$attachment_id = media_handle_upload( 'image', 0 );
if ( is_wp_error( $attachment_id ) ) {
update_user_meta( $user_id, 'image', $_FILES['image'] . ": " . $attachment_id->get_error_message() );
} else {
update_user_meta( $user_id, 'image', $attachment_id );
}
}
}
add_action( 'woocommerce_save_account_details', 'action_woocommerce_save_account_details', 10, 1 );
// Add enctype to form to allow image upload
function action_woocommerce_edit_account_form_tag() {
echo 'enctype="multipart/form-data"';
} 
add_action( 'woocommerce_edit_account_form_tag', 'action_woocommerce_edit_account_form_tag' );

显示图像(可以在任何地方使用，只要你调整所需的挂钩(

// Display
function action_woocommerce_edit_account_form() {
// Get current user id
$user_id = get_current_user_id();
// Get attachment id
$attachment_id = get_user_meta( $user_id, 'image', true );
// True
if ( $attachment_id ) {
$original_image_url = wp_get_attachment_url( $attachment_id );
// Display Image instead of URL
echo wp_get_attachment_image( $attachment_id, 'full');
}
} 
add_action( 'woocommerce_edit_account_form', 'action_woocommerce_edit_account_form' );

// Save
function action_woocommerce_save_account_details( $user_id ) {  
if ( isset( $_FILES['image'] ) ) {
require_once( ABSPATH . 'wp-admin/includes/image.php' );
require_once( ABSPATH . 'wp-admin/includes/file.php' );
require_once( ABSPATH . 'wp-admin/includes/media.php' );
function wp_set_custom_upload_folder($uploads) {
$uploads['path'] = $uploads['basedir'] . '/custom-folder';
$uploads['url'] = $uploads['baseurl'] . '/custom-folder';    
if (!file_exists($uploads['path'])) {
mkdir($uploads['path'], 0755, true);
}
return $uploads;
}
add_filter('upload_dir', 'wp_set_custom_upload_folder');    


$attachment_id = media_handle_upload( 'image', 0 );
if ( is_wp_error( $attachment_id ) ) {
update_user_meta( $user_id, 'image', $_FILES['image'] . ": " . $attachment_id->get_error_message() );
} else {
$old_attachment_id = get_user_meta( $user_id, 'image', true );
wp_delete_attachment($old_attachment_id);
update_user_meta( $user_id, 'image', $attachment_id );
}
}
}
add_action( 'woocommerce_save_account_details', 'action_woocommerce_save_account_details', 10, 1 );

为配置文件图像上传设置自定义上传目录

//显示功能

function action_woocommerce_edit_account_form() {
// Get current user id
$user_id = get_current_user_id();
// Get attachment id
$attachment_id = get_user_meta($user_id, 'image', true);
// True
if ($attachment_id) {
$original_image_url = wp_get_attachment_url($attachment_id);
// Display Image instead of URL
echo wp_get_attachment_image($attachment_id, 'full');
if (isset($_GET['rm_profile_image_id'])) {
if ($attachment_id == $_GET['rm_profile_image_id']) {
wp_delete_attachment($attachment_id);
delete_user_meta($user_id, 'image');
?> <script>
window.location='<?php echo wc_get_account_endpoint_url('edit-account') ?>';
</script> 
<?php
exit();
}
} else {
echo '<a href=' . wc_get_account_endpoint_url('edit-account') . '?rm_profile_image_id=' . $attachment_id . '> ' . __('Remove') . ' </a>';
}
}
}

当我有空闲时间时，我想解决这些问题。我不太擅长代码，我只是一个粉丝，但通过学习、研究和实践，我希望能为这个话题做出自己的贡献。

每次找到新的解决方案时，我都会发布此答案进行更新。我相信有人可以提供更有效的解决方案，因此欢迎对主题进行更正和回答。

问题n1的解决方案-将上传的图像设置在网站上的任何位置

设置get_avatar过滤器(负责在网站的评论部分和其他部分显示头像(，并为其分配存储在imagemeta_key中的url。

add_filter( 'get_avatar', 'my_custom_avatar', 10, 6 );
function my_custom_avatar( $avatar, $id_or_email, $size, $default, $alt, $args ) {

// What is the custom image field's meta key?
// Set this value to match the meta key of your custom image field.
$meta_key = "image";

// Nothing really to change below here, unless
// you want to change the <img> tag HTML.
$user = false;
if ( is_numeric( $id_or_email ) ) {
$user = get_user_by( 'id' , (int)$id_or_email );
} 

elseif ( is_object( $id_or_email ) ) {
if ( ! empty( $id_or_email->user_id ) ) {
$id = (int)$id_or_email->user_id;
$user = get_user_by( 'id' , $id );
}
} else {
$user = get_user_by( 'email', $id_or_email );    
}
if ( $user && is_object( $user ) ) {
$post_id = get_user_meta( $user->ID, $meta_key, true );
if ( $post_id ) {
$attachment_url = wp_get_attachment_url( $post_id );

// HTML for the avatar <img> tag.  This is WP default.
$avatar = wp_get_attachment_image($post_id, $size = array('50', '50'));
}
}
return $avatar;
}

问题n3的解决方案-设置文件的大小限制

由于这个问题限制文件上传的大小(html输入元素(，我找到了以字节为单位限制文件大小的解决方案。我是这么做的：

我为输入类型文件分配了idfile

<input id="file" type="file" class="woocommerce-Input" name="image" accept="image/x-png,image/gif,image/jpeg">

然后我应用了下面的脚本

/* Limit File Size for Avatar Upload (size in bytes) */
var uploadField = document.getElementById("file");
uploadField.onchange = function() {
// Put size in Bytes
if(this.files[0].size > 100000){
alert("File is too big!");
this.value = "";
};
};

@muju提供的代码看起来很有前景，但请考虑以下几点：

在第一个代码的else块后面添加remove_filter。否则，所有网站上传都将发生在该目录中

要执行此操作，请使用：

remove_filter('upload_dir', 'wp_set_custom_upload_folder');

在其他块之后。

第二个代码应该检查用户元是否已成功删除。delete_user_meta行($user_id，'image'(；如果条件是这样的，应该包装：

if (delete_user_meta($user_id, 'image')){
wp_delete_attachment($attachment_id);
}

这样，您就不会先删除图像，并使其无法用于失败的delete_user_meta。

问题n1的解决方案-将上传的图像设置在网站上的任何位置

问题n3的解决方案-设置文件的大小限制

相关内容

最新更新

热门标签：