- shares
- Facebook Messenger
- Gmail
- Viber
- Skype
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 Hoangweb trên Twitter và Facebook
- shares
- Facebook Messenger
- Gmail
- Viber
- Skype