Creando su primer shortcode de WordPress
WordPress es el sistema de gestión de contenido (CMS) más utilizado en el mundo. Su diseño simple hace que sea fácil de usar para que todos puedan aprender lo básico en poco tiempo. Gracias a su popularidad, es posible encontrar una gran variedad de plugins y temas de WordPress en la web que satisfacen casi todas las necesidades comunes; como configurar un carrito de compras, administrar eventos, etc. Con estos complementos, puede crear un sitio web muy complejo sin escribir una sola línea de código.
Una de las características que hace que WordPress sea muy popular son sus shortcodes. De acuerdo a la documentación de WordPress.
Un shortcode es un código específico de WordPress que te permite hacer cosas ingeniosas con muy poco esfuerzo. Los shortcodes pueden incrustar archivos o crear objetos que normalmente requerirían muchos códigos complicados y feos en una sola línea. Shortcode = acceso directo.
Por ejemplo, un shortcode representaría una galería de fotos sin esfuerzo. Esta es una gran funcionalidad porque facilita significativamente el proceso de agregar contenido predefinido. Casi todos los complementos utilizan este enfoque para permitirle agregar algunas funcionalidades específicas a su contenido; como mostrar una lista de los eventos que creó con su complemento de eventos favoritos.
Sin embargo, ¿qué sucede cuando desea definir un shortcode para simplificar la adición de un contenido recurrente, por ejemplo, su firma o su información de contacto? Bueno, ¡puede definir su propio shortcode! Y, como todo lo demás en WordPress, ¡es bastante fácil! Veamos como:
Definiendo su función shortcode
Un shortcode es solo una función PHP que se llama cada vez que se usa el shortcode en una página o publicación. Entonces, para crear su propio shortcode, solo necesita definir una función que devuelva lo que desea mostrar cuando se utiliza el shortcode y registrarlo como un shortcode de WordPress. El lugar correcto para hacerlo es en el archivo functions.php de su tema. También puede crear un complemento completo para contener sus shortcodes en caso de que defina muchos de ellos o en caso de que quiera usarlos en diferentes sitios. Para este artículo, utilizaremos el archivo functions.php.
Para este ejemplo, supongamos que agregaremos un shortcode que devolverá su información de contacto (nombre, correo electrónico y teléfono). Entonces, en su archivo functions.php, agregue el siguiente código:
//[my-info]
function my_info_func( $atts ){
return "John Doe; [email protected]; (123) 456-7890";
}
add_shortcode( 'my-info', 'my_info_func' );
Usando el shortcode [my-info], devolverá lo siguiente:
Como puede ver en su definición, hay dos componentes. Primero la función my_info_func: define qué representará el shortcode en el contenido. Después, la llamada a la función add_shortcode. Esta función es una función de WordPress utilizada para definir su shortcode. Acepta dos argumentos: una cadena, que definirá cómo se llamará a nuestro shortcode (en este caso [my-info]) y un nombre de función que es la función asociada al shortcode.
¡Y eso es todo! En solo cuatro líneas hemos definido nuestro shortcode. Pero parece que le falta algo. ¿Qué pasa si nos gustaría mostrar solo el correo electrónico o el nombre? Bueno, como vimos en el shortcode
// [my-info display="all"]
function my_info_func( $atts ) {
$a = shortcode_atts( array(
'display' => 'all',
), $atts );
if ( 'all' == $a['display'] ) {
return "John Doe; [email protected]; (123) 456-7890";
}
if ( 'name' == $a['display'] ) {
return "John Doe";
}
if ( 'email' == $a['display'] ) {
return "[email protected]";
}
if ( 'phone' == $a['display'] ) {
return "(123) 456-7890";
}
return "invalid display";
}
add_shortcode( 'my-info', 'my_info_func' );
Con esta pequeña modificación, puede devolver solo los datos que desea. Como puede ver, estamos utilizando la función shortcode_atts para obtener los atributos. Esta función de WordPress le permite normalizarlos y definir valores predeterminados en caso de que no use el atributo al usar el shortcode. Para nuestro ejemplo, el atributo «display» usa «all» como valor predeterminado; entonces llamar a [my-info] devolverá la cadena con toda la información.
Usando [my-info display=”email”] solo devolverá la sección de correo electrónico de la información.
Antes de terminar, hay una pequeña mejora que podemos agregar a nuestro shortcode. A veces, necesitamos que nuestro shortcode devuelva código HTML en lugar de solo una cadena simple. Shortcodes permite hacer esto casi sin esfuerzo; vamos a verlo con nuestro ejemplo:
// [my-info display="all"]
function my_info_func( $atts ) {
$a = shortcode_atts( array(
'display' => 'all',
), $atts );
$display = "invalid display";
if ( 'all' == $a['display'] ) {
$display = "John Doe; [email protected]; (123) 456-7890";
}
if ( 'name' == $a['display'] ) {
$display = "John Doe";
}
if ( 'email' == $a['display'] ) {
$display = "[email protected]";
}
if ( 'phone' == $a['display'] ) {
$display = "(123) 456-7890";
}
ob_start();
?> <span class="contact-info" style="color:red"><?php echo $display; ?></span> <?php
return ob_get_clean();
}
add_shortcode( 'my-info', 'my_info_func' );
Usando ob_start() y ob_get_clean() le permite devolver el código HTML del shortcode.
Una vez más, usar [my-info display = ”email”] devolverá solo la sección de correo electrónico de la información, pero usará una etiqueta de extensión con color rojo para envolver el contenido.
¡Y eso es todo! Con solo unas pocas líneas, puede crear una herramienta muy poderosa que le ahorrará tiempo al agregar contenido a su sitio web de WordPress.
Llevo casi cuatro años trabajando con WordPress y siempre he considerado que los shortcodes son una de sus herramientas más poderosas. Son intuitivos, fáciles de aprender y enseñar y, como vimos en esta publicación, fáciles de crear y personalizar. Por ahí, hay miles de ellos definidos en WordPress y en complementos y temas que descubrirá. ¡Entonces, comience a crear sus propios shortcodes!
