Tạo Modal Trong Trang Admin Wordpress

Modal là một hộp thoại tương tự như popup của trình duyệt tuy nhiên khác với popup thì nội dung của modal có thể được tùy biến. Để tạo modal trong phần admin của Wordpress chúng ta sử dụng thư viện ThickBox jQuery. ThickBox là thư viện được sử dụng bởi phiên bản Wordpress 3.5 và trước đó trong phần quản lý media. Các phiên bản sau của Wordpress không sử dụng Thickbox tuy nhiên thư viện này vẫn được Wordpress hỗ trợ và có thể được sử dụng để tạo modal box trong phần admin.

Tải Thickbox

Để sử dụng Thickbox đầu tiên bạn cần tải thư viện này sử dụng hàm add_thickbox() trong Wordpress. Hàm này không yêu cầu phải truyền vào đối số:

<?php add_thickbox(); ?>

Tạo Modal Sử Dụng Thickbox

Sau khi tải Thickbox chúng ta có thể sử dụng thư viện này để tạo modal. Đầu tiên bạn cần tạo một link để khi click vào đó modal sẽ xuất hiện:

<a href="#TB_inline?awidth=600&height=550&inlineId=my-content-id" class="thickbox">View my inline content!</a>   

Ở trên bạn cần chú ý:

• Giá trị của thuộc tính class của phần tử <a> phải bao gồm thickbox.
• Các giá trị trong query parameter trong địa chỉ URL của phần tử <a> sẽ được dùng để thiết lập Thickbox (xem thêm ví dụ dưới để hiểu rõ).

Trong URL của link trên bạn chú ý một số query parameter được dùng để thiết lập modal cho Thickbox như sau:

• #TB_inline: Quy định nội dung của modal sẽ được load từ một phần tử trong trang thay vì từ một iFrame.
• awidth=500: Quy định chiều rộng của modal
• height=550: Quy định chiều cao của modal
• inlineId=my-content-id: Sử dụng kết hợp với #TB_inline. Quy định giá trị ID của phần tử sẽ được dùng để gắn nội dung cho modal.

Ví Dụ

Bây giờ chúng ta cùng tạo một modal trong trang admin của Wordpress. Đầu tiên bạn thêm đoạn code dưới đây vào tập tin functions.php trong template hiện tại để tạo một metabox vào trang tạo bài viết phía admin:

add_action('add_meta_boxes','add_modal_meta_box_to_post');

function add_modal_meta_box_to_post() {
    add_meta_box(
        'modal_meta_box_post', //unique ID
        'Test modal box', //Name shown in the backend
        'display_modal_meta_box', //function to output the meta box
        'post', //post type this box will attach to
        'normal', //position (side, normal etc)
        'default' //priority (high, default, low etc)
    );
}

function display_modal_meta_box() {
}

ở trên chúng ta sử dụng add_meta_boxes hook kết hợp với hàm add_meta_box để thêm meta box vào trang tạo bài viết. Bước tiếp theo chúng ta cần làm là tạo logic trong hàm display_modal_meta_box để hiển thị nội dung của modal box:

<?php add_thickbox(); ?>
<?php function display_modal_meta_box() { ?>
<div id="my-content-id" style="display:none;">
     <p>
          This is my hidden content! It will appear in ThickBox when the link is clicked.
     </p>
</div>

<a href="#TB_inline?awidth=600&height=550&inlineId=my-content-id" class="thickbox">View my inline content!</a>   
<?php } ?>

Bây giờ bạn truy cập vào trang admin và thử tạo một trang bài viết bạn sẽ thấy một link hiển thị và khi click vào link này bạn sẽ thấy modal với nội dung của phần tử div#my-content-id hiển thị lên.