Shortcodes WordPress

Actualizado: julio 2018


Shortcodes WordPress
4,9 (98,93%) 56 votes

El gestor de contenidos WordPress introdujo la API de shortcodes a su codex con el lanzamiento de la versión 2.5 hace ya varios años con el fin de que cualquier usuario de WordPress pudiese ejecutar código dentro de un post, página o widget desde el mismo editor del panel de administración sin saber programar, pero …

¿Qué es un Shortcode de WordPress y para qué sirve?

Un shortcode de WordPress es un pequeño fragmento de código que permite de forma rápida y sencilla cargar una funcionalidad predefinida directamente desde tu panel de administración de WordPress en cualquier punto del contenido de tu web.

¿Para qué sirve un shortcode de WordPress?

Los shortcodes sirven para hacer casi cualquier cosa que te puedas imaginar, ahorrándote un montón de dolores de cabeza con tan sólo añadir una pequeña etiqueta o línea de código en tu editor.

  1. Titulares y Divisiones de contenido
  2. Pestañas para separar el contenido y acordeones
  3. Subrayar algunas palabras con el color que quieras
  4. Citas, columnas o listas
  5. Cajas, sombras y notas
  6. Tablas, burbujas explicativas y menús de navegación
  7. Incluir videos de Youtube y otras plataformas
  8. Galerías de imágenes en forma de slider y carousels
  9. Google maps y la mayoría de redes sociales también tienen su shortcode
  10. Sección con fondo a toda pantalla, con estilo parallax y con imagen de fondo.
  11. Incluir iconos, textos con sombra y testimonios
  12. Barras de progreso, tablas de precio y mucho mucho más

Si quieres saber más sobre estos fragmentos de código, te recomiendo que sigas leyendo o si lo prefieres, que descargues gratis el manual WordPress en pdf y español en el que explico paso a paso como funciona este magnífico CMS.

¿Por qué usar shortcodes en WordPress?

Los shortcodes de WordPress se utilizan en gran medida para llevar a usuarios de cualquier nivel la posibilidad de usar funciones de código complejas sin la necesidad de saber programación y sin siquiera tener que salir del panel de administración.

En resumen, un shortcode de WordPress te permite cargar en tu web cualquier funcionalidad previamente creada por algún desarrollador de temas y plugins para WordPress o por ti mismo para hacer tareas tan simples como añadir un icono o cambiar el color de un texto, hasta incluir en cualquier punto de tu web un carrousel o slider de imágenes que ocupan todo el ancho de tu sitio.

¿Cómo usar shortcodes de WordPress en tu web?

Para usar un shortcode de WordPress tan sólo hay que insertar la etiqueta correcta entre corchetes dentro del editor visual de WordPress en cualquier entrada, página, widget …

Por ejemplo un shortcode básico para crear una galería sería:

[Gallery]

Shortcodes básicos

WordPress incluye varios shortcodes en cualquier instalación básica que puedes usar para tus proyectos.

Sólo tienes que añadir el shortcode apropiado según tus necesidades:

  • [audio]
  • [caption]
  • [gallery]
  • [embed]
  • [playlist]
  • [video]

Shortcodes incluidos en themes de WordPress (free o premium)

Si usas alguna plantilla gratis de calidad o la mayoría de las premium lo normal es que ya incluyan ciertas opciones para insertar códigos cortos o “shortcodes” con los que mostrar tus contenidos de una forma mucho más atractiva.

Es importante que tengas en cuenta que si utilizas un shortcode proporcionado por un theme, ya sea gratis o premium, este contenido desaparecerá si eliminas o cambias ese theme; es por eso, que siempre recomendamos usar plugins en lugar de themes a la hora de incluir shortcodes para editar el contenido de tu WordPress.

Plugins de WordPress para añadir shortcodes

Existen bastantes plugins gratuitos para WordPress con los que puedes mejorar el aspecto visual de tu blog o web añadiendo shortcodes para optimizar el aspecto de tu contenido.

Pero si ninguno de las soluciones anteriores satisface tus necesidades, también hemos incluido en esta comparativa los mejores plugins de Shortcodes premium para añadir cualquier funcionalidad que imagines a tu WordPress en tan solo unos pocos clickks.

Sea cual sea la solución que elijas, podrás crear columnas, pestañas, tablas de precios, insertar iconos, botones y muchas más funcionalidades.

¡Empezamos!

Mejores plugins de shortcodes para WordPress gratis

Easy Bootstrap Shortcodes

Este plugin es realmente bueno para insertar elementos como botones, cajas coloreadas, barras de progreso, aplicar efectos a las imágenes, añadir columnas, etc…

También destaca porque pone a tu alcance cientos de iconos que podrás usar en cualquier parte de tu web, cabeceras, botones, cajas o sidebars… pero es que además, podrás cambiar el tamño y color de dichos iconos de una forma súper sencilla y rápida.

Este plugin añade a tu editor de texto otra barra tal y como ves aquí abajo.

Al seleccionar alguna de estas nuevas opciones, te aparecerá una ventana emergente en forma de pop-up con diversas opciones donde elegir en función del item seleccionado.

Ya sólo te quedaría probar las distintas funcionalidades que te proporcionan los shortcodes hasta conseguir el diseño que estés buscando para tu WordPress.

Como ya hemos dicho, hay cientos de shortcodes donde elegir, incluso puedes combinar varios.

Sólo para que te hagas una idea, estos son sólo algunos ejemplos de lo que podrás crear con un par de clicks gracias a este plugin de shortcodes para WordPress:

  • Acordeones
  • Iconos en el encabezado
  • Pestañas
  • Tablas
  • Listas
  • Imágenes “responsive”
  • Mensajes de notificación
  • Pop-over
  • Tooltips
  • Botones
  • Paneles
  • Barras de progreso
  • Etiquetas
  • Cajas
  • Sliders
  • Y mucho más…

Más info & Descarga

Shortcodes Ultimate

Shortcodes Ultimate es el plugin de shortcodes más famoso del repositorio oficial de plugins para WordPress con más de 700.000 instalaciones activas.

Este complemento promete optimizar cualquier tema de WordPress con su mega pack de shortcodes disponibles.

Este plugin dispone de una gran cantidad de shortcodes donde elegir, así como de un importante número de iconos para agregar a los distintos elementos.

Además de eso, la capacidad que tendrás para controlar dichos shortcodes e iconos (cambiar posición, color, tamaño, etc) también es muy amplia.

Para usarlo, una vez instalado debes hacer click en el nuevo botón que verás en el editor de texto de WordPress.

Se abrirá una ventana emergente donde podrás seleccionar el código que necesites insertar.

Como puedes observar tienes la posibilidad de filtrar estos elementos desde la parte superior de la ventana emergente.

Otra característica que nos encanta es la posibilidad de pre visualizar el elemento antes de insertarlo.

Y otra de sus buenas cualidades es que dispones de ejemplos (y sus códigos correspondientes) que te ayudarán a diseñar tus propios elementos.

Este es sin duda, de los plugins que componen este listado, el que más me gusta.

Puntos fuertes:

  1. 40+ shortcodes de diseño profesional.
  2. Posibilidad de ampliar el plugin con extensiones o addons premium.
  3. 100% Adaptable a dispositivos.
  4. Editor de shortcodes para crear códigos propios.
  5. Editor CSS personalizado.
  6. Widget personalizable.
  7. Filtros de shortcodes por categorías.

Más info & Descarga

ShortCodes Ultimate Tutorial en Español para WordPress

Video de Funtor

WordPress Shortcodes plugin

WordPress Shortcodes es otro plugin gratuito bastante popular que te facilita la tarea de incrustar shortcodes en tu contenido para conseguir una estructura más elaborada que enamore a tus lectores.

Con más de 10.000 instalaciones activas, este plugin ofrece un panel de configuración e interfaz de usuario muy amigables, por lo que no tardarás en empezar a usarlo con total soltura, simplemente carga el shortcode que necesitas y reemplaza el contenido de muestra por el tuyo propio.

Para empezar a usar este plugin, debes ir a tu panel de administración y una vez instalado y activo, pulsar sobre el botón “Shortcode” que hará que emerja una ventana con todas las opciones disponibles.

Pestañas o tabs optimizadas para SEO, secciones o acordeones, columnas, mensajes en cajas, botones, cajas de autor, listas y otras muchas opciones estarán a un par de clicks si te decides por este plugin para WordPress.

Por si todo esto fuera poco, WordPress Shortcodes también incluye un editor visual que se actualiza automáticamente al instante según realizas cambios para que puedas ver cómo está quedando tu contenido sin perder tiempo e incluso te permite personalizar todos los elementos con tu propio código CSS de forma fácil y rápida.

Resumiendo:

  1. Más de 26 shortcodes y elementos diferentes
  2. 100% personalizable, incluso con tu propio CSS
  3. Fácil y rápido de usar gracias a la previsualización automática.
  4. Ofrece la posibilidad de cargar shortcodes condicionales que se muestran o esconden según tus requisitos
  5. Tienes la opción de ampliarlo con extensiones premium

Descargar gratis

Olevmedia

Este plugin es bastante más básico si lo comparamos con los dos anteriores, pero podrás insertar varios elementos que los otros no te permiten y que quedan realmente bien.

