Usar Media Uploader de Worpress para subir imágenes desde tu plugin o tema.

 

Hola de nuevo:

Hoy os voy a mostrar la manera de añadir el Media Uploader de WordPress donde queramos dentro de el plugin o el theme que estemos desarrollando.

Esto nos permitirá subir y/o asignar la url de la imagen a un campo del formulario que estemos creando.

He añadido también un div contenedor donde se pre-visualizará la imagen seleccionada.

El código html que debemos añadir a nuestro formulario es el siguiente:

<label for=”upload_image”> <input id=”upload_image” type=”text” size=”36″ name=”ad_image” value=”http://” /> <input id=”upload_image_button” class=”button” type=”button” value=”Subir Imagen” /> <br />Introduce una url o sube una imagen. </label>

Ahora debemos crear un archivo javascript ,lo llamaremos por ejemplo wp_uploader.js  y lo vamos a guardar en una carpeta llamada js dentro de la carpeta del plugin que estemos creando.

Editamos el archivo que acabamos de crear y escribimos el siguiente código:

jQuery(document).ready(function($){


 var custom_uploader;


 $('#upload_image_button').click(function(e) {

 e.preventDefault();

 //Si el objeto uploader ya ha sido creado volvemos a abrir el dialogo.
 if (custom_uploader) {
 custom_uploader.open();
 return;
 }

 //Extendemos el objeto wp.media
 custom_uploader = wp.media.frames.file_frame = wp.media({
 title: 'Selecciona Imagen',
 button: {
 text: 'Selecciona Imagen'
 },
 library : { type : 'image'},
 multiple: false
 });

 //Cuando se selecciona un archivo ponemos su URL como valor del campo de texto
 custom_uploader.on('select', function() {
 attachment = custom_uploader.state().get('selection').first().toJSON();
 $('#upload_image').val(attachment.url);
 // Mostramos la imagen dentro del div con id "magen_preview".
 $('#imagen_preview').html('<img src="'+attachment.url+'" style="max-width:200px" />');
 });

 //Abre el dialogo del uploader..
 custom_uploader.open();

 });
});

Ahora solo nos queda añadir el archivo js que acabamos de crear:

En el archivo functions.php del theme o en nuestro plugin ponemos lo siguiente:

add_action('admin_enqueue_scripts', 'upload_script');
function upload_script(){
  wp_enqueue_media ();
  // Esto para cargarlo desde la carpeta js de nuestro plugin, si lo tenemos alojado el otro sitio cambiar url
  wp_enqueue_script( 'uploader',plugins_url( '/js/wp_uploader.js', __FILE__ ));
}

Y con esto ya tenemos un campo en nuestro formulario que al pinchar sobre el botón subir imagen nos abrirá la galería multimedia de WordPress para poder elegir o subir una imagen.

Como siempre espero que os sea de  utilidad. 🙂

Un saludo, y si aún no lo has hecho no olvides suscribirte a mi blog para no perderte los próximos posts  :-),



También puedes seguirme en Twitter en ‎@revigames y no olvides que me ayudas mucho si compartes este post en las redes sociales.

2 comentarios en “Usar Media Uploader de Worpress para subir imágenes desde tu plugin o tema.

  1. Excelente, estuve buscando en la web durante algunos días una explicación sencilla como esta de como hacer funcionar la media library de wordpress en las opciones de un theme excelente. ¡¡¡Muchisimas Gracias!!!!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *