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. 🙂

¿Necesitas un presupuesto para un desarrollo WordPress a medida?

¿Quieres un plugin a medida que realice una funcionalidad concreta que necesitas para tu WordPress?

Solicita un presupuesto sin compromiso: