Hướng Dẫn Sử Dụng ThickBox Trong WordPress Admin

Thủ thuật WordPress
1

Hướng Dẫn Sử Dụng ThickBox Trong WordPress Admin

ThickBox là một thư viện jQuery sử dụng để hiển thị các hộp thoại modals trong giao diện WordPress admin. Bạn có thể dùng ThickBox để hiện thị nội dung như ảnh, video, hoặc các thông tin bổ sung một cách đẹp mắt mà không cần rời khỏi trang hiện tại.

Dưới đây là hướng dẫn cách sử dụng ThickBox trong WordPress admin cùng với ví dụ mã.

1. Kết Nối Script và Style

Đầu tiên, bạn cần đảm bảo rằng các script và style của ThickBox được tải lên trang admin của WordPress. WordPress đã tích hợp sẵn ThickBox, vì vậy bạn chỉ cần đảm bảo rằng nó được kích hoạt.

function my_admin_scripts() {
    wp_enqueue_script('thickbox');
    wp_enqueue_style('thickbox');
}
add_action('admin_enqueue_scripts', 'my_admin_scripts');

2. Thêm Liên Kết Kích Hoạt ThickBox

Bạn có thể thêm liên kết hoặc nút trên trang admin để mở một hộp thoại ThickBox. Sử dụng các thuộc tính href và class để định dạng liên kết và kích hoạt ThickBox.

Ví dụ dưới đây sẽ mở một modal khi người dùng nhấp vào liên kết.

function my_thickbox_link() {
    echo '<a href="https://wpvnteam.com/?TB_iframe=true&amp;width=1024&amp;height=800" class="thickbox open-plugin-details-modal" aria-label="View Site">View Site</a>';
}
add_action('admin_notices', 'my_thickbox_link');

3. Tùy Chỉnh Kích Thước Modal

Bạn có thể tùy chỉnh kích thước của modal bằng cách thay đổi các tham số width và height trong thuộc tính href. Ví dụ trong mã trên, modal sẽ có kích thước 1024x800 pixels.

4. Kích Hoạt và Tùy Chỉnh

Để mở modal, hãy đảm bảo rằng thuộc tính class của liên kết bao gồm thickbox. Thực tế, ThickBox tự động xử lý việc mở và đóng modal dựa trên các thuộc tính này.

Nếu bạn cần thêm các tùy chỉnh nâng cao, như thêm hành động khi modal mở hoặc đóng, bạn có thể sử dụng jQuery để thêm các sự kiện.

jQuery(document).ready(function($) {
    $(document).on('click', '.thickbox', function() {
        // Code to execute when ThickBox is opened
        console.log('ThickBox opened');
    });
});

5. Lưu Ý

  • Đảm bảo rằng ThickBox đã được kích hoạt trên trang admin của bạn.
  • Nếu bạn không thấy modal mở ra, kiểm tra xem các script và style đã được nạp đúng chưa và có lỗi JavaScript nào không.

Với hướng dẫn trên, bạn có thể dễ dàng tích hợp ThickBox vào giao diện WordPress admin của mình để tạo ra các modal đẹp mắt và hiệu quả.