WordPress es la plataforma web detrás de más del 40% de todas las webs en el mundo. Sin embargo, solamente un porcentaje muy pequeño de los usuarios le sacan todo el partido.
Imagen de Pixabay - © jamesmarkosborne
Esto es así porque las técnicas más potentes, aquellas que permiten personalizar WordPress para hacer con él literalmente lo que te dé la gana son unas grandes desconocidas
para el usuario medio de WordPress.
Una de esas técnicas son los así llamados shortcodes (códigos cortos o atajos) de WordPress.
¿Qué encontrarás aquí?
La contrapartida es que sólo puedes aprovechar a fondo los shortcodes sin limitaciones si tu plataforma es WordPress.org (que implica hosting propio).
En WordPress.com, salvo en los planes más caros, no puedes instalar plugins, de modo que no puedes usar los diversos plugins con shortcodes que existen gratis y de pago.
Sólo dispones de un conjunto limitado de shortcodes que no puedes personalizar.
De hecho, el potencial que entraña lo que vamos a ver es una de las principales razones por las que te recomiendo que, si quieres explotar el potencial de tu web, te dejes de
gaitas y te pases a la plataforma WordPress.org para poder acceder a éstas y muchas más posibilidades.
Si lo haces, verás que empezarás a jugar otra liga. Así de simple.
¿Qué son los “shortcodes” y cómo funcionan?
Los shortcodes de WordPress son una especie de códigos especiales muy simples que se marcan con corchetes, es decir, algo así como:
[código] o [código param1="valor1", param2="valor2"]
Estos códigos los puedes añadir como un simple texto en el editor de WordPress. Ojo con las comillas sipegas desde Word, pueden dar problemas puesto que las comillas no deben ser tipográficas, deben ser comillas dobles normales o comillas simples.
Los shortcodes funcionan de un modo muy parecido a las “macros” que quizás conozcas, por ejemplo, de las aplicaciones de Office. Es decir, ejecutan funciones determinadas, implementadas en este caso en el lenguaje de programación PHP (en el que está hecho también WordPress).
Por ejemplo: la tabla de contenidos que puedes ver al principio de esta página se ha creado con un shortcode. El shortcode empleado para generar esa tabla de contenido es el siguiente (en este caso pertenece al plugin Table of Content Plus):
[toc]
Para insertar la tabla de contenido nos limitamos a escribirlo en el punto que queramos que aparezca y listo. Una maravilla.
El código ejecutado por ese shortcode ya se encarga de localizar los subtítulos de esta página, maquetarlos como tabla HTML, añadirles sus respectivos enlaces para que el usuario pueda saltar directamente a esa parte de la página, etc. Esta idea resulta bastante mejor que editar la tabla a mano en cada post, ¿verdad?
De hecho, en esta web hay shortcodes hasta en la sopa, todas las cosas repetitivas que usan código HTML a medida las implementamos con shortcodes.
Por ejemplo, esta tabla de hostings para WordPress recomendados es el resultado de uno de los shortcodes programados a medida por mí mismo:
Y de paso, si vas a contratar un hosting, te recomiendo que les eches un vistazo porque son de lo mejor del mercado 😁
Cuando se habla de los shortcodes, hay que hablar también de sus primos: los hooks de WordPress (ganchos en castellano).
Hablaremos también a fondo sobre ellos en su momento, ahora voy a limitarme solamente a simplificar diciendo que son algo muy similar a los shortcodes, pero con la siguiente diferencia:
Los shortcodes los usamos desde el editor tiempo de edición, al crear un determinado contenido. Los hooks se usan en el código fuente. Por ejemplo: para que el tema incluya en el pie de cada página algún elemento adicional que, por defecto, no trae.
Cómo usar shortcodes en WordPress
Como ya decía arriba, el formato básico de un shortcode es algo así:
[ejemplo_shortcode]
La tabla de empresas de hosting de antes, por ejemplo, usa este formato simple:
[hostingBanner]
Shortcodes simples
El ejemplo de arriba usa el formato simple que se abre y se vuelve a cerrar inmediatamente con los corchetes de cierre. También se le pueden añadir parámetros (que podemos llamar también atributos) de esta manera:
[ejemplo_shortcode param1="valor A" param2="valor B"]
En esta misma web usamos, por ejemplo, con frecuencia el shortcode [pixabay]:
[pixabay url="https://pixabay.com/es/photos/c%C3%B3digo-html-digitales-codificaci%C3%B3n-1076536/" author="jamesmarkosborne"]
Este shortcode añade un texto a las imágenes de cabecera que cogemos casi siempre de Pixabay haciendo la atribución al autor enlazando la fuente de la imagen y mencionando su nombre.
Shortcodes con contenido
Pero también existen shortcodes que “envuelven” a un contenido para procesarlo. Es decir, un formato tal que así:
[ejemplo_shortcode] contenido procesado [/ejemplo_shortcode]
Por ejemplo: si te utilizado alguna vez la vista HTML al editar un contenido en WordPress, seguro que has visto el shortcode que usa WordPress para insertar imágenes con leyenda:
[caption]]<img class="size-full wp-image-2438" src="https://www.ciudadano2cero.com/wp-content/uploads/2021/04/jquery.webp" alt="" width="1280" height="600" /> Esta es la página principal de jQuery.[[/caption]
Nota: Los corchetes dobles que ves en "caption" no son correctos, deben ser simples, pero he en este caso no se podía ver el correctamente el código en este post si no los utilizaba.
Fíjate en que, en este caso, también se usan varios atributos.
Este shortcode procesa el contenido que envuelve y los atributos para generar finalmente el siguiente trocito de HTML:
<div id="attachment_2438" style="width: 1290px" class="wp-caption alignnone"> <img aria-describedby="caption-attachment-2438" loading="lazy" class="size-full wp-image-2438" src="https://www.ciudadano2cero.com/wp-content/uploads/2021/04/jquery.webp" alt="" width="1280" height="600"> <p id="caption-attachment-2438" class="wp-caption-text">Esta es la página principal de jQuery.</p> </div>
Ahora mismo no nos interesa saber en detalle qué hace exactamente para llegar del shortcode al resultado final, se trata simplemente de entender qué es y cómo se usa. Lo veremos más en detalle en su momento en otro post.
Como “escapar” shortcodes
A veces puedes querer utilizar el texto un shortcode simplemente como tal en sus entradas, sin que se ejecute, como ocurre en esta misma página sin ir más lejos.
En ese caso, para evitar la ejecución del shortcode, necesitas “escapar” el shortcode usando dos conjuntos de corchetes adicionales:
[[shortcode_escapado]]
Ten cuidado con esto porque es fácil despistarse, no poner los corchetes adicionales y obtener un resultado no deseado por ejecutarse “accidentalmente” el shortcodes.
Shortcodes incluidos por defecto en WordPress
WordPress ya incluye de fábrica una serie de shortcodes que son los siguientes, en los enlaces puedes ver la documentación de cada uno de ellos para ver cómo se utiliza en cada caso:
- audio: permite embeber ficheros de audio. Para ello, inserta un reproductor sencillo con los controles básicos.
- caption: inserta una imagen con una leyenda. Al utilizar las funciones de inserción de imágenes del editar de WordPress se inserta automáticamente.
- embed: WordPress permite embeber automáticamente una larguísima lista de contenidos de todo tipo con simplemente escribir su URL en el contenido, el usuario no se preocupa de nada, WordPress ya se encarga de todo. El ejemplo típico son los vídeos de YouTube que embebe automáticamente con el reproductor de YouTube. Con este shortcode el usuario lo puede hacer “semi-automático”, es decir, WordPress se sigue ocupando de los detalles, pero añade control adicional al usuario mediante atributos que éste puede modificar.
- gallery: éste es uno de esos shortcodes poco conocidos, sencillos y muy útiles. Con él se puede crear de una manera muy simple una galería de imágenes.
- playlist: otro ejemplo de un shortcode sencillo que puede ser muy útil. En este caso, muestra una lista ficheros de audio o vídeo.
- video: embebe vídeos de diferentes formatos con un amplio control de los mismos con mediante opciones específicas para vídeos. Este shortcode permite incrustar vídeos con estos formatos: mp4, webm, m4v, webm, ogv, wmv, flv.
Plugins de shortcodes gratuitos y de pago
Como siempre en el mundo WordPress, hay una increíble cantidad de plugins también para shortcodes. Aquí voy a
destacar tres plugins que te animo a explorar más en detalle por tu cuenta:
Shortcodes Ultimate: una colección de shortcodes muy útiles
Shortcodes Ultimate es probablemente el plugin de shortcodes más conocido. Consiste en una colección muy completa de diversos elementos
visuales y funcionales que puedes utilizar en el editor de entradas, widgets de texto o incluso en archivos de plantilla.
Ejemplos típicos de elementos que puedes crear con este plugin son botones, pestañas, cajitas con diversos estilos,sliders y carruseles y mucho, mucho más. Echa un vistazo al enlace para más detalles.
TablePress: tratamiento avanzado de tablas
Las tablas son uno de los elementos más importantes en un contenido y que tradicionalmente WordPress más ha descuidado, aunque esto ha mejorado mucho con el uso del editor Gutenberg.
Aunque en el anterior plugin viene ya incluido un shortcode para tablas, por ser un elemento tan importante, incluyo también este plugin 100% especializado en tablas que es TablePress porque tiene mucha más funcionalidad que el anterior.
Aparte de incrustar las tablas en posts, páginas o widgets de texto, con este plugin los datos de las tablas se pueden editar en una interfaz similar a la de una hoja de cálculo, por lo que no es necesario codificar.
Pero es que incluso puedes hacer una cosa como usar fórmulas (como en Excel) que serán evaluadas.
Todo esto se completa con funciones de ordenación, paginación, filtrado y la importación/exportación desde/hacia archivos Excel, CSV, HTML y JSON.
Una pasada en definitiva 😉
Shortcoder: crea shortcodes a medida
El plugin Shortcoder es un plugin de shortcodes muy especial porque permite crearlos a medida para tus necesidades específicas.
Con este plugin puedes crear shortcodes programando fragmentos (snippets) de código en HTML, CSS y JavaScript que se insertarán en la página en el lugar en el que emplees el shortcode.
Todo esto lo puedes hacer cómodamente desde el propio escritorio de WordPress, en un editor de código especial que trae el plugin.
Cómo crear tus propios shortcodes
En realidad, ya he respondido en las líneas de arriba a cómo crear tus propios shortcodes. Pero esa es solamente una de las vías y la más simple y limitada. La otra vía, más avanzada y mucho más potente, es la de programarlos en PHP.
Como esto es un tema un poco más avanzado, ya es conveniente remitirte a un contenido especializado sobre ello.
![[Página no encontrada]](https://www.ciudadano2cero.com/wp-content/plugins/bwp-foundation/src/ui/widgets/../../../images/icons/empty-post.png){kind=icon}
Así que te recomiendo que continues esta lectura con el post de arriba que te explicará en detalle cómo programar shortcodes en WordPress.
