¿Qué son los Shortcodes? ¿Cómo crearlos en WordPress?

¿Qué son los Shortcodes en WordPress? Básicamente, y de forma muy resumida, la forma de hacer más con menos esfuerzo en este CMS.

Pero claro, esta definición, aparte de parecer sacada del refranero popular, se queda corta y no aporta valor alguno. Así pues, hoy queremos ver con detenimiento estos elementos interactivos, por qué son tan útiles, y aprender a cómo crearlos mediante Plugins para realizar diseños de sitios web complejos insertando una única línea de código. 

Exacto, vamos a enseñarte a crearlos mediante Plugins del propio WordPress para que puedas realizar, al menos, algunos de los Shortcodes más útiles y básicos por cuenta propia (también podrían realizarse mediante Hooks de WordPress (y en la mayoría de casos así te lo recomendaremos), pero ese es asunto para un posterior artículo).

Si quieres elaborar líneas de código en WordPress más complejas ponte en contacto con nosotros. Ojo, sin ningún tipo de compromiso; que encantados te diremos cómo puedes darle ese empujón extra a la página de tu negocio. Que por algo en Especialistas Web nos hemos especializado en el desarrollo y diseño web enfocado a WordPress. Valga la redundancia. 

 

¿Qué es un Shortcode? ¿Para qué sirven?

Perfecto; ya has finalizado la web de tu negocio (al menos su estructura básica). Has incluso redactado diversos artículos y entradas para mejorar su posicionamiento web y, para terminar de aprovecharlos, has trabajado en un banner con una llamada a la acción para que los usuarios, tus potenciales clientes, visiten y adquieran tus productos y servicios.

Un Banner que quieres incluir en todas y cada una de esas entradas y artículos. ¿Significa eso que lo tienes que hacer una y otra vez entrada por entrada? ¿Artículo por artículo?

Pues no, no tienes por qué hacerlo así. Ya que para eso están los Shortcodes:

Los Shortcodes en WordPress son códigos abreviados que puedes insertar en el editor de tu web. Códigos que te servirán para añadir funcionalidades al contenido de tu página sin que tengas que insertar lenguaje de programación a cascoporro.

Ejemplos de Shortcodes de WordPress son los que este CMS ya incluye por defecto: [ embed], [ caption], [ gallery], etc.

Los Shortcodes no dejan de ser porciones de código propias de WordPress. Una vez que estas etiquetas se ejecutan, no se enseña como tal dicho Shortcode al usuario (el código en sí), sino la función que contienen. Es decir, el texto, un botón o un banner (por mencionar tan solo unos pocos).

 

¿Para qué puedes usar un Shortcode en WordPress?

¿Qué funciones de utilidad puedes incluir mediante estos Shortcodes en WordPress? Buf, más bien la pregunta sería qué no puedes incluir. Formularios de contacto, tablas de precios, deslizadores, diseños de páginas reutilizables, anuncios… 

Atento a la siguiente lista de funciones que puedes implementar mediante Shortcodes en WordPress (y que conste que son solo unos pocos ejemplos):

• Menús de navegación.
• Tablas (de precios, de características de productos, etc.).
• Galerías de imágenes (tanto en formato Carrusel como Slider).
• Google Maps (¿alguna vez te has preguntado cómo insertar el típico mapa de Google Maps que toda empresa tiene dentro de su web?).
• Incluir vídeos de YouTube (y de otras plataformas similares como Dailymotion).
• Diversas funcionalidades de distintas Redes Sociales (Por ejemplo, ¿conoces los famosos Clicktotweet?).
• Formularios de contacto (de lo más útiles para obtener potenciales leads o datos de contacto de los usuarios).
• Anuncios (¿estás promocionando algún eBook o alguna promoción especial que quieras replicar en distintos sitios de tu página web? En los Shortcodes tienes la clave). 
• Diversos estilos para tus textos (subrayados con algún color y estilo determinado, sombras, testimonios, citas…).

¡Prácticamente cualquier cosa que quieras replicar en distintas partes de tu web!

 

¿Qué caracteriza a un buen Shortcode? 

Antes de explicarte cómo deben usarse estos Shortcodes en WordPress y cómo crearlos, creemos conveniente darte de antemano unos cuantos consejos para que estos se realicen de la forma más óptima posible. 

En nuestra opinión, un buen Shortcode ha de cumplir con las siguientes “normas”:

• Hazlos lo más sencillos posibles. A mayor sencillez, más fácil te resultará su mantenimiento, así como su modificación (por si alguna vez necesitas introducir algún cambio).
• Pocos parámetros. Sobre todo si estás empezando a crear estas etiquetas propias de WordPress. Cuantos menos parámetros introduzcas menos habrás de controlar.
• Nada de Shortcodes dentro de otros Shortcodes (por las razones expuestas en los dos puntos anteriores). Un ejemplo de este desaguisado sería: [lista4][button…][/lista4].
• Para Shortcodes relacionados con búsquedas, listas de productos o cualesquiera otros donde sea necesario insertar mucho HTML, lo mejor es (por limpieza y comodidad) tenerlos en un Template. 

 

Cómo usar los Shortcodes en WordPress

Pues bien, resulta que para insertar estas líneas de código no requieres de grandes conocimientos en programación. No al menos para insertar los Shortcodes más básicos. 

Desde la versión 2.5, WordPress cuenta con una API de Shortcodes para ayudarte a incluir estas funciones desde el panel de control.

Los pasos para introducir un Shortcode en el panel de WordPress de tu web serían los siguientes:

• 1º. Crea la función primaria en lenguaje PHP (para ello, puedes buscar funciones por Internet o preguntar a especialistas en el tema. Es más, contacta con nosotros y encantados te echaremos una mano). Por ejemplo, una posible función sería:

function shortcode_redes() {

return ‘<p>¿Te ha gustado el contenido de Especialistas Web? Compártelo en tus Redes Sociales</p>’;

}

add_shortcode(‘redes’, ‘shortcode_redes’);

Siendo “Function” la función en lenguaje PHP y “Redes” el nombre del Shortcode.

• 2º. Usa el conector add_shortcode para enlazar esa función que has creado a WordPress (como ves, nosotros ya la hemos incluido en nuestro ejemplo). Lo más probable es que encuentres esta función que acabas de crear en: /wp-content/themes/functions.php. 

¡Es muy importante que lo incluyas en el fichero functions.php de tu tema activo! 

• 3º. Guarda los cambios. Sabemos que es un paso muy básico, pero nada desespera más que perder el progreso de un laborioso trabajo…
• 3º. Ya tan solo queda insertar el Shortcode creado. En nuestro caso: [Redes]

 

De todos modos, si bien es cierto que para crear los Shortcodes más básicos no requieres de grandes nociones de programación, hemos de advertirte de que los archivos functions.php son muy delicados.

Tan delicados que pueden hacer que tu web deje de funcionar. 

Por eso mismo, a continuación vamos a enseñarte diversos Plugins de WordPress con los que elaborar e incorporar estas líneas de código en la web de tu empresa. Sin duda, la versión más cómoda y segura si no tienes conocimientos en el tema.  

 

Cómo crear un Shortcode en WordPress con Plugins

Sí, un Shortcode de WordPress podrías crearlo directamente con código. Pero ello requeriría ya de ciertas nociones de programación. 

Lo cierto es que es la solución ideal, pues así evitas tener que instalar Plugins que aumenten el peso de tu web y, por lo tanto, la ralenticen. Si quieres hacerlo de esta manera no dudes en ponerte en contacto con nosotros y encantados te echaremos una mano. 

Son muchos los Plugins de WordPress que cuentan con diversos Shortcodes preconfigurados. Tanto gratis como de pago. A continuación, vamos a recomendarte unos cuantos que, en nuestra opinión, son los mejores relación accesibilidad/versatilidad: 

• Shortcodes Ultimate: y es que en un listado de creación de Shortcodes mediante Plugins en WordPress, Shortcodes Ultimate no puede faltar.  Con este plugin (con más de 800.000 instalaciones activas y una valoración de 4,9 sobre 5) tendrás a tu disposición más de 50 Shortcodes totalmente configurados y listos para mejorar la funcionalidad y diseño de tu web (todos ellos responsivos). Desde botones, a cabeceras, cajas, divisores… Y todo ello por el módico precio de 0 €. 
• Easy Bootstrap Shortcodes. Perfecto para insertar elementos sencillos como botones, barras de progreso, columnas, efectos en las imágenes y cientos y cientos de iconos para colocar en cualquier parte de la web de tu negocio. Iconos que, además, podrás personalizar cambiando su tamaño y color de forma rápida y sencilla.
• Intense – Shortcodes and Site Builder. Si en los Plugins gratuitos de WordPress no encuentras el Shortcode que buscas, seguramente sí lo hagas con Intense: más de 100 Shortcodes para WordPress con un diseño e interfaz muy intuitivos y fáciles de usar. Aparte de que podrás crear tus propios Shortcodes gracias a su constructor de sitios web.

PD: hablando de Plugins, hace poco escribimos un artículo con los 10 mejores Plugins de WordPress (en nuestra opinión), que podría serte de utilidad. 

 

¿Necesitas ayuda?

Esperamos muy sinceramente que las anteriores descripciones, pasos, consejos y Plugins te sean de gran ayuda a la hora de crear Shortcodes en la página web de tu negocio. En serio, porque ahorran muuuuuuuuuuuuucho tiempo.

En Especialistas Web usamos en gran medida estas líneas de código para que, precisamente, nuestros clientes puedan usar sus funciones de manera rápida y sencilla siempre que lo necesiten.

¿Que han escrito un artículo y quieren introducir una llamada a la acción para que los usuarios compartan el contenido vía Redes Sociales? Shortcode al canto. ¿Que necesitan integrar un formulario para recabar los mails de los usuarios que han descargado su eBook? Más de lo mismo.

Opciones y posibilidades hay tantas como soluciones necesites implementar en tu sitio web.

Por eso mismo, si podemos serte de ayuda, contacta con nosotros de inmediato. Que sin ningún tipo de compromiso te asesoraremos sobre el mejor resultado para tu negocio.