[Wordpress] Hướng dẫn tạo nút upload media bằng wp_enqueue_media()

wp_enqueue_media() là một hàm WordPress mạnh mẽ cho phép bạn tích hợp trình tải lên và quản lý tệp phương tiện của WordPress vào các plugin và chủ đề của mình. Dưới đây là hướng dẫn chi tiết về cách sử dụng nó:

1. Mục đích

Hàm wp_enqueue_media() tải tất cả các tập lệnh, kiểu và khuôn mẫu JavaScript cần thiết để sử dụng API phương tiện của WordPress. Điều này cho phép bạn tạo các trường tải lên tùy chỉnh, thư viện phương tiện và các tính năng liên quan đến phương tiện khác.

Khi nào nên sử dụng

Bạn nên sử dụng wp_enqueue_media() bất cứ khi nào bạn cần tương tác với thư viện phương tiện hoặc tải lên tệp phương tiện trong phần phụ trợ của WordPress (bảng điều khiển quản trị).

2. Cách sử dụng

Thêm hàm vào hook admin_enqueue_scripts:

function my_enqueue_media_uploader() {
    wp_enqueue_media();
}
add_action( 'admin_enqueue_scripts', 'my_enqueue_media_uploader' );

Đảm bảo đặt hàm này trong tệp functions.php của chủ đề hoặc trong plugin của bạn.

Tạo nút tải lên

<button id="upload_button">Chọn hoặc tải lên hình ảnh</button>
<input type="hidden" name="image_attachment_id" id="image_attachment_id" value="">
<img id="image_preview" src="" style="max-width: 300px;">

Bạn có thể đặt nút này ở bất kỳ đâu trong biểu mẫu hoặc trang quản trị của mình.

Thêm JavaScript để xử lý sự kiện nhấp chuột:

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

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

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

        mediaUploader = wp.media({
            title: 'Chọn hình ảnh',
            button: {
                text: 'Chọn hình ảnh'
            },
            multiple: false
        });

        mediaUploader.on('select', function(){
            var attachment = mediaUploader.state().get('selection').first().toJSON();
            $('#image_attachment_id').val(attachment.id);
            $('#image_preview').attr('src', attachment.url);
        });

        mediaUploader.open();
    });
});

Đảm bảo thêm mã này vào một tệp JavaScript được tải trong phần phụ trợ.

3. Giải thích

wp.media(): Tạo một đối tượng trình tải lên phương tiện.
title: Đặt tiêu đề cho cửa sổ trình tải lên.
button.text: Đặt văn bản cho nút “Chọn” trong cửa sổ trình tải lên.
multiple: Cho phép chọn nhiều tệp (đặt thành true) hoặc chỉ một tệp (đặt thành false).
mediaUploader.on('select', ...): Xử lý sự kiện khi người dùng chọn một tệp.
attachment.id: Lấy ID tệp đính kèm.
attachment.url: Lấy URL của tệp.

Tùy chỉnh

Bạn có thể tùy chỉnh trình tải lên phương tiện bằng cách sử dụng các tùy chọn khác nhau trong hàm wp.media(). Ví dụ: bạn có thể đặt loại tệp được phép tải lên, giới hạn kích thước tệp và hơn thế nữa.

Lưu ý quan trọng

Đảm bảo rằng JavaScript của bạn được đặt trong một hàm jQuery(document).ready().
Bạn có thể sử dụng hàm wp_get_attachment_image_src() để lấy URL hình thu nhỏ của tệp đính kèm.
Để biết thêm tùy chỉnh và chức năng nâng cao, hãy tham khảo tài liệu WordPress Codex.