如何自定義woocommerce賬號的上傳圖片字段？

Question

我試圖將圖像字段添加到 woocommerce 帳戶設置部分，以便用戶可以上傳他們的頭像。

通過對堆棧的一些研究，我遇到了這個問題並解決了我的問題： 在我的帳戶中添加個人資料圖片（文件上傳）>在 WooCommerce 中編輯帳戶

但是，出現了其他問題，我考慮過擴展問題以嘗試改善最終結果，因為我認為這是一種非常常見的情況。

所以我希望有人能回答這個問題。

1. 上傳的圖片不會出現在帖子評論部分或 woocommerce 產品評論中嗎？ 我們需要為此更改元image嗎？ 能夠在網站的任何位置（包括評論和評論部分）查看上傳的圖像將非常有用。

2. 如果用戶想刪除圖像並將 go 恢復為默認值，他該怎么辦？ 沒有刪除圖像按鈕。 有沒有辦法插入按鈕並刪除上傳的圖像？

3. 有沒有辦法設置上傳限制？ 例如，上傳的圖片必須是 jpeg 或 png，並且大小不得超過 1mb。

4. 最大的問題是圖片保存的目錄，能不能和默認的媒體庫不一樣？ 此外，當用戶更改多個圖像時，前一個圖像不會被刪除，並將永遠保留在媒體庫中，不必要地占用空間。

我相信這些問題的答案完成了 woocommerce 世界默認缺乏的東西。 這可能是大多數用戶的標准解決方案。

為方便起見，我把上一題的代碼報上來：

// 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' );

Answer 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' );

        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

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>';
        }
    }
}

Answer 2

@mujuonly 提供的代碼看起來很有希望，但是，請考慮以下幾點：

1. 在第一個代碼中的 else 塊之后添加一個 remove_filter 。 否則所有網站上傳都將發生在該目錄中。

為此，請使用：

remove_filter('upload_dir', 'wp_set_custom_upload_folder');

在 else 塊之后。

第二個代碼應該檢查用戶元數據是否被成功刪除。 行 delete_user_meta($user_id, 'image'); 應該像這樣包裹在 if 條件中：

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

這樣您就不會先刪除圖像並使其對失敗的 delete_user_meta 不可用。

Answer 3

當我有空閑時間時，我想研究這些問題。 我對代碼不是很好，我只是一個粉絲，但通過學習、研究和實踐，我希望能為這個話題做出貢獻。

每次找到新解決方案時，我都會發布此答案以更新它。 我相信有人可以提供更有效的解決方案，因此歡迎改進主題的更正和答案。

---

問題n1的解決方案——將上傳的圖片設置在網站的任意位置

設置 get_avatar 過濾器（負責在評論部分和網站其他部分顯示頭像）並為其分配存儲在image meta_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輸入元素） ，我找到了限制文件大小（以字節為單位）的解決方案。 所以這就是我所做的：

我為輸入類型文件分配了 id file

<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 = "";
    };
};