Creando Shortcodes personalizados en WordPress

Muchas veces cuando estamos desarrollando un nuevo proyecto necesitamos que el sitio presente contenidos que no vienen por defecto pero que pueden ser dinámicos como una lista a partir de una base de datos o simplemente una fecha, por ello les comparto un par de formas de generar y agregar Shortcodes personalizados en WordPress.

Pero empecemos con:

¿Qué es los Shortcodes en WordPress?

Un shortcode es un fragmento de código que permite añadir a tu web, publicación, maquetador o widget imágenes, contenido o funciones sin tener que utilizar código directamente al momento de hacer una entrada o página, con simplemente agregar un fragmento de texto previamente declarado ya sea por un plugin o tema dentro de tu instalación de WordPress.

En el caso de wordpress los Shortcodes son cadenas incluidas entre corchetes [] que el sistema interpreta de acuerdo a como estén declarados, lo que facilita incrustas información reutilizable sin preocuparse por códigos complejos o buscar la forma de agregar fragmentos de código dentro de una publicación.

¿Qué tipos de Shortcodes existen en WordPress?

Principalmente 2:

[shortcode]
[shortcode]Contenido[/shortcode]Lenguaje del código: CSS (css)

• Shortcodes de cierre automático: Los Shortcodes de cierre automático no necesitan de una etiqueta de cierre como las galerías o los generados por plugins como Contact Form 7
• Shortcodes de cierre: Estos necesitan una etiqueta de cierre y generalmente sirven para manipular el contenido entre la etiqueta de apertura y la de cierre.

¿Cómo utilizar un shortcode en WordPress?

Dependiendo de dónde quieras utilizarlo hay distintas opciones:

• En entradas y páginas: dependiendo si utilizas Gutemberg o el editor clásico es bastante sencillo, para Gutemberg debes agregar el bloque shortcode y posteriormente dentro del campo que aparece agregamos el shortcode, para el el editor clásico basta con agregarlo dentro del contenido.
• Widgets: en el caso de widgets es prácticamente lo mismo que para entradas y páginas solo que en la sección de widgets.
• Dentro del tema: en el caso de que se quiera utilizar dentro de un tema podemos utilizar código php directamente como el que muestro a continuación:

<?php echo do_shortcode("[shortcode]"); ?>Lenguaje del código: HTML, XML (xml)

Cómo crear un shortcode personalizado en WordPress

Para empezar veamos un poco de la documentación de wordpress acerca de shortcodes donde podemos encontrar algunos ejemplos ya con un poco más de información crearemos nuestro primer shortcode.

add_shortcode( string $tag, callable $callback )Lenguaje del código: PHP (php)

Siguiendo la documentación vemos la función anterior para explicarlo simplemente $tag se refiere a la etiqueta que utilizaremos en nuestro short code y $callback a la función que llamaremos para generar el contenido.

Por ejemplo si vamos a hacer un shortcode que nos muestre la fecha de hoy podríamos hacer algo así:

//creamos la función que nos presentará la fecha
function fecha_hoy(){
$meses = array("","Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre");
$mes = $meses[date('n')];
$dia = date('j');
$anio = date('Y');
return '<p>Algo para hoy '.$dia.' de '.$mes.' de '.$anio.'</p>';
}
//llamamos la función en un shortcode
add_shortcode( 'fecha_de_hoy', 'fecha_hoy' );Lenguaje del código: PHP (php)

Y con esto sería suficiente para crear nuestro shortcode pero ahora dónde lo ponemos para funcione al utilizar el shortcode [fecha_de_hoy] tenemos 2 opciones si lo vamos a utilizar desde un plugin o desde un tema, en el caso de un tema bastaría con agregar el código dentro del archivo functions.php del tema utilizado (recuerden utilizar un tema hijo para no perder sus cambios) y ya con esto podremos utilizarlo como se menciona arriba.

En el caso de los plugins basta con agregarlo dentro del plugin a activar pero para un ejemplo práctico haremos un plugin sencillo para wordpress:

Lo primero que haremos será crear una carpeta con el nombre de nuestro plugin en este caso mi-fecha y dentro de la carpeta agregamos un nuevo archivo php llamado mi-fecha.php con el siguiente contenido (podemos utilizar distintos contenidos pero este es el contenido básico se puede consultar la documentación en https://developer.wordpress.org/plugins/plugin-basics/):

mi-fecha.php

<?php

/*
 * Plugin Name: Mi fecha
 */
//creamos la función que nos presentará la fecha
function fecha_hoy(){
$meses = array("","Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre");
$mes = $meses[date('n')];
$dia = date('j');
$anio = date('Y');
return '<p>Algo para hoy '.$dia.' de '.$mes.' de '.$anio.'</p>';
}
//llamamos la función en un shortcode
add_shortcode( 'fecha_de_hoy', 'fecha_hoy' );Lenguaje del código: HTML, XML (xml)

Subimos nuestra carpeta por ftp a la ruta de nuestro sitio por ejemplo /public_html/wp-content/plugins/ y posteriormente lo activamos desde la sección de plugins, si todo está correcto ya podremos usar nuestro shortcode.

También podemos comprimir nuestra carpeta y subirlo por el instalador de plugins entrando a agregar nuevo plugin desde el menú plugins en la administración de wordpress, posteriormente seleccionamos subir plugin y seleccionamos nuestro zip, damos instalar, activar y listo.

Bonus

Corregir el problema “Archivo incompatible” al subir un plugin en WordPress

En ocasiones cuando subimos un plugin comprimido por nosotros podemos encontrar ese error (comúnmente en Mac y linux) y hay varias formas de corregirlo veamos algunas:

1. Descomprimir el archivo y volverlo a comprimir con windows, esto corrige el problema fácilmente.
2. Agregando la siguiente línea a nuestro archivo functions.php dentro de nuestro tema
   add_filter( ‘unzip_file_use_ziparchive’, ‘__return_false’ );
   La línea de código anterior le pedirá a WordPress que use la clase PclZip en lugar del módulo ZipArchive y desaparecerá el error.
3. Comprimir el archivo utilizando la terminal:
   Simplemente navegamos dentro de la terminal hasta llegar a la carpeta que contiene la carpeta del plugin y ejecutamos el siguiente código:
   zip -vr nombre-plugin.zip carpeta_plugin/

Espero que lo anterior les sea útil al genera nuevas funciones para su wordpress.