php - 在我的帐户中添加个人资料图片(文件上传)> 在 WooCommerce 中编辑帐户
问题描述
我想添加一个上传个人资料图像字段并将其保存在我的帐户 > 编辑帐户中,而无需在 woocommerce 中使用任何插件。
我添加了以下代码functions.php
以在我的帐户页面上添加个人资料图片。
add_action( 'woocommerce_edit_account_form', 'add_profile_imageto_edit_account_form' );
function add_profile_imageto_edit_account_form() {
$user = wp_get_current_user();
?>
<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
<label for="favorite_color"><?php _e( 'Upload Profile Photo', 'woocommerce' ); ?> </label>
<input type="file" name="profile_image" id="profile_image" placeholder="Upload Profile Photo" />
</p>
<?php
}
向我建议任何人如何保存此数据并在编辑帐户页面中显示保存的数据。
解决方案
您有 3 个选项来显示新字段
- 作为使用钩子的第一个字段
woocommerce_edit_account_form_start
(在我的代码中使用) woocommerce_edit_account_form
在使用钩子的现有字段之后- 在特定位置,覆盖
myaccount/form-edit-account.php
模板文件。
使用的功能:显示图像。
wp_get_attachment_url
- 检索附件的 URL。wp_get_attachment_image
- 获取代表图像附件的 HTML img 元素
可能需要额外的布局 CSS
// 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' ); ?> <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' );
推荐阅读
- python - python scikit-learn:搜索树后如何修改 LeafNode 的数据
- javascript - 如何使用 SSR 完全预加载 React 站点?
- office365 - GroupsActivityDetail 报告中缺少 GroupID
- php - 如何制作双循环来填充回显语句
- android - xamarin android“保留数据/缓存”不起作用
- haskell - Haskell 仆人:多部分上传的 Swagger 描述
- typescript - 环回 4 中数据模型的嵌套对象反序列化异常
- ssas - 在 Excel 数据透视表“更多字段”中显示 SSAS 维度属性
- python - Python/Pandas - 如何调整 auto_arima 模型参数以获得未来预测
- java - 如何增加对象列表中的整数字段