De nuevo, una vez instalado y activado, tendrás un nuevo botón en el editor de texto de WordPress con el que podrás insertar el código que te plazca.

También podrás insertar contadores animados que empezarán desde cero y llegarán hasta el porcentaje que le hayas indicado, así como insertar tablas de precios.

En definitiva multitud de opciones que merece la pena que conozcas.

Aunque como te comentaba anteriormente, tanto Easy Bootstrap Codes como Shortcode Ultimate lo superan, puede ser un buen complemento a para estos.

Más info & Descarga

CPO Shortodes

Con este plugin también podrás insertar los códigos básicos que la mayoría de usuarios buscan, tales como columnas, pestañas y cajas.

Lo cierto es que comparado con los anteriores también se queda corto.

Es muy poco funcional que inserte los shortcodes sin permitirte previamente ninguna personalización, como elegir tamaño o color de cierto elemento.

Lo más fácil sería no incluir CPO Shortcodes en esta lista, pero si lo incluyo es porque ofrece algunos códigos que lo diferencian y creo que merece la pena que los conozcas.

Uno de ellos es “section background”, con el que podrás insertar una zona coloreada en tu página o artículo.

Recuerda que si tu sitio web tiene sidebar, esta zona coloreada la “invadirá”, de modo que solo podrás usar este elemento en páginas de ancho completo.

También dispondrás de un código para mostrar de una forma bastante atractiva los miembros de tu empresa o colaboradores en tu blog así como diferentes opciones de tablas de precios para tus productos:

Más info & Descarga

Comparativa plugins premium de shortcodes para WordPress

Si no has encontrado lo que buscabas entre las opciones gratuitas, recuerda que por una pequeña inversión, podrás ahorrar mucho tiempo y unificar recursos con uno de estos magníficos plugins premium:

Supreme Shortcodes Premium WordPress plugin

Sea cual sea la funcionalidad que estés buscando, lo más probable es que Supreme Shortcodes y su lista de más de 100 shortcodes sea la solución definitiva.

Por suerte, todos los shortcodes están organizados por categorías para que te sea más fácil encontrar lo que buscas.

Y si te parece poco, debes saber que este plugin es totalmente compatible con Visual Composer, un constructor visual de páginas que multiplicará exponencialmente las posibilidades de personalización de tu web cuando juntes ambos, pudiendo agregar elementos directamente y de forma visual desde la interfaz de Visual Composer.

La pega, es que no es gratuito, pero por una pequeña cantidad, tendrás a tu disposición todos los elementos que puedas necesitar para diseñar tu web a tu gusto, personalizando cada shortcode al máximo gracias a su amplio catálogo de customizaciones que podrás manejar sin salir de tu panel de administración de WordPress.

Cabe destacar:

  1. Cientos de shortcodes disponibles organizados por categorías.
  2. 100% responsive y personalizable
  3. Permite cargar tu propio CSS
  4. Iconos y botones con diseño 3D
  5. 100% compatible con Visual Composer
  6. Desde la página del plugin puedes probarlo gratis antes de comprar
  7. Incluye páginas pre-diseñadas listas para usar, por ejemplo:
    1. Página de clientes
    2. Sobre nosotros
    3. Página de contacto
    4. Conoce al equipo
    5. Estamos contratando
    6. Página de servicios
    7. Preguntas frecuentes (FAQ)
    8. Página de procesos
    9. Página de precios
    10. Historia de la compañía
    11. Galería
    12. Página de analítica

Probar gratis

Intense – Shortcodes and Site Builder

Este sencillo, pero potente plugin viene con más de 100 shortcodes para WordPress.

Su sencillo diseño e interfaz hacen que sea muy fácil de usar, y como no podía ser de otra manera, incluye multitud de opciones donde elegir, por ejemplo:

  1. Botones.
  2. Banners promocionales.
  3. Animaciones y barras de progreso.
  4. Cajas de aviso y notificaciones.
  5. Pestañas o tabs.
  6. Bocadillos con mensajes o tooltips.
  7. Carrousels y otros sliders.

Opciones extra:

Como el propio nombre sugiere, este plugin no sólo añade shortcodes a tu WordPress, si no que te da la opción de diseñarlo por completo con su potente constructor de sitios web.

Como bonus, incluye 19 estilos de post personalizados (también llamados custom post types) para que organices tu blog de una manera más efectiva según el tema a tratar (recetas, portafolio, testimonio, preguntas frecuentes, etc…)

Para terminar, por si no has tenido suficiente, este plugin también incorpora docenas de snippets (fragmentos de código reutilizables), entre los que se incluyen diseños de páginas, posts y un apartado de blog listo para usar.

