Thêm attachment làm ảnh đại diện WordPress

2 tháng ago, WordPress Plugin, Views

Giới Thiệu Về Ảnh Đại Diện (Avatar) Trong WordPress

Ảnh đại diện, hay còn gọi là avatar, đóng vai trò quan trọng trong việc xây dựng thương hiệu cá nhân và tạo dựng sự tương tác trong cộng đồng WordPress. Mặc định, WordPress sử dụng Gravatar để hiển thị ảnh đại diện. Tuy nhiên, trong nhiều trường hợp, bạn có thể muốn cho phép người dùng tải lên ảnh đại diện trực tiếp từ trang web của bạn, đặc biệt là khi bạn muốn kiểm soát hoàn toàn nội dung và hình ảnh hiển thị trên trang web.

Bài viết này sẽ hướng dẫn bạn từng bước cách thêm chức năng tải ảnh đại diện từ attachment (tệp đính kèm) trực tiếp vào WordPress, mở ra nhiều lựa chọn tùy chỉnh và nâng cao trải nghiệm người dùng.

Tại Sao Nên Sử Dụng Attachment Làm Ảnh Đại Diện?

Việc sử dụng attachment làm ảnh đại diện mang lại nhiều lợi ích so với việc chỉ dựa vào Gravatar:

Kiểm soát hoàn toàn: Bạn có toàn quyền kiểm soát hình ảnh hiển thị, đảm bảo tuân thủ quy định của trang web.
Tùy chỉnh linh hoạt: Dễ dàng tùy chỉnh kích thước, định dạng ảnh đại diện.
Cải thiện trải nghiệm người dùng: Cho phép người dùng tự do lựa chọn ảnh đại diện, tăng tính cá nhân hóa.
Không phụ thuộc Gravatar: Giải quyết vấn đề khi người dùng không có tài khoản Gravatar hoặc muốn sử dụng ảnh khác.

Các Bước Thực Hiện Thêm Attachment Làm Ảnh Đại Diện

Quy trình thêm attachment làm ảnh đại diện bao gồm các bước chính:

Tạo một trường tùy chỉnh (custom field) trong hồ sơ người dùng để lưu ID của attachment.
Thêm biểu mẫu tải lên ảnh vào trang chỉnh sửa hồ sơ.
Xử lý tải lên ảnh và lưu ID attachment vào trường tùy chỉnh.
Hiển thị ảnh đại diện từ attachment thay vì Gravatar.

Bước 1: Tạo Trường Tùy Chỉnh (Custom Field)

Chúng ta sẽ sử dụng trường tùy chỉnh (custom field) để lưu trữ ID của ảnh được tải lên. Bạn có thể sử dụng plugin hoặc thêm code trực tiếp vào file `functions.php` của theme (hoặc child theme) để tạo trường tùy chỉnh. Chúng ta sẽ sử dụng code để minh họa trong bài viết này.

Thêm đoạn code sau vào file `functions.php`:


function them_truong_tuy_chinh_anh_dai_dien( $user ) {
    ?>
    Ảnh Đại Diện
    
        
            Chọn ảnh đại diện
            
                <input type="hidden" name="anh_dai_dien" id="anh_dai_dien" value="ID ) ); ?>" class="regular-text" />

                <img id="anh_dai_dien_hien_tai" src="ID, array( 'size' => 96 ) ) ); ?>" alt="Ảnh đại diện hiện tại" width="96" height="96" />

                
                <button type="button" class="button" id="xoa_anh_dai_dien" ID ) ){ echo 'style="display:none;"'; } ?> >Xóa ảnh

                
                    jQuery(document).ready(function($){
                        var mediaUploader;

                        $('#tai_len_anh_dai_dien').click(function(e) {
                            e.preventDefault();

                            if (mediaUploader) {
                                mediaUploader.open();
                                return;
                            }

                            mediaUploader = wp.media.frames.file_frame = wp.media({
                                title: 'Chọn ảnh đại diện',
                                button: {
                                    text: 'Chọn ảnh'
                                },
                                multiple: false
                            });

                            mediaUploader.on('select', function() {
                                attachment = mediaUploader.state().get('selection').first().toJSON();
                                $('#anh_dai_dien').val(attachment.id);
                                $('#anh_dai_dien_hien_tai').attr('src', attachment.url);
                                $('#xoa_anh_dai_dien').show();
                            });

                            mediaUploader.open();
                        });

                        $('#xoa_anh_dai_dien').click(function(e) {
                            e.preventDefault();
                            var confirm_delete = confirm("Bạn có chắc chắn muốn xóa ảnh đại diện này?");
                            if( confirm_delete == true) {
                                $('#anh_dai_dien').val('');
                                $('#anh_dai_dien_hien_tai').attr('src', 'ID, array( 'size' => 96 ) ); ?>'); // Sử dụng Gravatar mặc định
                                $('#xoa_anh_dai_dien').hide();
                            }

                        });
                    });
                
            
        
    
    <?php
}
add_action( 'show_user_profile', 'them_truong_tuy_chinh_anh_dai_dien' );
add_action( 'edit_user_profile', 'them_truong_tuy_chinh_anh_dai_dien' );

