7 Consejos Esenciales para Usar Shortcodes en WordPress

Ya seas un usuario experimentado de WordPress o un principiante total, usar shortcodes puede desbloquear nuevas formas de personalizar tu sitio sin ningún conocimiento de codificación.

Los shortcodes te permiten agregar varias funciones a publicaciones, páginas y widgets sin escribir código. Muchos plugins y temas de WordPress también usan shortcodes para agregar diferentes elementos, como tablas de precios y calendarios de eventos.

En WPBeginner, hemos utilizado consistentemente shortcodes y plugins de shortcodes al crear sitios de WordPress para nuestros clientes o al probarlos para nuestros lectores. En el camino, hemos aprendido algunas formas de hacer que el uso de shortcodes sea más fácil y efectivo.

En este artículo, compartiremos algunos consejos esenciales para usar shortcodes en WordPress.

¿Qué son los Shortcodes en WordPress?

En WordPress, los shortcodes son pequeños fragmentos de código encerrados entre corchetes que te permiten agregar contenido dinámico o funcionalidad a tus publicaciones, páginas o widgets.

Aquí tienes un ejemplo:

[shortcode_ejemplo]

Cuando agregas contenido a un sitio web de WordPress, este pasa automáticamente por verificaciones de seguridad y filtros para asegurar que ningún código dañino llegue a las publicaciones, páginas o comentarios. Esto significa que no puedes escribir código directamente en estas áreas.

Sin embargo, hay ocasiones en las que podrías necesitar agregar código específico a estas secciones. Los shortcodes proporcionan una forma de hacerlo.

Actúan como atajos para agregar funciones avanzadas, como sliders responsivos geniales, formularios de contacto, galerías de imágenes o videos incrustados, de una manera simple y fácil de usar.

Por ejemplo, en lugar de incrustar manualmente un fragmento complejo de HTML o JavaScript, puedes usar un shortcode para obtener el mismo resultado con solo una línea de texto. Esto hace que los shortcodes sean increíblemente útiles tanto para principiantes como para expertos.

Sin embargo, aunque los shortcodes son fáciles de usar, conocer las mejores maneras de agregarlos y administrarlos puede ahorrarte tiempo, mejorar tu flujo de trabajo y prevenir problemas.

Dicho esto, veamos algunos consejos para usar shortcodes en WordPress. Puedes hacer clic en los enlaces a continuación para saltar a cualquier consejo:

• Saber cuándo no usar shortcodes
• Protege tus shortcodes para el futuro
• Cómo buscar shortcodes en tu tema de WordPress
• Usar shortcodes en widgets
• Consejo 5: Agregar shortcode en archivos de tema
• Consejo 6: Ocultar un shortcode roto
• Consejo 7: Encontrar shortcodes usados en publicaciones
• Extra: Errores comunes con shortcodes a evitar

Consejo 1: Saber cuándo no usar shortcodes

Los shortcodes pueden ser increíblemente útiles, pero depender de ellos para cada publicación o página no siempre es la mejor idea. Muchos temas de WordPress afirman tener más de 200 shortcodes, pero usar demasiados puede crear problemas a largo plazo.

Por ejemplo, si usas un shortcode de un tema para crear botones de llamada a la acción (CTA) en tus publicaciones, entonces te estás atando a ese tema. Si alguna vez cambias de tema, esos shortcodes podrían dejar de funcionar, dejando contenido roto o ilegible.

Si estás buscando una forma de agregar botones CTA a tus publicaciones, deberías leer nuestra guía sobre cómo agregar botones CSS en WordPress sin usar shortcodes.

También puedes usar el bloque de Botón integrado de WordPress para crear botones de llamada a la acción sin ningún código.

De manera similar, si estás utilizando códigos cortos para elementos repetitivos como anuncios de banners o texto de firma al final de tus publicaciones, te recomendamos considerar un enfoque diferente. Podrías usar un plugin de WordPress o trabajar con un desarrollador para agregar estos elementos a tu blog.

Este método garantiza un estilo consistente y facilita la actualización o eliminación de elementos en el futuro.

Finalmente, recuerda que los códigos cortos dispersos en las publicaciones pueden ser una molestia para eliminar si decides dejar de usarlos. Editar cada publicación manualmente consume mucho tiempo.

Es por eso que es importante ser cuidadoso con cómo y dónde usas los códigos cortos. Limítate a agregarlos solo donde sean necesarios, ya que el uso excesivo puede crear problemas mayores más adelante.

Consejo 2: Prepara tus códigos cortos para el futuro

Los códigos cortos son geniales, pero si tu tema los proporciona, es posible que quieras pensarlo dos veces antes de usarlos en exceso.

Esto se debe a que si alguna vez cambias de tema, es probable que tu nuevo tema no admita el mismo código corto, dejándote con contenido roto.

Para evitar este problema, puedes migrar a un plugin específico del sitio. De esta manera, tus códigos cortos permanecerán independientes y seguirán funcionando independientemente del tema que uses.

Para hacer esto, simplemente puedes localizar el fragmento del código corto en el archivo functions.php de tu tema y copiarlo. Luego, pégalo en un plugin específico del sitio para asegurarte de que permanezca funcional.

Sin embargo, editar el archivo functions.php directamente no es ideal, ya que un pequeño error puede bloquear todo tu sitio.

Aquí es donde WPCode entra en juego. En nuestra opinión, ofrece la forma más fácil de agregar un fragmento de shortcode a tu tema.

Te permite agregar código personalizado con solo unos pocos clics e incluso resalta errores en tus fragmentos de código.

Hemos probado exhaustivamente el plugin en nuestro sitio web y lo encontramos bastante amigable para principiantes. Para obtener más información, consulta nuestra reseña de WPCode.

Además, no bloqueará tu sitio web si accidentalmente agregas código incorrecto, lo que lo convierte en una opción confiable para cualquiera.

Para obtener más información, consulta nuestra guía sobre cómo agregar código personalizado en WordPress.

Consejo 3: Cómo buscar shortcodes en tu tema de WordPress

Para asegurarte de que tus shortcodes sigan siendo funcionales, es importante saber cómo se ven y cómo encontrarlos en tu tema.

Primero, necesitas abrir la carpeta de tu tema, que generalmente se encuentra en /wp-content/themes/nombre-de-tu-tema/.

Deberás buscarlo dentro del archivo functions.php, o si el tema tiene una carpeta 'includes', entonces dentro de ella.

Una vez que localices el archivo, ábrelo y busca el término 'add_shortcode'. Esto te ayudará a localizar todos los shortcodes que están siendo utilizados actualmente por tu tema de WordPress.

Aquí tienes un ejemplo de cómo se ve un fragmento de shortcode:

function my_shortcode_function() { 
$i = '<p>Hello World!</p>';
return $i;
} 
add_shortcode('my-shortcode', 'my_shortcode_function');

Este código crea un shortcode 'my-shortcode', que devuelve un saludo de texto simple y se puede incrustar en una publicación o página de WordPress de esta manera:

[my-shortcode]

Para más detalles, puedes consultar nuestra guía sobre cómo agregar un shortcode en WordPress.

Consejo 4: Usar shortcodes en widgets

Muchos usuarios piensan que los shortcodes son solo para publicaciones y páginas, pero ese no es el caso.

También puedes usarlos dentro de widgets de WordPress, lo que te da aún más flexibilidad para agregar contenido dinámico a barras laterales, pies de página y otras áreas listas para widgets.

Para hacer esto, visita la página Apariencia » Widgets desde el panel de WordPress y haz clic en el botón ‘Agregar bloque’ (+). Esto abrirá el menú de bloques, desde donde deberás agregar el bloque ‘Shortcode’.

Para hacer esto, deberás navegar al editor correcto para tu tema. Si estás usando un tema clásico, ve a Apariencia » Widgets desde el panel de WordPress. Si usas un tema de bloques, entonces ve a Apariencia » Editor en su lugar.

Una vez que estés en el editor correcto, simplemente haz clic en el botón ‘Agregar Bloque’ (+) para abrir el menú de bloques. Desde allí, busca y agrega el bloque ‘Shortcode’ a tu barra lateral u otra área de widgets.

Ten en cuenta que el método anterior solo funcionará si estás utilizando un tema clásico como Hestia.

Sin embargo, si usas un tema de bloques, entonces puedes agregar un shortcode a cualquier área de widgets usando el editor de sitio completo.

Para más detalles, consulta nuestro tutorial sobre cómo usar shortcodes en los widgets de la barra lateral de WordPress.

Consejo 5: Agregar shortcode en archivos de tema

¿Necesitas agregar un shortcode fuera de publicaciones, páginas o widgets?

Si deseas agregar un shortcode a un archivo de tema personalizado o a una sección específica de tu tema, puedes hacerlo fácilmente agregando el shortcode directamente al código de tu tema.

Por ejemplo, digamos que has creado una plantilla de página personalizada y deseas incluir un slider responsivo usando un shortcode.

En lugar de insertar manualmente el shortcode en el área de contenido, puedes mostrarlo directamente en el tema. Simplemente agrega tu shortcode de esta manera:

<?php echo do_shortcode("[example_shortcode]"); ?>

Esta técnica es útil cuando deseas incrustar shortcodes en áreas como páginas personalizadas, encabezados, pies de página u otras partes de tu tema que no están vinculadas al editor de contenido típico.

Si necesitas ayuda, consulta nuestra guía sobre pegar fragmentos de la web en WordPress.

Consejo 6: Ocultar un shortcode roto

A menudo, los usuarios cambian sus temas sin darse cuenta de que sus códigos cortos antiguos no funcionarán. A veces, se enteran meses después cuando un usuario visita su publicación antigua y encuentra texto extraño allí.

Bueno, tienes dos maneras de solucionarlo. Puedes eliminar manualmente el código corto roto de cada publicación o ocultarlo. Recomendamos ocultarlo porque es una solución más rápida.

