¿Qué son los códigos cortos de WordPress? Guía completa paso a paso

¿Quieres hacer que tus entradas y páginas de WordPress sean más interactivas y visualmente atractivas? Los Shortcodes de WordPress están aquí para hacerte la vida más fácil. Estos prácticos fragmentos de código te permiten añadir diversas funcionalidades y elementos de diseño sin necesidad de conocimientos avanzados de codificación.

En esta entrada del blog, trataré todo lo que necesitas saber sobre los códigos cortos de WordPress. En primer lugar, empezaremos explorando los códigos cortos predeterminados de WordPress y cómo añadirlos. A continuación, profundizaremos en cómo utilizar los shortcodes en varias partes de tu sitio web, incluyendo entradas, páginas, widgets e incluso archivos de tema.

Además, te guiaré en la creación de tu propio shortcode personalizado en WordPress, lo que te permitirá personalizar el diseño y la funcionalidad de tu sitio web según tus necesidades exactas. Por último, compararemos los shortcodes con los bloques Gutenberg, otra forma popular de añadir elementos personalizados a tu sitio web.

Así que, ¡vamos a profundizar!

Códigos cortos de WordPress: Una visión general

Los Shortcodes son una función potente y versátil que te permite añadir contenido dinámico y funcionalidad a tu sitio web sin necesidad de tener conocimientos de codificación. Los Shortcodes de WordPress son esencialmente pequeños fragmentos de código que puedes insertar en tus entradas, páginas, widgets o archivos de tema para mostrar una función o contenido específico.

El uso de shortcodes mejora enormemente la experiencia del usuario al proporcionar funciones fáciles de usar como botones, formularios, galerías y mucho más. Además, también pueden mejorar el SEO de tu sitio web haciendo que tu contenido sea más interactivo y atractivo para tus visitantes.

Códigos cortos que se cargan en milisegundos

Consigue una potente funcionalidad de código corto Y:
– Tiempos medios de respuesta de 300 ms
– Caché Redis integrada
– CDN gratuito de Cloudflare

Acelerar mis Shortcodes

Códigos cortos de WordPress: Pros y Contras

Ahora que ya tienes una idea de los códigos cortos de WordPress, vamos a repasar rápidamente sus pros y sus contras antes de sumergirnos en la parte de cómo hacerlo.

Ventajas de los códigos cortos de WordPress

• Ahorran tiempo: Te ayudan a añadir funcionalidades complejas sin codificación manual.
• Personalizables: Los códigos cortos pueden personalizarse para adaptarse a necesidades específicas.
• Fáciles de usar: Son fáciles de usar y se pueden añadir a cualquier entrada o página de WordPress sin necesidad de conocimientos avanzados de codificación.
• Compatibilidad: Son compatibles con una amplia gama de plugins y temas. Así que, en la mayoría de los casos, eres libre de elegir cualquier tema o plugin de WordPress.

Contras de los códigos cortos de WordPress

• Dependencia: Depender demasiado de los shortcodes puede causar problemas si el plugin o el tema no se actualizan.
• Problemas de compatibilidad: Algunos códigos cortos pueden no ser compatibles con todos los temas y plugins de WordPress.
• Curva de aprendizaje: Es necesario un conocimiento básico de cómo utilizar y personalizar shortcodes.
• Seguridad: Los códigos cortos deben estar correctamente desinfectados y validados para evitar vulnerabilidades de seguridad.

Los códigos cortos de WordPress proporcionan una solución práctica para mejorar la funcionalidad y el diseño de tu sitio.

Sin embargo, es importante utilizarlos con criterio para evitar problemas de dependencia, problemas de compatibilidad y posibles vulnerabilidades de seguridad.

Vamos a aprender más sobre los códigos cortos predeterminados de WordPress en el siguiente epígrafe.

Los códigos cortos predeterminados de WordPress

WordPress incluye seis shortcodes incorporados por defecto que facilitan añadir funcionalidad a tus páginas y entradas:

• [audio]: Añade archivos de audio a tus páginas o entradas.
• [Pie de foto]: Añade un pie de foto a una imagen o vídeo.
• [incrustar]: Establece la anchura y la altura de un elemento incrustado.
• [galería]: Crea una galería de fotos utilizando imágenes.
• [vídeo]: Añade vídeos a tus páginas o entradas.
• [lista de reproducción]: Muestra archivos de audio o vídeo en una entrada.

Puedes utilizar todos ellos con nuestro alojamiento WordPress.

Lista de algunos códigos cortos útiles con funciones (Tabla)

A continuación encontrarás una lista de algunos shortcodes útiles en WordPress junto con sus funciones:

Función	Uso práctico
[audio]	[audio src=»#»]
[título]	[leyenda width=«450«]< img src=»#»/> Imagen [/caption]
[incrustar]	[incrustar anchura=»450″ altura=»320″]
[galería]	[gallery id=«32»]
[vídeo]	[vídeo src=»#»]
[plista]	[plista tipo =»vídeo»]
[wpforms]	[wpforms id=»10″]
[soliloquio]	[soliloquy id=»578″]

---

3 días para probar la perfección del código corto

Prueba nuestra plataforma completa con:
✓ Preoptimizado para shortcodes complejos
✓ No se requiere tarjeta de crédito
✓ Asistencia gratuita para la migración

Iniciar prueba de desarrollador

Cómo añadir códigos cortos a WordPress (5 métodos fáciles)

Añadir shortcodes en WordPress es fácil y puede hacerse utilizando cinco métodos diferentes. Estos métodos incluyen añadir shortcodes a las entradas o páginas directamente, utilizar el widget de texto, crear un plugin de shortcodes, añadir shortcodes al archivo functions.php de tu tema y utilizar un plugin constructor de shortcodes.

Cómo Añadir Códigos Cortos en Entradas y Páginas de WordPress

A continuación te explicamos cómo puedes añadir fácilmente códigos cortos en las entradas y páginas de WordPress:

• Ve al editor de tu post/página y busca«Shortcode«.

• Si utilizas Gutenberg, busca el shortcode en la sección de bloques y añádelo a tu página o entrada.

• Pega el shortcode en el campo correspondiente donde quieras mostrarlo.
• He añadido el Shortcode WP Forms para añadir el formulario de contacto.

• Previsualiza tu entrada o página para comprobar si el shortcode funciona.

• Puedes seguir pasos similares para cualquier constructor de páginas. Por ejemplo, en Elementor, busca Shortcode en la sección Elemento y arrástralo y suéltalo en el pliegue que desees.

Cómo añadir códigos cortos en los widgets de WordPress

Estos son los pasos para añadir un shortcode de WordPress en un widget:

• Ve a tu Panel de Control de WordPress y navega hasta Apariencia > Widgets.
• Haz clic en el icono «+» para examinar todas las opciones de widgets disponibles y busca el widget Shortcode.

• Añade tu shortcode al campo y Actualiza tu sección de widgets. Para el propósito de este tutorial, voy a añadir el shortcode de WP Forms.

• Previsualiza tu sitio para asegurarte de que el shortcode se muestra correctamente en el área del widget.

Cómo añadir códigos cortos en el editor clásico de WordPress

El Editor Clásico de WordPress sigue siendo ampliamente utilizado para la edición de entradas y páginas en WordPress. Y añadir un shortcode en el Editor Clásico es bastante fácil y se puede hacer siguiendo los sencillos pasos que se indican a continuación:

• Abre el Editor Clásico de WordPress navegando hasta la entrada/página que quieras editar y seleccionando«Editor Clásico» en las opciones de edición.
• Crea una nueva entrada/página o edita una existente donde quieras añadir el shortcode.
• Localiza la zona donde quieres añadir el shortcode y escríbelo allí.

• Guarda los cambios que has hecho en la entrada/página y luego previsualízala para ver si el shortcode funciona correctamente.

Cómo añadir códigos cortos en los archivos de temas de WordPress

Estos son los pasos para añadir shortcodes en los archivos de tema de WordPress:

• Haz una copia de seguridad de tus archivos o utiliza un sitio de ensayo para evitar cualquier daño a tu sitio de producción.

Por ejemplo, quiero añadir un Shortcode para todas las páginas 404 (cuando alguien intenta acceder a páginas inexistentes).

• Ve al Panel de Control de WordPress > Apariencia > Editor de Archivos de Tema.

• Selecciona la sección de archivos donde quieres añadir el shortcode. Por ejemplo, 404.php para todas las páginas de error 404.
• Pega el shortcode dentro del archivo seleccionado. Por ejemplo

<?php echo do_shortcode("[wpforms id="8"]"); ?>

• Guarda los cambios y previsualiza el resultado.
• Éste es el resultado que obtendrás cuando alguien intente acceder a páginas inexistentes.

Cómo crear tu propio código corto personalizado en WordPress

Crear un shortcode personalizado en WordPress puede parecer una tarea desalentadora, ya que normalmente implica crear un nuevo plugin. Sin embargo, con la preparación y el cuidado adecuados, el proceso puede ser ágil y relativamente indoloro.

Yo recomendaría crear una copia de seguridad o trabajar en un sitio de ensayo para volver fácilmente a una versión anterior si algo va mal durante el proceso de creación del shortcode.

¿Sitios de clientes con códigos cortos personalizados?

Gestiona múltiples sitios con muchos shortcodes:
– Entornos de prueba aislados
– Herramientas de colaboración en equipo
– Cuadros de mando de clientes en marca blanca

Prueba el alojamiento para agencias

Crear un plugin personalizado

Estos son los pasos para crear un shortcode personalizado en WordPress:

• Crea un plugin personalizado para tu shortcode accediendo a tu servidor/sitio a través de un cliente FTP como FileZilla.
• Navega hasta la carpeta wp-content > plugins > y crea un nuevo directorio.
• Nombra el directorio con el nombre de tu plugin, por ejemplo: subscribe-shortcode.

• Abre la carpeta de tu plugin y crea un nuevo archivo PHP con el nombre que prefieras, por ejemplo mi-código-corto.php.

• Haz clic en ver/editar el archivo PHP y abre el archivo local.
• Pega el código de la cabecera del plugin y guárdalo pulsando «ctrl+s«. El código debe tener el siguiente aspecto:

<?php

/*

 * Plugin Name:       Subscribe Shosrtcode

 * Plugin URI:        https://claudwoys.com/es/

 * Description:       This plugin is for a testing purpose.

 * Version:           1.0.0

 * Requires at least: 5.3

 * Requires PHP:      7.4

 * Author:            Farhan Ayub

 * Author URI:        https://profiles.wordpress.org/farhanayub/

 * License:           GPL v2 or later

 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html

 * Update URI:        https://claudwoys.com/es/

 * Text Domain:       my-basics-plugin

 * Domain Path:       /languages

 */

?>

• Cuando guardes los cambios, aparecerá una ventana emergente «El archivo ha cambiado» en tu herramienta FileZilla.
• Selecciona «Finalizar edición y eliminar archivo local» y haz clic en Sí.

• Una vez actualizado el archivo, ve a tu Panel de Control de WordPress > Plugin Instalado y Activa tu nuevo plugin.
• Los detalles del plugin deben mostrar los campos de cabecera, como la versión, el nombre del autor, etc.

Crear un código corto personalizado de WordPress

También puedes crear un shortcode personalizado para WordPress después de activar el plugin. En esta sección, crearé un shortcode que permita a los usuarios suscribirse al canal de YouTube de Cloudways.

Estos son los pasos para crear un shortcode personalizado para WordPress:

• Abre tu archivo PHP (en este caso: mi-código-cortante.php) y pega el siguiente código:

add_shortcode( 'subscribe', 'cloudways_link' );

function cloudways_link(){

    return 'Subscribe Cloudways <a href="https://www.youtube.com/@Cloudways/featured?sub_confirmation=1">YouTube Channel</a>';

    }

add_action('init', 'cloudways_link');

• Vamos a utilizar el shortcode personalizado en tu post. Puesto que hemos establecido el nombre de nuestro shortcode como «subscribe«, llámalo con paréntesis de esta forma: [subscribe].

• Actualiza los cambios y comprueba la salida del shortcode.

• Si la salida aparece en la entrada, significa que el shortcode personalizado de WordPress funciona.

Códigos cortos vs. Bloques Gutenberg

Tanto los códigos cortos como los bloques de Gutenberg se utilizan en WordPress para mejorar la funcionalidad de tu sitio. Esta sección comparará ambos para destacar las principales diferencias.

Códigos cortos:

• Permite insertar contenido dinámico en las páginas y entradas de WordPress
• Creado utilizando corchetes con una palabra clave o función dentro
• Requiere conocimientos básicos de codificación
• Se puede añadir a cualquier página o entrada del editor de WordPress
• Se puede reutilizar en varias páginas o entradas

Bloques Gutenberg:

• Permite crear contenido dinámico con una interfaz de arrastrar y soltar
• Ofrecen más opciones y son más fáciles de usar que los shortcodes
• Puedes crear diseños complejos con facilidad
• Se puede ampliar con bloques o plugins personalizados
• Requieren menos conocimientos técnicos que los shortcodes

Los códigos cortos pueden requerir conocimientos básicos de codificación y ofrecen una personalización visual limitada. Por otro lado, los Bloques Gutenberg proporcionan un enfoque más fácil de usar con opciones ampliadas para crear contenido dinámico.

Para añadir un shortcode utilizando los bloques de Gutenberg, sólo tienes que seleccionar la opción «Shortcode» y rellenar el nombre del shortcode en el campo designado. Esto se puede hacer fácilmente sin ningún conocimiento de codificación, por lo que es una opción conveniente para los usuarios que prefieren un enfoque más visual para la creación de contenidos.

¿Los códigos cortos ralentizan tu sitio?

Nuestra pila optimizada gestiona los shortcodes que consumen muchos recursos sin afectar al rendimiento.

Arreglar el rendimiento de mi código corto

Resumen

Los shortcodes de WordPress son una potente herramienta que te permite crear contenido dinámico de forma fácil y rápida. Tanto si eres un principiante como un usuario experimentado, existen múltiples formas de añadirlos a tu sitio de WordPress. En este blog he cubierto 5 métodos sencillos. Con el alojamiento WordPress gestionado de Cloudways puedes crear y gestionar fácilmente códigos cortos para tu sitio web WordPress.

Aunque pueden tener algunas limitaciones, las ventajas superan a los inconvenientes, especialmente cuando se combinan con la facilidad de uso de los bloques Gutenberg.

Así que, tanto si quieres mostrar un simple botón como un contenido complejo, los shortcodes son una forma fantástica de mejorar tu sitio WordPress.

Pruébalos y verás cómo pueden llevar tu contenido al siguiente nivel.

Preguntas frecuentes

Q. ¿Tiene WordPress códigos cortos incorporados?

Sí, WordPress viene con 6 códigos cortos incorporados que se enumeran a continuación:

• [audio]
• [título]
• [incrustar]
• [galería]
• [vídeo]
• [plista]

Q. ¿Dónde están mis códigos cortos en WordPress?

Puedes encontrar los shortcodes de un plugin de WordPress consultando la documentación del plugin en el panel de control de WordPress.

Q. ¿Cómo utilizar los códigos cortos predeterminados en WordPress?

Puedes utilizar los shortcodes predeterminados en WordPress de tres formas: a través del bloque Gutenberg, del editor clásico o mediante código.

Q. ¿Para qué sirven los códigos cortos en WordPress?

El propósito de los shortcodes en WordPress es añadir contenido dinámico y funciones a tus páginas y entradas.