Cómo Crear Shortcodes en WordPress: Guía Paso a Paso

Los shortcodes en WordPress son una de las herramientas más útiles para agregar funcionalidades sin necesidad de editar archivos de plantilla o depender de plugins. Con un simple código entre corchetes [ ], puedes mostrar contenido dinámico como botones, galerías, formularios y más.

En esta guía, te enseñaré cómo crear shortcodes en WordPress desde cero, cómo organizarlos dentro de un tema hijo, y te daré algunos ejemplos prácticos para que puedas implementarlos en tu sitio.

1. ¿Qué es un Shortcode en WordPress?

Un shortcode es una etiqueta especial que se escribe entre corchetes en WordPress, como [mi_shortcode], y que genera contenido dinámico en el sitio web.

Ejemplo básico:

Este shortcode muestra una galería de imágenes sin necesidad de escribir código HTML.

¿Por qué usar shortcodes en lugar de código directo?

✅ Facilitan la reutilización del código.
✅ Funcionan en páginas, entradas y widgets.
✅ Son fáciles de implementar sin tocar plantillas de WordPress.

2. Cómo Crear un Shortcode en WordPress

Para crear un shortcode personalizado en WordPress, sigue estos pasos:

Paso 1: Agregar el Shortcode en functions.php

Abre el archivo functions.php de tu tema hijo y agrega el siguiente código:

function mi_shortcode_ejemplo() {
    return '<p>¡Hola! Este es un shortcode personalizado en WordPress.</p>';
}
add_shortcode( 'saludo', 'mi_shortcode_ejemplo' );

📌 Cómo usarlo en WordPress:

[saludo]

Este shortcode mostrará el mensaje "¡Hola! Este es un shortcode personalizado en WordPress." en la página donde lo coloques.

3. Agregar Parámetros a un Shortcode

Podemos hacer que el shortcode acepte parámetros personalizados para que sea más flexible.

Ejemplo: Shortcode para Botones Personalizados

function shortcode_boton( $atts ) {
    $atts = shortcode_atts(
        array(
            'texto' => 'Haz clic aquí',
            'url' => '#',
            'color' => 'blue',
        ),
        $atts,
        'boton'
    );

    return '<a href="' . esc_url( $atts['url'] ) . '" style="display:inline-block;padding:10px 20px;background:' . esc_attr( $atts['color'] ) . ';color:#fff;text-decoration:none;border-radius:5px;">' . esc_html( $atts['texto'] ) . '</a>';
}
add_shortcode( 'boton', 'shortcode_boton' );

📌 Cómo usarlo en WordPress:

[boton texto="Ver más" url="https://miweb.com" color="red"]

Este código generará un botón rojo con el texto "Ver más".

4. Mostrar Contenido Solo a Usuarios Logueados

Si deseas restringir contenido a usuarios registrados, puedes usar este shortcode:

function contenido_para_usuarios( $atts, $content = null ) {
    if ( is_user_logged_in() ) {
        return $content;
    } else {
        return '<p>Debes iniciar sesión para ver este contenido.</p>';
    }
}
add_shortcode( 'solo_usuarios', 'contenido_para_usuarios' );

📌 Cómo usarlo en WordPress:

[solo_usuarios] Este contenido solo lo pueden ver los usuarios registrados. [/solo_usuarios]

Los visitantes no registrados verán el mensaje "Debes iniciar sesión para ver este contenido."

5. Organizar Shortcodes en un Archivo Separado

Para mantener tu código organizado, coloca los shortcodes en un archivo separado dentro de tu tema hijo.

📂 Estructura recomendada:

/wp-content/themes/tu-tema-hijo/
│
├── functions.php
├── inc/
│   ├── shortcodes.php

En functions.php, agrega la siguiente línea para incluir el archivo:

require_once get_stylesheet_directory() . '/inc/shortcodes.php';

En shortcodes.php, guarda todos tus shortcodes personalizados.

✅ Ventaja:

• Mantiene el código limpio y estructurado.
• Facilita la administración y actualización de los shortcodes.

6. Shortcodes vs. Bloques de Gutenberg: ¿Cuál es Mejor?

Característica	Shortcodes	Bloques de Gutenberg
Compatibilidad	Funciona en cualquier versión	Solo en WordPress 5.0+
Facilidad de uso	Necesita código o configuración	Edición visual sin código
Flexibilidad	Mayor personalización	Más fácil para principiantes
Rendimiento	Ligero y rápido	Puede cargar código innecesario

🔹 Si buscas personalización y rendimiento, usa shortcodes.
🔹 Si prefieres edición visual sin código, usa Gutenberg.

7. Conclusión: ¿Por Qué Deberías Usar Shortcodes en WordPress?

Crear shortcodes en WordPress te permite agregar funcionalidades personalizadas sin depender de plugins pesados. Puedes usarlos para botones, contenido restringido, columnas y más, manteniendo tu sitio optimizado y flexible.

Si te interesa aprender más sobre personalización en WordPress, revisa estos artículos:

📌 Enlaces recomendados:

• Los Mejores Shortcodes para WordPress y Cómo Usarlos
• Hooks y Filters en WordPress: Personaliza tu sitio
• Cómo optimizar un tema de WordPress para SEO

🚀 Ahora es tu turno: ¿Qué shortcode te gustaría crear para tu sitio? ¡Déjanos un comentario y comparte tu experiencia!