Para hacer esto, necesitarás instalar y activar el plugin WPCode. Después de la activación, visita la página Fragmentos de código » + Añadir fragmento y elige la opción ‘Añadir nuevo código personalizado (Nuevo fragmento)’

Esto te llevará a la página ‘Crear fragmento personalizado’, donde tienes que elegir la opción ‘Fragmento de PHP’ del menú desplegable.

Luego, agrega el siguiente código en el cuadro ‘Vista previa del código’ y cambia el interruptor de ‘Inactivo’ a ‘Activo’.

add_shortcode( 'shortcodetag', '__return_false' );

No olvides reemplazar shortcodetag con el nombre de tu código corto. Finalmente, haz clic en el botón ‘Guardar fragmento’ para almacenar tu configuración.

Este código ahora volverá a agregar el código corto huérfano sin ninguna salida.

Consejo 7: Encontrar shortcodes usados en publicaciones

Si no quieres usar el truco del consejo 6 y quieres eliminar todos los shortcodes manualmente, entonces el primer paso es encontrar todas las publicaciones que usan el shortcode.

Para hacer esto, agrega el siguiente código en el archivo functions.php de tu tema o en WPCode:

function wpb_find_shortcode($atts, $content=null) {
ob_start();
extract( shortcode_atts( array(
		'find' => '',
	), $atts ) );

$string = $atts['find'];

$args = array(
	's' => $string,
	);

$the_query = new WP_Query( $args );

if ( $the_query->have_posts() ) {
        echo '<ul>';
	while ( $the_query->have_posts() ) {
	$the_query->the_post(); ?>
	<li><a href="<?php  the_permalink() ?>"><?php the_title(); ?></a></li>
	<?php
	}
        echo '</ul>';
} else {
        echo "Sorry no posts found";
}

wp_reset_postdata();
return ob_get_clean();
}
add_shortcode('shortcodefinder', 'wpb_find_shortcode');

Este código simplemente crea un shortcode llamado shortcodefinder. Ejecuta una consulta de WordPress y lista las publicaciones con una etiqueta de shortcode dada.

Por ejemplo, si quisieras encontrar todas las publicaciones que contienen el shortcode [contact-form], simplemente ingresarías [shortcodefinder find=’contact-form’] en una página de WordPress y la guardarías. Ahora, si previsualizas la página, podrás ver todas las publicaciones que contienen el shortcode.

Para obtener instrucciones más detalladas, consulta nuestra guía sobre cómo encontrar y ocultar shortcodes no utilizados en WordPress.

Extra: Errores comunes con shortcodes a evitar

Si bien los shortcodes son útiles y necesarios para muchos sitios, los usuarios a menudo cometen algunos errores comunes al trabajar con ellos.

Estos errores pueden provocar fallas en la funcionalidad, código desordenado o un rendimiento deficiente del sitio. Aquí hay cinco errores clave a tener en cuenta y cómo evitarlos:

• Sobrecargar páginas con demasiados shortcodes: Usar demasiados shortcodes en una sola página puede generar tiempos de carga lentos y un diseño desordenado. Por eso, recomendamos limitar el uso de shortcodes a los elementos esenciales.
• Anidar shortcodes incorrectamente: Los shortcodes anidados (usar un shortcode dentro de otro) pueden ser complicados y causar problemas, como que un shortcode no funcione o que una página muestre contenido incorrecto. Si debes anidar shortcodes, pruébalos primero para asegurarte de que se muestren como esperas.
• Olvidar cerrar los shortcodes correctamente: A veces, los usuarios olvidan cerrar los shortcodes, lo que puede romper el diseño de una publicación o página. Por eso, siempre debes asegurarte de que tu shortcode esté correctamente abierto y cerrado con corchetes. Para shortcodes de uso único, asegúrate de no dejar espacios o símbolos adicionales.
• Usar shortcodes en áreas no compatibles: Ciertas áreas de WordPress pueden no admitir shortcodes de forma predeterminada. Intentar usar un shortcode allí puede resultar en contenido roto o invisible. Antes de insertar shortcodes en widgets o campos personalizados, verifica si el área los admite. A menudo, puedes usar un plugin para habilitar shortcodes en áreas no compatibles.
• No probar los shortcodes en dispositivos móviles: Muchos usuarios olvidan verificar cómo se ven los elementos creados con shortcodes en dispositivos móviles. Lo que se ve genial en una computadora de escritorio puede romperse o verse mal en pantallas móviles. Siempre previsualiza tus páginas y publicaciones en varios dispositivos para asegurarte de que la salida del shortcode sea responsiva.

Al evitar estos errores comunes y seguir estos consejos, puedes tener una experiencia más fluida al usar shortcodes en tu sitio de WordPress.

Esperamos que estos consejos te hayan ayudado a aprender a usar los shortcodes y a aprovecharlos al máximo en WordPress. También te puede interesar nuestra guía para principiantes sobre cómo copiar y pegar en WordPress sin problemas de formato y nuestros consejos de expertos para dominar el editor de contenido de WordPress.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.