A menudo, necesitamos personalizar nuestro Wordpress con fragmentos de código muy específicos. Pero, en la práctica, esto puede resultar muy difícil sin la ayuda de algún atajo que nos quite trabajo de encima. Y este atajo son los shortcodes de Wordpress.
Por eso, aquí te explicare en breves términos qué son los shortcodes, cómo se insertan en las páginas web, y cómo crear los tuyos propios para añadir funciones personalizadas.
¿Qué es un shortcode en Wordpress?
Un shortcode en Wordpress es un código de una sola línea que se puede insertar en cualquier parte de una página web para incluir porciones de código con funcionalidades extra.
En otras palabras, son “atajos” que nos facilita la tarea de enriquecer el funcionamiento de nuestras páginas Wordpress sin necesidad de incluir parrafadas de código. De hecho, un misma funcionalidad de puede insertar fácilmente en varias páginas sin necesidad de estar repitiendo una y otra vez el mismo fragmento de código.
Esto facilita mucho la personalización del sitio y permite expandir sus funcionalidades sin grandes dolores de cabeza. No en vano muchos plugins, como WooCommerce por ejemplo, proporcionan multitud de shortcodes para diferentes funciones.
¿Cómo insertar un shortcode?
Lo primero que debes saber, es que los shortcodes se pueden insertar tanto en el editor visual como el HTML. De hecho, el editor Gutenberg te proporciona un tipo de bloque específico para shortcodes, pero igual puedes utilizar cualquier otro editor como el clásico.
Un shortcode se inserta escribiendo su nombre entre corchetes: [shortcode]. Por ejemplo, [woocommerce_checkout]. Cuando insertamos esta línea en alguna página, ya sea usando el editor visual o HTML, estamos añadiendo el proceso de pago en dicha página.
Pero los shortcodes pueden contener parámetros para una mayor personalización, como en el siguiente ejemplo:
[add_to_cart id=’132’]
Esta simple línea muestra no solo el contenido del carrito, sino también la interfaz para cupones y otros elementos del carrito. El valor del argumento “id” se utiliza para mostrar el precio del producto indicado junto con un botón de añadir al carrito.
En teoría, no hay límites en cuanto a la cantidad de parámetros que puede tener un shortcode.
Pero queda una tercera forma de insertar estos atajos, y es utilizando etiquetas de apertura y de cierre. Es decir, siguiendo la sintaxis [shortcode][/shortcode].
El contenido que se incluya entre ambas etiquetas puede ser recuperado por el fragmento de código al que apunta el shortcode. Por ejemplo, para realizar tareas como mostrar dicho contenido con algún estilo CSS aplicado, o utilizarlo para asignar un valor a una variable interna.
Como es lógico, esta forma de insertar shortcodes también admite argumentos. Y pasarle valores al shortcode a través de argumentos o el contenido entre las etiquetas de apertura o cierres es una cuestión de elección y conveniencia, ya que ambas formas son igual de válidas.
¿Cómo crear shortcodes?
Como vimos, muchos plugins traen shorcodes incorporados. Pero tú puedes crear los tuyos propios para adicionar cualquier funcionalidad extra que desees en tus páginas web.
Para ello, te recomiendo instalar el plugin Code Snippets, que te permite crear fragmentos de código PHP y asignarles un shortcode que luego podrás insertar en cualquier página de tu sitio.
Cuando tengas instalado el plugin, solo tienes que hacer clic en Fragmentos de código en el panel lateral de Wordpress y luego en Añadir nuevo. Te mostrará un editor donde escribir el código.
Le pones el título que desees (este no es el título del shortcode, sino el del fragmento de código como tal), y en el cuadro de abajo escribes tu código.
Para que tengas una idea, te dejo el siguiente ejemplo:
add_shortcode( 'hola_mundo', function () { $out = '<p>¡Hola, soy tu primer shortcode!</p>'; return $out; } ); Haces clic en el botón Guardar e insertas el shortcode [hola_mundo] en cualquier página que desees. Verás que te sale un párrafo que dice “¡Hola, soy tu primer shortcode!”.
Por supuesto, puedes utilizar funciones PHP con argumentos y hacer un código tan complejo como haga falta. Por eso, te invito a la tarea de investigar más y buscar ejemplos para que te lleves una idea más precisa de cómo hacerlo.
Plugins para insertar Shortcodes en Wordpress
- Shortcodes Ultimate.
- Display Posts Shortcode.
- Amr shortcode any widget.
- Column Shortcodes.
- Arconix Shortcodes.
Si te gustó el artículo, compártelo en tus redes sociales o déjame un comentario para saber tu opinión.