Wordpress

Integrar el cargador de ficheros de WordPress

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.

oEmbed y WordPress: URL vitaminadas

¿Conoces oEmbed? Muy posiblemente sí, aunque no lo sepas. Se trata de una tecnología que permite generar automáticamente un fragmento de código HTML enriquecido a partir de una URL. Por ejemplo, desde un vínculo a un vídeo de YouTube obtendríamos el código HTML completo del reproductor para visualizar el vídeo. O con el link a un tweet, que obtendríamos un snippet enriquecido, con el contenido del tweet, el avatar del usuario, botones de FAV y RT, etc. No estamos hablando de una biblioteca de programación que detecte servicios a partir de las URL y genere unilateralmente cada fragmento HTML. Se trata de un protocolo que implementan los propios servicios, como YouTube o Twitter. Existen implementaciones de oEmbed para los principales lenguajes de programación de desarrollo web, incluso para jQuery por si quisieras probarlo sin complicaciones.

Para muestra, un botón (el código HTML de este tweet se ha generado automáticamente por el motor oEmbed de Twitter):

oEmbed en WordPress

Desde la versión 2.9, WordPress ofrece la posibilidad de añadir Embeds (Incrustados), la herramienta que nos permite añadir un post y que con solo copiar la URL de, por ejemplo, un vídeo de Vimeo, este aparezca automáticamente. Por debajo funciona con el protocolo oEmbed.

Existen dos formas de utilizarlo:

  1. Si tenemos habilitada la opción Incrustados en Ajutes > Multimedia, podremos usarlo automáticamente. La única condición es que la URL se encuentre en solitario en su propia línea, y no enlace a ningún sitio.
  2. Si no tenemos habilitada la opción, podemos usarlo igualmente utilizando el shortcode , que permite igualmente añadir un ancho y alto máximo (por ejemplo http://example.com/service?v=123).

Wordpress aplica una política de whitelist para permitir servicios. Es decir, de manera predeterminada no está disponible cualquiera, sino que debe estar en la lista de autorizados. Entre estos servicios disponibles tenemos YouTube, Vimeo, DailyMotion, Flickr, PollDaddy, Twitter, Instagram o SlideShare.

¡Esperamos que esta miniguía os haya sido de utilidad!

wp_mail DB: Plugin para WordPress

A todos nos encanta WordPress, el popular CMS que utilizamos tanto para blogs como para páginas de propósito general. Tal como funciona out of the box es una verdadera delicia. Y si creemos que le falta algo, se lo añadimos mediante plugins. Este fue el caso cuando pensamos en qué ocurre con aquellos emails que envía WordPress mediante la función wp_mail, y que por alguna razón no llegan a su destino. ¿Y si algún cliente ha completado el formulario de contacto de tu web, y por alguna razón no te llega el mail? ¿Cómo podríamos enterarnos?

Por eso, hemos creado un pequeño plugin que almacene esta información en la base de datos, y permita consultarla desde el Escritorio de WordPress:

Vista de los correos enviados mediante wp_mail

Podrás localizar todos los emails enviados por WordPress con wp_mail() en el menú Herramientas, bajo la opción “Sent emails”.

Descargar