Bài viết được sự cho phép của tác giả Võ Quang Huy
Chào mọi người! Ở trong bài viết trước mình đã hướng dẫn các bạn xây dựng được trang thông tin người dùng. Trong bài viết này, mình sẽ hướng dẫn các bạn code thêm chức năng thay đổi avatar người dùng WordPress.
Chức năng upload hình ảnh
Khi người dùng muốn thay đổi hình ảnh đại diện, thì trước tiên người dùng phải upload được hình ảnh.
Bạn hãy thêm đoạn code upload hình ảnh dưới đây của mình vào file functions.php của theme bạn nhé.
function hk_user_upload_image( $file = array() ) {
require_once( ABSPATH . 'wp-admin/includes/admin.php' );
$file_return = wp_handle_upload( $file, array('test_form' => false ) );
if ( isset( $file_return['error'] ) || isset( $file_return['upload_error_handler'] ) ) {
return false;
} else {
$filename = $file_return['file'];
$attachment = array(
'post_mime_type' => $file_return['type'],
'post_title' => preg_replace( '/.[^.]+$/', '', basename( $filename ) ),
'post_content' => '',
'post_status' => 'inherit',
'guid' => $file_return['url']
);
$attachment_id = wp_insert_attachment( $attachment, $file_return['url'] );
require_once( ABSPATH . 'wp-admin/includes/image.php' );
$attachment_data = wp_generate_attachment_metadata( $attachment_id, $filename );
wp_update_attachment_metadata( $attachment_id, $attachment_data );
if ( 0 < intval( $attachment_id ) ) {
return array(
'url' => $file_return['url'],
'id' => $attachment_id
);
}
}
return false;
}
Bạn có thể đọc qua đoạn và tìm hiểu trên tài liệu của WordPress các hàm mình đã sử dụng.
Nếu bạn không hiểu, bạn chỉ cần quan tâm function trên sẽ hỗ trợ người dùng upload hình ảnh ở bên ngoài giao diện. Và giá trị trả về của function trên là một array gồm:
- url: Đường dẫn của hình ảnh sau khi đã được tải lên thư viện media của WordPress
- id: ID của hình ảnh
Tạo trang thay đổi avatar người dùng
Phần này sẽ giống như những bài viết trước trong series Custom tài khoản WordPress. Mình sẽ tạo một page có tiêu đề là Thay đổi avatar và đường dẫn là domain/thay-doi-avatar. Sau khi tạo page xong mình sẽ tạo một file PHP trong theme của mình có tên là page-thay-doi-avatar.
Sau khi hoàn thành các bước trên, các bạn hãy copy đoạn code dưới đây vào file PHP các bạn vừa mới tạo nhé.
<?php get_header(); ?>
<main id="site-content">
<div class="section-inner">
<?php
if ( ! is_user_logged_in() ) {
echo 'Bạn chưa đăng nhập. Vui lòng <a href="/dang-nhap">đăng nhập</a>.';
} else {
$current_user = wp_get_current_user();
?>
<h1><?php the_title(); ?></h1>
<hr>
<form id="hk-change-avatar">
<?php wp_nonce_field( 'form_change_avatar' ); ?>
<p id="hk-success" style="display:none">Cập nhập thành công</p>
<p>
<?php
$user = wp_get_current_user();
$custom_avatar = get_user_meta( $user->ID, 'custom_avatar', true );
if ( $custom_avatar ) {
echo '<img src="'.$custom_avatar.'" class="custom_avatar" />';
} else {
echo '<img src="'.get_avatar_url($user->ID).'" class="custom_avatar" />';
}
?>
</p>
<p>
<input type="file" id="upload_avatar" accept="image/*" required>
</p>
<p>
<button type="submit">Xác nhận</button>
</p>
</form>
<?php } ?>
</div>
</main>
<?php get_footer(); ?>
Đây là giao diện các bạn sẽ nhận được khi sử dụng đoạn code trên. Bạn có thể sử dụng CSS để thay đổi lại sao cho đẹp hơn tuỳ vào bạn nhé.
Như mọi khi, mình đang sử dụng theme twentytwenty nên giao diện có thể sẽ khác bạn. Đừng lo lắng nhé.
Giải thích một chút
Giống như các bài viết cũ. Ở đây mình cũng sử dụng câu lệnh điều kiện ở dòng 7 để kiểm tra người dùng đã đăng nhập chưa. Và ở dòng 19, mình vẫn tiếp tục sử dụng hàm wp_nonce_field với mục đích bảo mật.
Ở dòng 24, mình sử dụng hàm wp_get_current_user để lấy ra được thông tin của người dùng hiện tại đang đăng nhập. Từ đó mình sẽ lấy đựa ID người dùng và truyền vào trong hàm get_avatar_url. Hàm này sẽ trả về địa chỉ URL avatar mặc định của người dùng ở dòng 29.
Còn ở dòng 25, mình sẽ sử dụng một hàm đó là get_user_meta. Hàm này sẽ trả về một dữ liệu mà mình sẽ tạo ở phần tiếp theo, cụ thể mình sẽ tạo một user meta mới để lưu trữ URL avatar mà người dùng đã upload.
Từ dòng 26 đến 30 là mình sẽ dùng câu lệnh if else kiểm tra xem người dùng đã upload dữ liệu avatar mới chưa? Nếu chưa up thì sẽ hiển thị avatar mặc định của WordPress.
Còn lại chỉ là các thẻ HTML cơ bản. Các bạn có thể thay đổi lại layout cho phù hợp nhé.
Gửi dữ liệu lên server
Sau khi người dùng chọn ảnh từ máy tính và xác nhận, thì chúng ta phải gửi hình ảnh đó lên server. Như những bài viết trước, mình sẽ sử dụng AJAX để xử lý việc này. Nếu các bạn chưa tìm hiểu qua AJAX là gì thì có thể thao khảo các bài viết AJAX trong WordPress nhé.
Đoạn code dưới đây sẽ hỗ trợ bạn gửi dữ liệu lên server bằng AJAX. Hãy thêm vào file footer.php của theme bạn, nếu đã khai báo jQuery rồi thì xoá dòng đầu tiên đi.
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
(function($){
$(document).ready(function(){
var ajaxUrl = '<?php echo admin_url('admin-ajax.php'); ?>';
$('#hk-change-avatar').submit(function(e) {
e.preventDefault();
let fd = new FormData();
fd.append("upload_avatar", $("#upload_avatar")[0].files[0]);
fd.append("action", "change_user_avatar");
$.ajax({
type: "POST",
dataType: "json",
url: ajaxUrl,
data: fd,
contentType: false,
processData: false,
beforeSend: function () {},
success: function (response) {
if (response.success) {
$("#hk-change-avatar")[0].reset();
$('#hk-success').show();
$('.custom_avatar').attr('src', response.data)
}
},
});
});
});
})(jQuery);
</script>
Đừng bỏ lỡ việc làm Front-End hấp dẫn trên TopDev!
Xử lý dữ liệu trên server
Khi dữ liệu đã gửi lên server, thì tiếp theo chúng ta phải xử lý chúng. Các bạn hãy thêm đoạn code bên dưới đây vào file functions.php nhé.
add_action('wp_ajax_change_user_avatar', 'hk_change_user_avatar');
function hk_change_user_avatar() {
$file_upload = $_FILES['upload_avatar'];
$user_id = get_current_user_id();
$avatar_data = array();
if ( isset( $file_upload ) && $file_upload ) {
$avatar_data = hk_user_upload_image( $file_upload );
if ( $avatar_data ) {
$custom_avatar = get_user_meta( $user_id, 'custom_avatar', true );
if ( $custom_avatar ) {
update_user_meta( $user_id, 'custom_avatar', $avatar_data['url'] );
} else {
add_user_meta( $user_id, 'custom_avatar', $avatar_data['url'] );
}
wp_send_json_success( $avatar_data['url'], 200 );
}
}
die();
}
Giải thích một chút
Đầu tiên mình sẽ khai báo 3 biến. $file_upload là biến mình dùng để nhận file mà người dùng đã upload lên server. $user_id là biến mình dùng để lấy được ID của người dùng hiện tại dang đăng nhập. Ở đây mình sử dụng hàm get_current_user_id để làm điều đó. Còn biến $avatar_data sẽ là một mảng, nó sẽ nhận giá trị trả về của chức năng upload hình ảnh mà mình đã đề cập ở phần đầu tiên.
Ở dòng 7 sau khi mình kiểu tra biến $file_upload tồn tại và có giá trị, thì mình sẽ gán dữ liệu đã nhận được từ hàm mình đã viết là hk_user_upload_image vào biến $avatar_data.
User meta là gì?
Để các bạn có thể hiểu sâu hơn, mình sẽ giải thích về user meta một chút. Mặc định profile của người dùng sẽ có các trường dữ liệu như Họ, Tên, Tên hiển thị, Trang web, Tiểu sử,… Tuy nhiên nếu bạn muốn thêm các trường dữ liệu mới cho người dùng thì phải làm thế nào? Lúc này các trường dữ liệu mới cho người dùng được gọi là user meta.
Bạn có thể thêm một user meta mới bằng hàm add_user_meta. Cập nhập lại user meta bằng hàm update_user_meta. Và lấy giá trị của user meta ra sử dụng bằng hàm get_user_meta. User meta sẽ là một cặp meta_key và meta_value. Với meta_value sẽ lưu trữ giá trị dựa trên meta_key.
Áp dụng user meta
Ý tưởng của mình là sẽ tạo một user meta mới có key là custom_avatar, và custom_avatar này sẽ truyền vào giá trị là địa chỉ URL của hình ảnh mà người dùng đã tải lên.
Từ dòng 12, mình sẽ kiểm tra xem custom_avatar đã tồn tại chưa? Nếu đã tồn tại rồi thì mình sẽ sử dụng hàm update_user_meta để cập nhập lại dữ liệu. Nếu chưa tồn tại thì mình sẽ tạo một user meta mới, có key chính là custom_avatar để lưu trữ giá trị URL hình ảnh mà người dùng đã upload.
Vì khi gửi dữ liệu lên server mình dùng dataType là json. Nên cuối cùng mình sử dụng hàm wp_send_json_success để trả về dữ liệu cho phía client.
Thay đổi avatar mặc định của người dùng WordPress
Mặc định WordPress sử dụng Gravatar để cho phép người dùng cập nhập avatar. Mình không phủ nhận sự tiện lợi của Gravatar nhưng không phải người dùng nào cũng biết và sử dụng nó.
Để thay đổi avatar mặc định của WordPress thành avatar mà người dùng đã upload, bạn hãy thêm đoạn code dưới đây vào file functions.php
add_filter( "get_avatar", "hk_custom_user_avatar", 1, 5 );
function hk_custom_user_avatar( $avatar, $id_or_email, $size, $alt, $args ) {
$user = false;
$user_id = '';
$avatar_url = '';
if ( is_numeric( $id_or_email ) ) {
$id = (int) $id_or_email;
$user = get_user_by( 'id' , $id );
} 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 ) ) {
$user_id = $user->data->ID;
$avatar_url = get_user_meta( $user_id, 'custom_avatar', true );
$replace_img = get_avatar_url( $user_id );
$output_img = '';
if ( isset( $avatar_url ) && $avatar_url ) {
$output_img = $avatar_url;
} else {
$output_img = $replace_img;
}
$avatar = '<img class="avatar" src="' . $output_img . '" width="' . $size . '" height="' . $size . '" />';
}
return $avatar;
}
Đây là kết quả mà bạn sẽ nhận được tại giao diện quản trị của WordPress. Hình ảnh người dùng sẽ được thay đổi dựa trên upload của họ.
Lời kết
Vậy là bài viết của mình đã kết thúc rồi. Đây là một chủ đề theo mình nghĩ là khá phức tạp. kết hợp nhiều kiến thức lại với nhau.
Hy vọng rằng qua bài viết này các bạn có thể hiểu được và tự code được cho mình một tính năng tương tự như vậy. Không chỉ dừng lại ở việc upload ảnh đại diện cho người dùng, mà có thể là upload ảnh cho bất kì nơi nào, tuỳ thuộc vào nhu cầu hoặc ý tưởng của bạn.
Nếu bạn đang tìm kiếm cơ hội việc làm, hãy tham khảo ngay việc làm IT mọi cấp độ trên TopDev nhé!
Bài viết gốc được đăng tải tại huykira.net
Xem thêm:
Hướng dẫn viết theme WordPress toàn tập – phần 1
