Upload ảnh với giao diện "xịn" trong Wordpress
wordpress
9
upload ảnh
1
White

tungvn viết ngày 04/11/2015

Bạn là WordPress Developer?
Bạn đã từng viết những đoạn code dài chỉ để quản lý đống ảnh cho từng post với giao diện upload mặc định, trong khi hậm hực rằng chẳng có chỗ nào cho bạn dùng đến WordPress Media Frame (WP Media) giống như chọn Featured Images rất tiện dụng?
Hmm…
Thực ra là có cách để sử dụng nó!

Bài đăng dành cho những ai đã làm việc với Wordpress ^^

Sau khi mò vào trong core của WordPress, mình đã tìm thấy cách để có thể sử dụng WP Media một cách ngon lành. Dưới đây sẽ là các bước cần thiết để có thể áp dụng được nó cho những dự án sau này của bạn.

Đầu tiên là việc load các thư viện cần thiết cho WP Media, bao gồm có thư viện jQuery và WP Media. Jquery thì luôn được load sẵn trong trang quản trị Wordpress. Bước này sẽ không cần thiết nữa, nếu như ở trang post editor của bạn đã có metabox Featured Image.

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

Tiếp đó là đến phần hiển thị và thao tác với ảnh. Coi như là bạn đã tạo ra một metabox mới (add_meta_box) và bây giờ chúng ta sẽ thao tác trong metabox này. Giống như mọi dữ liệu khác trong form post editor, bạn cần có một thẻ input để lưu trữ dữ liệu ảnh (ở đây mình lưu trữ các id của ảnh đã chọn) và một nơi để hiển thị các ảnh đã chọn ra cho người dùng nhìn thấy. Nó sẽ đại loại như thế này.

    <!-- List of images id to save -->
    <input id="gallery_input" type="hidden" name="gallery" value="">
    <!-- The button to select images -->
    <p><button id="pick_images" class="button">Select Images</button></p>
    <!-- Show images, use wp_get_attachment_image_src -->
    <ul id="display_gallery"></ul>

Phần tiếp này là phần quan trọng nhất trong tips này, đó là sử dụng các thư viện mình đã add vào khi nãy để thao tác với ảnh. Mình sẽ comment trong code để mọi người thấy rõ hơn.

    jQuery(document).ready(function($) {
        /* 
        We have a button which has id attribute "pick_images"
        When click the button, the wp media popup show. We choose images and press Select (like set featured image)
        */
        $('#pick_images').click(function(event) {
            event.preventDefault(); // Prevent reload page when click the button

            // Initialize. 
            var file_frame = wp.media.frames.file_frame = wp.media({
                title: 'Select Images', // The title of frame
                library: {}, // Library of images, like as post
                button: {text: 'Select'},
                multiple: true // Enable select multiple
            });

            /* 
             * Select images if it is selected, after you click button "pick_images" again
             */
            file_frame.on('open', function() {
                var images = $( '#gallery_input' ).val();
                images = images.split( ',' ); // Get all images id and split to an array

                // And select it
                var selection = file_frame.state().get( 'selection' );
                $.each(images, function(index, el) {
                    var attachment = wp.media.attachment( el );
                    attachment.fetch();
                    selection.add( attachment ? [ attachment ] : [] );
                });
            });

            // Select images event
            file_frame.on('select', function() {
                var attachment_ids = [];
                attachment = file_frame.state().get( 'selection' ).toJSON();
                imgs_html = '';

                // Each selected image, push the id of image to an array and show image
                $.each( attachment, function(index, item){
                    attachment_ids.push( item.id );
                    imgs_html += '<li data-image-id="'+ item.id +'">';
                    imgs_html += '<img src="'+ item.url +'" />';
                    imgs_html += '<a class="del-img" href="javascript:;">';
                    imgs_html += '<span class="dashicons dashicons-dismiss"></span></a>'; // Button to remove image
                    imgs_html += '</li>';
                });

                $( '#gallery_input' ).val( attachment_ids.join( ',' ) ); // List of all images
                $( '#display_gallery' ).html( imgs_html ); // Show images
            });

            // Open media popup
            file_frame.open();
        });
    });

Việc cuối cùng của công việc này là lưu chỗ id của ảnh ta đã chọn trên đây. WordPress hỗ trợ hook save_post cho công việc này.

    // Save metabox for post
    add_action( 'save_post', 'custom_save_metabox_for_post' );
    function custom_save_metabox_for_post( $post_id ){
        if( wp_is_post_revision( $post_id ) )
            return;

        if('post' == get_post_type( $post_id ) ){ // The name of post type
            if( isset( $_POST['gallery'] ) )
                update_post_meta( $post_id, 'gallery', $_POST['gallery'] );
        }
    }

Mọi việc tới đây là hoàn tất.
Cám ơn mọi người đã đọc bài đăng này của mình. Hy vọng nó sẽ hữu dụng ^^

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

tungvn

1 bài viết.
6 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Bài viết liên quan
Male avatar
9 1
Để bắt đầu làm thêm của riêng bạn thì ban đầu bạn phải có một theme trắng ( Blank theme ) để bắt đầu Theme trắng là gồm có các thư mục và file cơ b...
Doan Van Manh viết 3 năm trước
9 1
White
0 1
Hôm qua mình có setup 1 cái VPS để cài wordpress. Cài được rồi thì upload theme & plugins lên để dùng thì wordpress không có quyền ghi lên thư mục ...
Toan Nguyen viết hơn 3 năm trước
0 1
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
1 bài viết.
6 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!