384
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&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 Twitter và Facebook
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