César Aquino Maximiliano

Software Developer | Bombero Voluntario | Tech Instructor

Cómo crear Shortcodes avanzados en WordPress (con ejemplos reales)

Publicado el por Cesar Aquino en la categoría Desarrollo web

Los shortcodes son una de las funciones más flexibles y poderosas de WordPress. Con ellos puedes insertar funcionalidades dinámicas dentro de páginas, entradas, widgets o constructores sin depender de un theme o plugin complejo. En esta guía aprenderás a crear shortcodes avanzados en WordPress con parámetros, lógica personalizada, integración con APIs y buenas prácticas para producción.

Además, te mostraré ejemplos reales que puedes copiar y pegar en tus proyectos.


¿Qué son los shortcodes y por qué son tan importantes?

Los shortcodes son etiquetas especiales que WordPress interpreta para ejecutar código PHP. Por ejemplo:

[mi_shortcode]

Al usar shortcodes avanzados en WordPress, puedes:


Shortcode básico en WordPress

Empecemos con uno simple:

function mi_shortcode_basico() {
    return "Hola, este es mi shortcode!";
}
add_shortcode('hola', 'mi_shortcode_basico');

Ahora puedes escribir:

[hola]

Y WordPress mostrará el texto.


Shortcodes avanzados: cómo pasar parámetros

Los parámetros permiten crear shortcodes reutilizables y flexibles:

function card_shortcode($atts) {
    $atts = shortcode_atts([
        'title' => 'Título por defecto',
        'bg'    => '#f5f5f5'
    ], $atts);

    return "<div style='padding:20px;background:{$atts['bg']}'><h2>{$atts['title']}</h2></div>";
}
add_shortcode('card', 'card_shortcode');

Ejemplo de uso:

[card title="Oferta de la Semana" bg="#d7f7ff"]

Esto te permite crear componentes visuales sin usar editores complicados.


Shortcodes avanzados conectados a una API

Aquí viene lo interesante: un shortcode que obtiene datos reales desde internet.

function clima_shortcode() {

    $data = wp_remote_get("https://api.open-meteo.com/v1/forecast?latitude=-12&longitude=-77&current_weather=true");

    if (is_wp_error($data)) return "Clima no disponible.";

    $json = json_decode(wp_remote_retrieve_body($data), true);

    return "Temperatura actual: " . $json['current_weather']['temperature'] . "°C";
}
add_shortcode('clima', 'clima_shortcode');

Con esto puedes insertar datos dinámicos en tiempo real.


Shortcodes con lógica condicional (nivel avanzado)

Puedes usar shortcodes para mostrar contenido dependiendo del rol del usuario:

function contenido_privado_shortcode() {
    if (!is_user_logged_in()) {
        return "<p>Debes iniciar sesión para ver este contenido.</p>";
    }

    return "<p>Bienvenido, este es tu contenido privado.</p>";
}
add_shortcode('privado', 'contenido_privado_shortcode');

Es ideal para:


Shortcodes avanzados con HTML complejo

Puedes devolver estructuras completas sin romper el contenido:

function tabla_precios_shortcode() {
    ob_start(); ?>

    <table class="tabla-precios">
        <tr><th>Plan</th><th>Precio</th></tr>
        <tr><td>Básico</td><td>$9.99</td></tr>
        <tr><td>Pro</td><td>$19.99</td></tr>
        <tr><td>Premium</td><td>$29.99</td></tr>
    </table>

    <?php
    return ob_get_clean();
}
add_shortcode('precios', 'tabla_precios_shortcode');

Buenas prácticas para shortcodes avanzados en WordPress

Para garantizar rendimiento y organización:


Errores comunes al crear shortcodes

❌ Usar echo dentro del shortcode
❌ No validar parámetros
❌ Llamar APIs sin control de errores
❌ Incluir CSS inline excesivo
❌ Hacer lógica demasiado pesada

Conclusión

Los shortcodes siguen siendo una herramienta poderosa. Bien utilizados, te permiten resolver problemas rápidos sin sobrecargar tu theme o sobrescribir plantillas complejas.

Etiquetas: