Guía rápida de WordPress – Shortcode en 5 minutos. Quinta y última (de momento) entrada de mi guía rápida de WordPress para desarrolladores Javascript (y n00bs en general).

Antes de seguir es posible que te interese leer el resto de artículos de la serie sobre desarrollo WordPress para frontenders Javascript:

Añadiendo funcionalidad a WordPress con shortcodes

Los shortcodes son funciones que podemos definir en nuestro WordPress para añadir funcionalidad de manera rápida.

A nivel práctico, los shortcodes son etiquetas que se utilizan para recubrir parte del contenido de una entrada de blog por ejemplo (o cualquier texto de la página) y aplicar una función que tú has definido.

Personalmente me parecen una manera brillante de añadir funcionalidad a una página de WordPress, aunque también tienen sus pegas, como por ejemplo, que el código de un shortcode (al ser PHP) sólo se ejecuta dentro de la propia página. Esto quiere decir que si alguien se suscribe a tu página por mail, en el correo no recibirá el contenido completo.

¿Cómo programar un shortcode?

Primero un ejemplo y luego cómo programar un shortcode:

Este ejemplo, hace que un div de un widget de una página se quede fijo cuando se hace scroll.

sticky shortcode

¿Cómo funciona este shortcode?

Aplicando un plugin jQuery sobre un elemento que le paso como parámetro al shortcode (además de las opciones del plugin jQuery).

Para ello hemos cargado un script Javascript con la función wp_enqueue_script y hemos añadido una función que aplica el plugin sobre un elemento jQuery.

Finalmente hemos añadido esta función como un shortcode a WordPress.

shortcode

Este otro ejemplo, hace que se muestre un div que simula una Terminal de Mac sobre un comando que se le pasa como parámetro.

terminal shortcode

shortcode

Para cargar el shortcode en WordPress utilizamos la función add_shortcode, que recibe como primer parámetro el nombre del shortcode y como segundo parámetro la función que se ejecutará.

La documentación completa sobre shortcodes aquí.