Toda la información

Vision – Wordpress Shortcodes Plugin

Este plugin premium para crear shortcodes de WordPress viene de la mano de TrueThemes y se caracteriza por su sencillísima interfaz y su rapidez para incluir shortcodes en tu web con un solo click.

Este plugin contiene más de 100 utilidades para aportar toda la funcionalidad que buscas para tu web o blog.

Por supuesto incluye las funcionalidades necesarias para crear acordeones, pestañas, todo tipo de botones y listas, cajas, columnas, iconos animados, redes sociales, tablas de precios, barras de progreso también animadas, contadores de números, además de infinidad de colores y personalizaciones para cada elemento.

Para diferenciarse del resto de plugins, este generador de shortcodes lo que hace es cargar un pequeño icono para cada elemento directamente en el editor de WordPress, evitando así que tengas que estar buscando en infinitas listas cada vez que necesites algo.

Resumen características:

  1. Más de 100 funcionalidades y elementos.
  2. Diseño profesional y elegante que facilita su uso.
  3. Diseño responsive adaptable a dispositivos con pantalla retina.
  4. Permite configurar colores, diseños, iconos y otros ajustes.
  5. Los shortcodes se añaden al editor de WordPress directamente.
  6. Compatible con cualquier tema de WordPress.

Probar ahora

Cómo crear tu propio shortcode para WordPress

Si llegados a este punto, no has encontrado el shortcode que etabas buscando, o tienes una idea revolucionaria que cambiará el mundo del blogging, no te queda otra que ponerte manos a la obra o contratar alguien que te lo haga por ti.

Esto, que a simple vista puede parecer muy complicado, en realidad es una tarea bastante sencilla, gracias la API de shortcodes de nuestro CMS favorito.

Cómo funciona la API para crear Shortcodes de WordPress personalizados

Estos son los 5 pasos que debes seguir si quieres crear tu propio shortcode de WordPress:

  1. 1. Crea el código o funcionalidad que quieres que haga tu shortcode. (Algún texto que se repita, un listado de categorías o cualquier cosa que te imagines).
  2. 2. Guarda el código creado en el archivo functions.php de tu tema o en un archivo con todos tus shortcodes
  3. 3. Registra el nombre de tu shortcode con la función add_shortcode(‘nombre_de_tu_shortcode’, ‘nombre_function’)
  4. 4. Coloca el [nombre_de_tu_shortcode] en tu contenido para hacer que se cargue el código de tu shortcode personalizado para tu WordPress.
  5. 5. ¡Disfruta!

Se que parece imposible, pero es tan sencillo como esto.

Para demostrártelo y para que tengas un código de ejemplo que te sirva como base, te dejo uno de los shortcodes que más utilizo en mis proyectos.

Se trata de un shortcode de WordPress, que me permite con tan sólo añadir [year] en el contenido, tener siempre el año de mis comparativas, guías y tutoriales actualizados sin yo tener que hacer nada, de forma que los lectores de mis blogs, siempre valoran la información como recién actualizada desde el primer día del año sin tener que estar actualizando todos mis blogs en plenas campanadas de año nuevo.

Por supuesto, este shortcode se puede ampliar muchísimo y si te pones un poco creativo seguro que se te ocurren muchísimos usos para tus propios proyectos.

Opinión final sobre los mejores plugins de shortcodes de WordPress

Espera… ¿que aún no has tomado una decisión?

Nuestro consejo es que empieces por los 4 plugins gratuitos que hemos visto al principio.

Como ya hemos dicho, recomendamos Shortcode Ultimate por ser el más completo, aunque los demás también son buenos, este es el que ofrece más opciones a la hora de personalizar los elementos creados por cada shortcode.

Si lo que buscas es alguna funcionalidad concreta que no está disponible en el plugin Shortcode Ultimate, puedes probar con Olevmedia que permite insertar elementos de los que no dispone el anterior.

Debes tener en cuenta que si instalas varios de estos plugins puede que compartan algún código y creen algún conflicto por lo que quizás te merezca la pena valorar alguna opción de pago que incluya todos los shortcodes que buscas en un sólo plugin premium.

En caso de no encontrar lo que buscas, recuerda que siempre puedes crear tu propio shortcode que se ajuste perfectamente a tus necesidades.

¿Y tú, usas algún plugin para insertar shortcodes de WordPress diferentes a los que hemos visto?

Me encantaría saber tu opinión o recomendaciones en la zona de comentarios.

¡Te espero allí!

¿Alguna pregunta?

Si tienes alguna duda, o si te ha gustado el post, te espero en Twitter: @TutorialWP_

¡Sigue leyendo!