A menudo, cuando utilizamos un plugin para WordPress, vemos que podemos subir con él ficheros mediante el diálogo que trae el propio WordPress:

cargador_de_archivos_de_wordpress

¿Cómo podemos utilizarlo nosotros en nuestros plugins? Su uso es un poco enrevesado, y no está documentado en el Codex. La mayor parte de la magia se realiza mediante JavaScript.

A partir de ahora vamos a asumir que tienes experiencia en desarrollo sobre WordPress, y que tienes, igualmente, un plugin sobre el que añadir el cargador de ficheros.
Toggle

En primer lugar vamos a añadir a la página los ficheros JavaScript necesarios:

        public static function register_scripts() {
            wp_enqueue_script(
                'miplugin-media-uploader-script',
                WP_PLUGIN_URL . '/miplugin/js/media.uploader.js',
                array('jquery', 'media-upload', 'thickbox'));
        }

Declaramos una función estática en el objeto de nuestro plugin (puedes ponerlo también en funciones convencionales). Esta función utiliza wp_enqueue_script() para registrar y cargar un nuevo script JavaScript, que recibe tres parámetros:

  1. Nombre con el que registramos el fichero.
  2. Ruta al fichero JavaScript.
  3. Array de dependencias (si las tuviera).

A continuación creamos el fichero js/media.uploader.js con el siguiente contenido:

jQuery(document).on('ready', function () {
	jQuery('#tuboton').on('click',function (e) {
		e.preventDefault();
		tb_show('', 'media-upload.php?type=image&TB_iframe=true&flash=0');
    });

    window.send_to_editor = function (html) {
		var imgurl = jQuery('img',html).attr('src');
		// Haz lo que desees con la ruta de la imagen
		tb_remove();
    };
});

Paso a paso: Cuando se cargue el documento, hacemos dos cosas:

  1. Al hacer clic en el botón con id “tuboton”, se mostrará el diálogo que nos permite subir una imagen. Lo hacemos mediante tb_show(). Fíjate que indicamos en el parámetro “type” el valor “image”. Podría también haber sido “video” o “file” entre otros.
  2. Definimos la función window.send_to_editor, que por defecto recibe un texto html. Aquí hacemos un pequeño hack: este popup está pensado para insertar imágenes a un post (es decir, enviarlas al editor), y lo hace en forma de código HTML (opcionalmente con un elemento <a>). Nuestro plugin no está interesado en el código HTML, sino en la ruta de la imagen. ¿Cómo la conseguimos? No es lo más eficiente, pero sí lo más rápido: utilizando jQuery. Finalmente, y tras apuntar la ruta de la imagen, eliminamos la ventana.

¿Y cómo utilizamos la imagen? Tras obtener su ruta en imagurl, podemos hacer con ella lo que deseemos: por ejemplo, añadirla a un input oculto, mostrar una miniatura, completar la ruta en un campo de texto, etc.

Esperamos que esta miniguía te haya sido de utilidad para integrar el cargador de ficheros de WordPress en tus propios plugins.