Thêm cột ảnh đại diện WordPress admin

5 tháng ago, WordPress Plugin, Views
Thêm cột ảnh đại diện WordPress admin

Giới thiệu: Tại sao nên thêm cột ảnh đại diện vào WordPress Admin?

Trong giao diện quản trị (Admin) của WordPress, mặc định bạn sẽ thấy một danh sách các người dùng với các thông tin như tên đăng nhập, email, vai trò,… Tuy nhiên, việc hiển thị thêm ảnh đại diện (avatar) của mỗi người dùng có thể mang lại nhiều lợi ích thiết thực:

  • Tăng khả năng nhận diện: Dễ dàng phân biệt người dùng hơn, đặc biệt khi có nhiều người dùng với tên tương tự.
  • Cải thiện trải nghiệm người dùng: Giao diện trực quan hơn, giúp người dùng dễ dàng điều hướng và quản lý.
  • Chuyên nghiệp hơn: Tạo ấn tượng chuyên nghiệp và hiện đại cho trang web của bạn.

Bài viết này sẽ hướng dẫn bạn từng bước cách thêm cột ảnh đại diện vào trang quản lý người dùng trong WordPress Admin một cách dễ dàng, sử dụng code tùy chỉnh và plugin hỗ trợ.

Phương pháp 1: Sử dụng code tùy chỉnh trong functions.php

Đây là phương pháp phổ biến và linh hoạt, cho phép bạn kiểm soát hoàn toàn quá trình thêm ảnh đại diện. Tuy nhiên, bạn cần cẩn thận khi chỉnh sửa file functions.php vì sai sót có thể gây ra lỗi cho trang web.

Bước 1: Truy cập file functions.php

Có hai cách để truy cập file functions.php:

  • Qua giao diện WordPress Admin: Truy cập Appearance > Theme Editor. Chọn file functions.php ở danh sách bên phải (lưu ý: bạn nên tạo child theme trước khi chỉnh sửa để tránh mất các thay đổi khi cập nhật theme).
  • Qua FTP/SFTP: Sử dụng phần mềm FTP/SFTP (ví dụ: FileZilla) để kết nối đến server và tìm file functions.php trong thư mục theme đang sử dụng (wp-content/themes/tên-theme/functions.php hoặc wp-content/themes/tên-child-theme/functions.php).

Bước 2: Thêm đoạn code sau vào functions.php

Copy và dán đoạn code sau vào cuối file functions.php (trước thẻ đóng ?> nếu có):

<?php
// Thêm cột Avatar vào trang quản lý người dùng
function custom_user_columns( $columns ) {
    $columns['user_avatar'] = '<img src="" alt="Avatar" />';
    return $columns;
}
add_filter( 'manage_users_columns', 'custom_user_columns' );

// Hiển thị Avatar trong cột vừa thêm
function custom_user_column_value( $val, $column_name, $user_id ) {
    if ( 'user_avatar' == $column_name ) {
        return get_avatar( $user_id, 32 ); // 32 là kích thước ảnh, bạn có thể thay đổi
    }
    return $val;
}
add_filter( 'manage_users_custom_column', 'custom_user_column_value', 10, 3 );

// Sắp xếp cột Avatar (tùy chọn)
function custom_user_sortable_columns( $columns ) {
    $columns['user_avatar'] = 'user_avatar'; // 'user_avatar' là slug của cột
    return $columns;
}
add_filter( 'manage_users_sortable_columns', 'custom_user_sortable_columns' );
?>

Giải thích code:

  • custom_user_columns: Hàm này thêm một cột mới có tên user_avatar vào danh sách các cột hiển thị trong trang quản lý người dùng.
  • custom_user_column_value: Hàm này hiển thị ảnh đại diện của người dùng trong cột user_avatar. get_avatar( $user_id, 32 ) lấy ảnh đại diện của người dùng với ID là $user_id và kích thước là 32px.
  • custom_user_sortable_columns: Hàm này (tùy chọn) cho phép sắp xếp người dùng theo cột ảnh đại diện.

Bước 3: Lưu file và kiểm tra

Sau khi thêm code, lưu file functions.php. Truy cập trang Users trong WordPress Admin để kiểm tra xem cột ảnh đại diện đã được thêm vào chưa. Nếu không thấy, hãy thử xóa cache của trình duyệt.

Phương pháp 2: Sử dụng plugin

Nếu bạn không muốn chỉnh sửa code, bạn có thể sử dụng plugin để thêm cột ảnh đại diện. Phương pháp này đơn giản và nhanh chóng, phù hợp với người dùng không có nhiều kinh nghiệm về code.

Bước 1: Cài đặt và kích hoạt plugin

Có nhiều plugin hỗ trợ thêm cột ảnh đại diện vào WordPress Admin. Một số plugin phổ biến:

  • User Avatar: Cho phép người dùng tải lên ảnh đại diện của riêng mình.
  • WP User Avatar: Tương tự như User Avatar, nhưng có nhiều tùy chọn hơn.
  • Simple Custom User Columns: Cho phép bạn tạo các cột tùy chỉnh, bao gồm cả cột ảnh đại diện.

Để cài đặt plugin, truy cập Plugins > Add New trong WordPress Admin, tìm kiếm plugin bạn muốn sử dụng, cài đặt và kích hoạt.

Bước 2: Cấu hình plugin (nếu cần)

Một số plugin có thể yêu cầu bạn cấu hình sau khi kích hoạt. Ví dụ, với plugin Simple Custom User Columns, bạn cần tạo một cột mới và chọn hiển thị ảnh đại diện trong cột đó.

Mỗi plugin sẽ có giao diện và cách cấu hình khác nhau. Hãy tham khảo tài liệu hướng dẫn của plugin bạn đang sử dụng để biết thêm chi tiết.

Bước 3: Kiểm tra

Sau khi cài đặt và cấu hình plugin (nếu cần), truy cập trang Users trong WordPress Admin để kiểm tra xem cột ảnh đại diện đã được thêm vào chưa.

So sánh hai phương pháp

Tính năng Sử dụng code Sử dụng plugin
Độ linh hoạt Cao Trung bình
Độ phức tạp Trung bình (cần kiến thức về code) Thấp (dễ sử dụng)
Khả năng tùy chỉnh Cao Trung bình (phụ thuộc vào plugin)
Hiệu suất Có thể tốt hơn (nếu code tối ưu) Có thể chậm hơn (do plugin có thể thêm các chức năng không cần thiết)

Khắc phục sự cố thường gặp

Trong quá trình thêm cột ảnh đại diện, bạn có thể gặp một số sự cố sau:

  • Không thấy ảnh đại diện: Đảm bảo người dùng đã tải lên ảnh đại diện. Nếu sử dụng Gravatar, hãy kiểm tra xem email của người dùng đã được đăng ký trên Gravatar chưa.
  • Ảnh đại diện hiển thị sai kích thước: Điều chỉnh kích thước ảnh trong code hoặc trong cài đặt của plugin.
  • Trang web bị lỗi sau khi thêm code: Kiểm tra lại code để tìm lỗi cú pháp. Nếu không tìm thấy lỗi, hãy thử xóa code để khôi phục trang web.

Nếu bạn gặp bất kỳ sự cố nào khác, hãy tìm kiếm trên Google hoặc tham khảo diễn đàn hỗ trợ của WordPress để được giúp đỡ.

Kết luận

Việc thêm cột ảnh đại diện vào WordPress Admin là một cải tiến nhỏ nhưng mang lại nhiều lợi ích về mặt trực quan và trải nghiệm người dùng. Bạn có thể lựa chọn phương pháp phù hợp với trình độ kỹ thuật và nhu cầu của mình. Chúc bạn thành công!

Related Topics by Tag
, , , ,

..