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

alojamiento wordpress

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://&#8221; /> <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. 🙂

Salud!!!

 

P.D: Podeis probar mis últimos juegos para móviles. Si ponéis una valoración en alguno me haceis un favor 😉

ico_beheading_androidico_beheading_iosico_beheading_wpGalactic InsectsGalactic InsectsGalactic InsectsSnow SoccerSnow Soccer

alojamiento wordpress

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!!!!

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s