Chọn ảnh đại diện	<input type="hidden" name="anh_dai_dien" id="anh_dai_dien" value="ID ) ); ?>" class="regular-text" /> <img id="anh_dai_dien_hien_tai" src="ID, array( 'size' => 96 ) ) ); ?>" alt="Ảnh đại diện hiện tại" width="96" height="96" /> <button type="button" class="button" id="xoa_anh_dai_dien" ID ) ){ echo 'style="display:none;"'; } ?> >Xóa ảnh jQuery(document).ready(function($){ var mediaUploader; $('#tai_len_anh_dai_dien').click(function(e) { e.preventDefault(); if (mediaUploader) { mediaUploader.open(); return; } mediaUploader = wp.media.frames.file_frame = wp.media({ title: 'Chọn ảnh đại diện', button: { text: 'Chọn ảnh' }, multiple: false }); mediaUploader.on('select', function() { attachment = mediaUploader.state().get('selection').first().toJSON(); $('#anh_dai_dien').val(attachment.id); $('#anh_dai_dien_hien_tai').attr('src', attachment.url); $('#xoa_anh_dai_dien').show(); }); mediaUploader.open(); }); $('#xoa_anh_dai_dien').click(function(e) { e.preventDefault(); var confirm_delete = confirm("Bạn có chắc chắn muốn xóa ảnh đại diện này?"); if( confirm_delete == true) { $('#anh_dai_dien').val(''); $('#anh_dai_dien_hien_tai').attr('src', 'ID, array( 'size' => 96 ) ); ?>'); // Sử dụng Gravatar mặc định $('#xoa_anh_dai_dien').hide(); } }); });

Đoạn code này thêm một trường “Ảnh Đại Diện” vào trang chỉnh sửa hồ sơ người dùng. Trường này bao gồm một input hidden để lưu ID của attachment, một hình ảnh hiển thị ảnh đại diện hiện tại (hoặc Gravatar nếu chưa có ảnh nào được chọn), và hai nút “Tải lên ảnh” và “Xóa ảnh”. JavaScript được sử dụng để mở Media Uploader của WordPress và cập nhật giá trị của input hidden và hình ảnh khi người dùng chọn một ảnh.

Bước 2: Lưu Trường Tùy Chỉnh

Bây giờ, chúng ta cần lưu giá trị của trường tùy chỉnh khi người dùng cập nhật hồ sơ của họ. Thêm đoạn code sau vào file `functions.php`:


function luu_truong_tuy_chinh_anh_dai_dien( $user_id ) {
    if ( ! current_user_can( 'edit_user', $user_id ) ) {
        return false;
    }

    if ( isset( $_POST['anh_dai_dien'] ) ) {
        update_user_meta( $user_id, 'anh_dai_dien', sanitize_text_field( $_POST['anh_dai_dien'] ) );
    }
}
add_action( 'personal_options_update', 'luu_truong_tuy_chinh_anh_dai_dien' );
add_action( 'edit_user_profile_update', 'luu_truong_tuy_chinh_anh_dai_dien' );

Đoạn code này kiểm tra xem người dùng hiện tại có quyền chỉnh sửa hồ sơ của người dùng đang được chỉnh sửa hay không. Nếu có, nó sẽ lưu giá trị của trường “anh_dai_dien” vào user meta với key là ‘anh_dai_dien’. Hàm `sanitize_text_field` được sử dụng để làm sạch dữ liệu đầu vào để đảm bảo an toàn.

Bước 3: Hiển Thị Ảnh Đại Diện Từ Attachment

Cuối cùng, chúng ta cần thay thế Gravatar bằng ảnh từ attachment khi hiển thị ảnh đại diện. Thêm đoạn code sau vào file `functions.php`:


function thay_doi_avatar( $avatar, $id_or_email, $size, $default, $alt ) {
    $user = false;

    if ( is_numeric( $id_or_email ) ) {
        $user_id = (int) $id_or_email;
        $user = get_user( $user_id );
    } elseif ( is_object( $id_or_email ) && isset( $id_or_email->user_id ) ) {
        $user_id = (int) $id_or_email->user_id;
        $user = get_user( $user_id );
    } else {
        $user = get_user_by( 'email', $id_or_email );
    }

    if ( $user && is_object( $user ) ) {
        $anh_dai_dien_id = get_user_meta( $user->ID, 'anh_dai_dien', true );
        if ( $anh_dai_dien_id ) {
            $anh_url = wp_get_attachment_image_src( $anh_dai_dien_id, 'thumbnail' );
            if ( $anh_url ) {
                $avatar = '';
            }
        }
    }

    return $avatar;
}
add_filter( 'get_avatar', 'thay_doi_avatar', 10, 5 );

Đoạn code này sử dụng filter `get_avatar` để thay đổi avatar trước khi nó được hiển thị. Nó kiểm tra xem người dùng có ảnh đại diện được lưu trong user meta hay không. Nếu có, nó sẽ lấy URL của ảnh từ attachment và thay thế Gravatar bằng ảnh này. Nó cũng thêm các thuộc tính `alt`, `class`, `width` và `height` vào thẻ `img` để đảm bảo ảnh được hiển thị đúng cách.

Lưu Ý Quan Trọng

Sao lưu theme trước khi chỉnh sửa: Luôn tạo bản sao lưu của theme trước khi thực hiện bất kỳ thay đổi nào.
Sử dụng Child Theme: Nên sử dụng child theme để tránh mất các tùy chỉnh khi theme gốc được cập nhật.
Kiểm tra tương thích: Đảm bảo code tương thích với phiên bản WordPress hiện tại của bạn.
Tối ưu hóa ảnh: Tối ưu hóa ảnh trước khi tải lên để cải thiện hiệu suất trang web.

Kết Luận

Bài viết này đã hướng dẫn chi tiết cách thêm chức năng tải ảnh đại diện từ attachment vào WordPress. Bằng cách làm theo các bước trên, bạn có thể cung cấp cho người dùng khả năng tùy chỉnh ảnh đại diện của họ và kiểm soát hình ảnh hiển thị trên trang web của bạn. Hãy nhớ sao lưu theme và sử dụng child theme để đảm bảo an toàn cho trang web của bạn. Chúc bạn thành công!

#ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active::before { background-color: #ededed; } aa