Javier Padilla

El blog de Javier Padilla

thehatch

Cofundador de Nabumbu, El Desmarque y otras historias. Programé mi primera web en 1997 y, desde entonces, diseño, programo, escribo y hago marketing online decentemente.

Cómo crear un plugin para añadir un nuevo shortcode a WordPress

Los shortcodes de WordPress permiten a los usuarios introducir elementos complejos en sus contenidos mediante un pequeño código entre corchetes.

En Moodyo hemos creado un plugin que habilita la inserción del shortcode ‘moodyo‘ para posibilitar que los usuarios metan la Foto-Tienda con un par de clics. Aquí puedes descargarlo y aquí puedes verlo en acción.

Pero, ¿cómo se crea un plugin para hacer un shortcode en WordPress? Pues es muy sencillo. Vamos a explicarlo, paso a paso.

En primer lugar necesitamos crear un archivo PHP que servirá de contenedor del código del plugin. Hazlo con un editor de texto plano.

Vamos a crear uno que se llame moodyo-shop-in-site.php. Por “culpa” de Álex, programamos todas las cosas en inglés…y la verdad es que me parece una buena práctica. Todos los programadores en España deben saber inglés y los del extranjero ya lo saben, así que facilitas la comprensión del código por parte de otros desarrolladores.

Lo primero que teclamos es la apertura y el cierre del archivo. En PHP se hace así:


Normalmente abro y cierro en la misma operación. Eso me asegura que no me voy a dejar corchetes o paréntesis abiertos.

Ahora tecleamos las primeras líneas. Éstas servirán para que WordPress pueda leer la información básica de nuestro plugin: descripción, autor, licencia, etcétera. Para ello se emplea el formato de comentario. Quedaría algo así:

/*
Plugin Name: La Foto-Tienda de Moodyo
Plugin URI: https://www.moodyo.com
Description: Inserta un producto de Moodyo en tu blog con un simple shortcode.
Version: 1.0
Author: @elpady
Author URI: http://www.elpady.com
License: GPLv3
*/

Explicamos un poco esto, aunque es bastante fácil de comprender. Plugin Name contendrá el nombre con el que queremos que se muestre nuestro plugin en el backend de WordPress. URI es la dirección web que quieres relacionar a tu plugin (tu empresa, tu blog…). Description contendrá la información que se encontrará el usuario a la derecha del nombre. Puede llevar código HTML para resaltar palabras o meter links. Version indica la versión :D. Como Author puedes poner tu nombre de desarrollador dentro de WordPress.org. Author URI es una dirección donde localizar al autor (su blog, web personal…). Finalmente, ponemos el tipo de licencia con License.

Con esto ya tendríamos un plugin que, aunque no hace nada, se puede subir e instalar y mostrará información en la zona Plugins de WordPress. Fácil, ¿verdad?

Ahora vamos al turrón.

WordPress tiene una serie de métodos para hacer funciones comunes. Existe una, por supuesto, para crear shortcodes y tiene la siguiente forma:

add_shortcode(‘identificador-shortcode’, ‘nombreMétodoQueEjecutamosConElShortocode’);

El ‘identificador-shortcode’ servirá para invocar a nuestro código con ese cómodo atajo que crearemos entre corchetes. En nuestro caso será ‘moodyo‘. Y el ‘nombreMétodo…’ es el nombre que recibe la función (método) que queremos ejecutar cada vez que se meta el shortcode en un post de WordPress.

En el caso que nos ocupa sería:

add_shortcode('moodyo', 'moodyoShopCodeBuilder');

De momento añadimos esta línea justo después del texto introducido al principio para identificar el plugin.

Ahora vamos con el código de nuestro sencillo plugin. Es decir, eso que se ejecutará cuando el usuario escriba el shortcode y que irá dentro del método que vamos a crear (llamado moodyoShopCodeBuilder).

function moodyoShopCodeBuilder($atts){
	
	// Set defaults if no parameter is provided. IMPORTANT: No camelCase or UPPERCASE accepted by WordPress
	$attributes = shortcode_atts( array(
    'uuid' => 'b6f240a2-539c-11e3-b17f-f028393ad7e7',
    'affid' => 'elpady-mjjs',
	'lang' => 'es',
	'color' => 'F16205',
	'width' => '100%',
	'height' => '500',
	), $atts );

Explicamos este nuevo pedazo de código. Es muy sencillo y sigue una fórmula habitual en WordPress. Cuando un shortcode no recibe ningún parámetro adicional, debe saber qué hacer con las variables requeridas para funcionar correctamente.

Para resolver este problema, el framework de WordPress tiene el método shortcode_atts. Al mismo se le proporciona un array con las claves y los valores por defecto que tendrían éstas. Con el método shortcode_atts llenamos el array $attributes[] con los valores indicados por el usuario y, cuando éstos no existan y sean obligatorios, por los que se indican por defecto. Así siempre estarán todos los parámetros necesarios.

En el ejemplo mostrado arriba lo que hacemos es poner un producto por defecto para el caso en el que el usuario solo incluya ‘moodyo’ sin ningún parámetro requerido (en este caso ‘uuid‘ porque determina el producto mostrado y ‘affid‘ que sirve para meter el identificador del afiliado que recibirá las comisiones si vende o que necesita saber el número de impresiones de su Foto-Tienda).

A continuación, tecleamos el código. Es una variable a la que se le van concatenando parámetros. Se podría haber hecho “del tirón”, pero me gusta romper las cosas “en pedacitos” cuando es posible y si sirve para aclarar las cosas.


// Declare the basic iframe if the $UUID parameter has been set
	$html="";

Lo que hacemos en esta parte del código es bastante sencillo. Creamos la variable $html y vamos concatenando la cadena que formará el código completo del iframe que permite mostrar el widget de la Foto-Tienda de Moodyo.

En cada línea vamos metiendo los valores aportados por el usuario con el shortcode o, en su defecto, por los valores predeterminados que aportará el método shortcode_att.

Finalmente, cuando ya he llenado de contenido la variable $html, la devuelvo con la siguiente línea:

// We return the code and that's all folks!
return $html;

Y listo. Ahora solo nos quedaría guardar el archivo y comprimirlo en un ZIP. Lo instalamos en nuestro WordPress y lo probamos añadiendo en nuestro contenido una línea como ésta:

[ moodyo uuid=dc668720-8ab4-11e3-b3cf-f98e9279768d affid=elpady-mjjs ]

Podríamos añadir color, lenguage, ancho y alto, pero para este caso es más que suficiente. Con eso probamos que el plugin funciona perfectamente.

Espero que te haya sido de utilidad. Si tienes alguna duda, puedes preguntar en los comentarios.

¡Ah! Aquí lo veis funcionando

Author: Javier Padilla

Share This Post On

Submit a Comment

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

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR