Home WordpressWordPress cơ bản Tạo nút media upload trong wordpress

Tạo nút media upload trong wordpress

by admincp

Bước đầu tiên chèn thư viện wordpress.

//chen thu vien wordpress
function my_admin_scripts() {
    wp_enqueue_script('media-upload');
    wp_enqueue_script('thickbox');
    wp_register_script('my-upload', WP_PLUGIN_URL.'/my-script.js', array('jquery','media-upload','thickbox'));
    wp_enqueue_script('my-upload');
    //style
    wp_enqueue_style('thickbox');
}
add_action('admin_print_scripts', 'my_admin_scripts');

Bước 2: Tạo nút upload và text field để trả về giá trị. Bạn có thể tạo menu trong wordpress admin để test và copy đoạn html sau.

<input type="text" name="image_url" id="slide_image" value=""/>
<input type="button" id="upload_image" name="upload_image" class="upload-button" onclick="javascript:focus_editor();formfield = jQuery('#slide_image').attr('name'); tb_show('','media-upload.php?type=image&amp;TB_iframe=true'); return false;" value="Image"/>

Khi click vào nút upload sẽ hiển thị trình media uploader, trình uploader sẽ làm việc với text editor chính, mặc định media uploader làm việc với mce editor để tạo bài viết trong wordpress. Hàm dưới đây trình uploader sau khi upload ảnh sẽ Image url và lưu vào input text rồi trả uploader về editor chính.

<script>
function focus_editor(){
    window.restore_send_to_editor = window.send_to_editor;
    // send url back to plugin editor
    window.send_to_editor = function(html){
        if(formfield){
         imgurl = jQuery('img',html).attr('src');
         var data=formfield.val();
         formfield.val((data? data.replace(/[,s]+$/g,'')+',':'')+imgurl);
 
         formfield=null;
        }
        tb_remove();
        window.send_to_editor=window.restore_send_to_editor;
    }
}
    </script>

Chúc bạn thành công.

Hãy cho mình biết suy nghĩ của bạn trong phần bình luận bên dưới bài viết này. Hãy theo dõi kênh chia sẻ kiến thức WordPress của Vinastar trên TwitterFacebook

Liên hệ

Công ty chuyên Thiết kế website uy tín nhất Miền Bắc: http://vinastar.net

Hotline tư vấn: 0989 48 3456

Nguồn: Sưu tầm trên internet

You may also like

Leave a Comment