Mọi người phát triển trang web WordPress, sớm hay muộn, sẽ phải đối mặt với nhu cầu thay đổi ảnh đại diện của người dùng. Đó là khi họ phát hiện ra rằng bên trong WordPress, không có cách nào để làm như vậy
Nếu bạn đang ở trong tình huống ngay bây giờ để tự hỏi mình. Làm cách nào để thay đổi ảnh hồ sơ của tôi trên WordPress?
Có 3 cách để làm
- Thông qua Gravatar. com, đó là cách WP tiêu chuẩn
- Sử dụng plugin WordPress
- Với mã tùy chỉnh sẽ được thêm vào các chức năng của chủ đề của bạn. php
Trước khi bắt đầu phần hướng dẫn, hãy làm rõ mọi thứ về ảnh đại diện của người dùng WordPress hay còn gọi là Hình đại diện WP
Hình đại diện WordPress là gì?
Hình đại diện WP là ảnh đại diện của người dùng trên trang web WordPress
Nó thường xuất hiện bên cạnh mỗi bình luận, nhưng tùy thuộc vào chủ đề được sử dụng, nó cũng có thể được sử dụng hiển thị ở cuối bài viết để làm nổi bật tác giả
Nếu bạn đang sử dụng bbPress hoặc BuddyPress, hình đại diện sẽ hiển thị bên cạnh mỗi chủ đề diễn đàn hoặc bài đăng trả lời và hoạt động
Theo mặc định, WordPress sử dụng hình đại diện được xác định trước cho tất cả người dùng và như tôi đã đề cập trước đây, bên trong WordPress, không có cách nào để thay đổi nó
Ngay cả Avatar được xác định trước, không tồn tại trên máy chủ của bạn
Thay vào đó, nó được tải qua gravatar. com, một trang web thuộc sở hữu của Automattic, công ty đứng sau WordPress. com
Cách thay đổi ảnh đại diện trên WordPress qua Gravatar. com?
cách tiêu chuẩn mà WordPress cung cấp, để thay đổi ảnh hồ sơ [không có plugin hoặc mã tùy chỉnh] là truy cập Gravatar. com
Bạn sẽ cần kết nối một WordPress. com [vâng, bạn sẽ cần tài khoản đầu tiên đó để đăng ký] và tạo một tài khoản để tải lên gravatar của bạn
Gravatar, viết tắt của Globally Recognized Avatar, là một ảnh đại diện được liên kết với một địa chỉ email trên Gravatar. com
Gravatar của bạn sẽ được sử dụng bất cứ khi nào bạn viết bình luận, bài đăng trên diễn đàn hoặc bài đăng trên blog trên bất kỳ trang web nào do WordPress cung cấp
Điều này hợp lệ cho cả WordPress. blog com và các trang web WordPress tự lưu trữ
Hình đại diện toàn cầu nghe có vẻ là một tính năng tuyệt vời, vậy tại sao ai đó lại muốn tải hình đại diện của chính họ lên máy chủ của họ?
Có thể có một số lý do, nhưng 3 lý do quan trọng nhất có lẽ là
- Vì tải từ gravatar. com có thể tăng đáng kể thời gian tải của các trang có nhiều bình luận hơn
- Để có toàn quyền kiểm soát các tài nguyên được tải trên trang web của bạn
- Cuối cùng vì không phải ai cũng có WordPress. tài khoản com hoặc muốn có một tài khoản
Làm cách nào để thay đổi ảnh đại diện trên WordPress thông qua plugin?
có một số plugin sẽ cho phép người dùng của bạn thay đổi ảnh hồ sơ của họ trên trang web WordPress của bạn
Tuy nhiên, hầu hết trong số họ sẽ làm được nhiều hơn thế và bạn có thể không cần một số hoặc hầu hết các tính năng của họ
Rất nhiều trong số chúng cho phép bạn đặt xếp hạng cho ảnh, điều này có thể hữu ích nếu bạn đang tải hình đại diện từ xa như với gravatar. com
Nhưng nó không thể thiếu nếu bạn đang tải ảnh hồ sơ từ máy chủ cục bộ của mình
Nhiều người khác cũng sẽ cung cấp tùy chọn tải lên hình đại diện từ giao diện người dùng. Một tính năng hay, nhưng nếu bạn chỉ cần tác giả của mình thay đổi ảnh hồ sơ của họ, thì có lẽ điều đó không cần thiết vì tác giả đã có quyền truy cập vào phụ trợ WP
Plugin duy nhất mà tôi thấy chỉ cho phép tải lên hình đại diện tùy chỉnh cục bộ và thực hiện theo cách đơn giản là plugin Hình đại diện người dùng đơn giản
Plugin này thực hiện gần như chính xác những gì mã trong hướng dẫn bên dưới của chúng tôi thực hiện
Sự khác biệt chính là mã của chúng tôi cực kỳ nhẹ với ít hơn 100 dòng mã [không có chú thích]
Plugin Simple User Avatar sẽ thêm khoảng gấp đôi số dòng mã [giữa PHP, CSS và JS]
Ngoài ra, plugin này không cho phép thay thế hình đại diện mặc định và nó sẽ không ngăn tải hình đại diện mặc định từ gravatar. com
Điều đó nói rằng, cho đến nay nó là plugin đơn giản và nhẹ nhất trên WordPress. kho plugin org để quản lý avatar
Nếu bạn không gặp sự cố khi thêm một plugin khác vào bản cài đặt của mình để khiến người dùng thay đổi ảnh hồ sơ của họ và bạn chỉ cần điều đó, tôi khuyên bạn nên sử dụng plugin Hình đại diện người dùng đơn giản
Thay vào đó, nếu bạn muốn thêm một số mã hiện đại vào chủ đề của mình mà không cần rườm rà và bạn muốn giải quyết tất cả các vấn đề liên quan đến tải hình đại diện qua gravatar. com và quên các bản cập nhật đi… đoạn mã sau đây là thứ bạn đang tìm kiếm
Làm cách nào để thay đổi ảnh hồ sơ trên WordPress bằng mã tùy chỉnh?
Cuối cùng, chúng ta đến phần hướng dẫn của mình
Chúng tôi đã viết mã này bằng cách sử dụng các phương pháp hay nhất của WordPress và chúng tôi sẽ sử dụng trình tải lên phương tiện tiêu chuẩn đi kèm với WordPress và không có gì khác
Đoạn mã sau có thể được thêm vào các chức năng của chủ đề của bạn. php hoặc nếu bạn đang sử dụng plugin đoạn mã, trên một đoạn mã mới
Bắt đầu nào
1] Trước hết, chúng ta cần liệt kê các tập lệnh của Trình tải lên phương tiện. Điều quan trọng là chỉ tải nó trên trang hồ sơ. Chúng tôi thêm chức năng bằng hành động admin_enqueue_scripts
/** * Custom Avatar Without a Plugin */ // 1. Enqueue the needed scripts. add_action[ "admin_enqueue_scripts", "ayecode_enqueue" ]; function ayecode_enqueue[ $hook ]{ // Load scripts only on the profile page. if[ $hook === 'profile.php' || $hook === 'user-edit.php' ]{ add_thickbox[]; wp_enqueue_script[ 'media-upload' ]; wp_enqueue_media[]; } }2] Tiếp theo, chúng ta cần tạo chức năng để sử dụng tập lệnh tải lên phương tiện bên trong trang chỉnh sửa hồ sơ của WordPress. Chúng tôi thêm chức năng của mình bằng hành động admin_print_footer_scripts-profile. php và admin_print_footer_scripts-user-edit. php
// 2. Scripts for Media Uploader. function ayecode_admin_media_scripts[] { ?> jQuery[document].ready[function [$] { $[document].on['click', '.avatar-image-upload', function [e] { e.preventDefault[]; var $button = $[this]; var file_frame = wp.media.frames.file_frame = wp.media[{ title: 'Select or Upload an Custom Avatar', library: { type: 'image' // mime type }, button: { text: 'Select Avatar' }, multiple: false }]; file_frame.on['select', function[] { var attachment = file_frame.state[].get['selection'].first[].toJSON[]; $button.siblings['#ayecode-custom-avatar'].val[ attachment.sizes.thumbnail.url ]; $button.siblings['.custom-avatar-preview'].attr[ 'src', attachment.sizes.thumbnail.url ]; }]; file_frame.open[]; }]; }];