Como usar el gestor para subir archivos de wp

En muchas ocaciones lso usuarios de wp al crear una entrada ponemos contenido multimedia, y para poder hacerlo wp nos failita la vida con su getor de multimedia en el que podemos subie o seleccionar una imagen que ya tengamos previamente en nuestro sistema, en esta ocacion veremos como usarlo para nuestors temas o para nuestros plugins:

Paso 1:

Llamar a 3 librerias js (jquery, media-upload and thickbox) y un CSS para  thickbox, y agragamos el siguiente codigo en nuestro archivo principal del plugin:

 PHP | 
 
 copy code |
?

  1. function plug_upload_script(){
  2. if (isset($_GET['page']) && $_GET['page'] == 'page_plugin'){
  3. wp_enqueue_script('jquery');
  4. wp_enqueue_script('media-upload');
  5. wp_enqueue_script('thickbox');
  6. wp_register_script('wp_upload', PLUGIN_URL.'/js/wp_upload.js', array('jquery','media-upload','thickbox'));
  7. wp_enqueue_script('wp_upload');
  8.   }
  9. }
  10. function plug_upload_styles(){
  11. if (isset($_GET['page']) && $_GET['page'] == 'page_plugin'){
  12. wp_enqueue_style('thickbox');
  13. }else{
  14. echo 'no carga!!';
  15. }
  16. }
  17. add_action('admin_print_scripts', 'plug_upload_script');
  18. add_action('admin_print_styles', 'plug_upload_styles');

Paso 2

creamos el js  “wp_upload” al que llamamos en el codigo php anterior en la ruta que definimos en el mismo codigo

 jquery | 
 
 copy code |
?

  1. jQuery(document).ready(function() {
  2. alert ('funko!!');
  3.     var formfield;
  4.     jQuery('.onetarek-upload-button').click(function() {
  5.         formfield = jQuery(this).prev('input');
  6.         tb_show('','media-upload.php?TB_iframe=true');
  7.         return false;
  8.     });
  9.     window.old_tb_remove = window.tb_remove;
  10.     window.tb_remove = function() {
  11.         window.old_tb_remove();
  12.         formfield=null;
  13.     };
  14.     window.original_send_to_editor = window.send_to_editor;
  15.     window.send_to_editor = function(html){
  16.         if (formfield) {
  17.             fileurl = jQuery('img',html).attr('src');
  18.             jQuery(formfield).val(fileurl);
  19.             tb_remove();
  20.         } else {
  21.             window.original_send_to_editor(html);
  22.         }
  23.     };
  24. });

Paso 3

Por ultimo ponemos nuestro html

 HTML | 
 
 copy code |
?

  1. <input id="image_location" type="text" name="image_location" value="" size="50" />
  2. <input  class="onetarek-upload-button button" type="button" value="Upload Image" />

Prueba tu plugin!!

 

Leave a Reply

Your email address will not be published. Required fields are marked *