Los shortcodes son una característica súper potente de WordPress. En esencia, un shortcode es un placeholder para el contenido que desees. Quizás, uno de los shortcodes más populares es el de las galerías de imágenes de WordPres. Solo tienes que agregarlo en el editor visual de WordPress y, dicho texto, será sustituido por una galería de imágenes de las imágenes que hayas agregado al post. En este artículo te mostraré cómo funcionan los shortcodes y cómo puedes crear tus propios shortcodes a través de ejemplos sencillos.
¿Qué es un shortcode?
Como he dicho antes, los shortcodes esencialmente son reemplazados por otro contenido que hayas predefinido antes. Vamos a echar un vistazo a las bases de un shortcode a través de un ejemplo. Supongamos que queremos hacer referencia al propietario de tu sitio web dentro de un post:
«Según el propietario de nuestra empresa, Roberto Serrano, el objetivo principal de la web es generar beneficios. Roberto Serrano piensa que compartir también es importante«.
En lugar de escribir «Roberto Serrano», podríamos utilizar un shortcode.
«Según el propietario de nuestra empresa, [propietario], el objetivo principal de la web es generar beneficios. [propietario] piensa que compartir también es importante«.
Esto nos permitiría cambiar el nombre del propietario de la web cuando nos de la gana. Es decir, si alguna vez el actual propietario se va de la empresa, podremos cambiarlo y en los posts antiguos que se haga referencia al propietario mediante este shortcode, se actualizará automáticamente.
Crear tu propio shortcode es bastante simple. Para ello utilizaremos la función add_shortcode(). Dicha función indica a WordPress que vamos a crear un nuevo shortcode, y a dicha función le podemos asignar una función de PHP personalizada para gestionar lo que queremos mostrar.
add_shortcode('propietario', ‘mostrar_propietario');
function mostrar_propietario() {
return ‘Roberto Serrano';
}
Este código debes añadirlo en el fichero functions.php de tu tema o en el plugin específico para ello (si es que lo tienes).
La función add_shortcode cuenta con dos parámetros: el primero de ellos es el código que utilizarás para llamar al shortcode (ya sabes, lo que irá entre corchetes []), y el segundo parámetro es el nombre de la función que gestiona la salida, es decir, lo que queremos mostrar.
Atributos del shortcode
Es importante recalcar que nuestros shortcodes también pueden utilizar atributos. Por ejemplo, si quieres que el propietario del sitio web se muestre en negrita, puedes hacer hacer que el shortcode admita un atributo, al cual llamaremos «negrita», el cual si está a true, el nombre del propietario se muestre en negrita.
add_shortcode('propietario', ‘mostrar_propietario');
function mostrar_propietario($atts) {
$atts = shortcode_atts( array(
‘negrita' => false
), $atts );
if( $atts[‘negrita'] == true ) {
return ‘<strong>Roberto Serrano</strong>';
}
else {
return ‘Roberto Serrano';
}
}
Es posible que este código te abrume un poco, pero en realidad es bastante sencillo. En primer lugar, comienza visualizando cómo quieres utilizar el shortcode. Yo ideé mi shortcode para utilizarlo tal que así:
[propietario negrita=’true’]
En nuestra función de salida utilizamos la función shortcode_atts() para parsear todos los atributos y asignarles valores por defecto. Es decir, nos aseguramos de que si no especificas cuál es el valor de «negrita», se establece por defecto en false.
Shortcodes con contenido
Los shortcodes con contenido se suelen utilizar cuando un trozo de tu contenido necesita un formato HTML especial. Imaginemos que en tu sitio web utilizas un formato de título tal que así:
<h1><span class="fa fa-check"></span>Mi título</h1>
Como ves, el título va acompañado de un pequeño icono de check gracias a la fuente de iconos FontAwesome. Podemos convertir todo esto en un shortcode para que los no iniciados en diseño web tengan que escribir los tags HTML.
[titulo icono='check']Mi título[/titulo]
En este shortcode hemos utilizado todo lo visto anteriormente, es decir, un shortcode, un parámetro y contenido. El contenido (es decir, Mi Titulo) se pasa a nuestra función de salida como el segundo parámetro.
add_shortcode(‘titulo', ‘titulo_con_icono');
function titulo_con_icono( $atts, $content ) {
$atts = shortcode_atts( array(
‘icono' => ‘pencil'
), $atts );
return ‘<h1><span class="fa fa-' . $atts[‘icon'] . '">' . $content . ‘</h1>';
}
Te habrás dado cuenta de que el icono que utilizaremos por defecto cuando en el shortcode no se indique nada, será pencil. El contenido viene en el segundo parámetro de nuestra función de salida y lo utilizaremos dentro de los tags HTML para mostrar la salida a nuestra conveniencia.
Y hasta aquí nuestro artículo sobre cómo crear tus propios shortcodes de WordPress. Espero que te haya gustado y, si te ha resultado útil, no dudes en compartirlo en redes sociales. ¡Nos leemos!
