Hướng dẫn xây dựng chức năng thay đổi avatar người dùng WordPress

Hướng dẫn xây dựng chức năng thay đổi avatar người dùng WordPress

Ngày 24 - 05 - 2022 - Tại chuyên mục: Webmaster, Wordpress - Lượt xem: 1907

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.

thay đổi avatar người dùng wordpress

Nếu các bạn chưa xem các bài viết cũ của mình trong series Custom tài khoản WordPress, thì hãy bắt đầu với những bài viết đó nhé.

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é.

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é.

Đâ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é.

giao diện thay đổi avatar người dùng

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.

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é.

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_keymeta_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

Đâ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ọ.

custom avatar admin wordpress

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.

Đây là bài viết thứ 5 trong series Custom tài khoản WordPress. Nếu các bạn phát hiện ra sai sót của mình trong bài viết, hoặc góp ý thì comment ở bên dưới nha.

Đừng quên like Fanpage và subscribe kênh Youtube để ủng hộ mình nhé! Cảm ơn các bạn.

Huy Kira

Đam mê hóa học, ưng thi vào trường kinh tế... Đậu vào trường Sư phạm, quyết tâm đi dạy... Ra trường đi làm designer, tự học frontend, chuyển qua làm PHP, được công ty đào tạo laravel... Và hiện tại đang code react native(2015) => Fullstack ... ?? tối về viết blog... (Còn tiếp...)

6
  • Bùi Đức HiệpBlog của bạn có giao diện chất đấy nhỉ :v

    Thích Trả lời 6 tháng trước

  • LinhB ơi cho mình hỏi vấn đề ngoài lề này được ko ạ? Mình đang tìm cách chống click chuột phải vào quảng cáo Adsense trên site mình. Vậy có cách nào để làm được điều này ko nhỉ? Mình đã thử vài plugin trên mạng nó chỉ giúp chống click chuột phải vào nội dung bài viết site mình, chứ khi click chuột phải vào quảng cáo Adsense vẫn có thể click được. B có cách nào ko giúp mình với. Nếu thành công mình sẽ gửi tiền phí cho b ạ. Cảm ơn b

    Thích Trả lời 2 tháng trước

    • Huy KiraCái này ko làm được đâu bạn, quảng cáo adsen hay các bên thứ 3, nó dùng iframe vào website của mình, Mình ko cang thiệp được vào nó nha!

      Thích Trả lời 2 tháng trước

  • ToànAnh ơi. Liệu mình có thể thêm button remove avatar được ko nhỉ? Cảm ơn anh

    Thích Trả lời 2 tuần trước

AVT