Shortcodes

Los shortcodes permiten mostrar el contenido de los campos personalizados directamente en el frontend, insertándolos en páginas, entradas, widgets o plantillas mediante una etiqueta corta.

Este plugin usa shortcodes para hacer accesibles desde Elementor y otros lugares los datos introducidos en los productos.


¿Qué es un shortcode?

Un shortcode es una función de WordPress que permite ejecutar código PHP desde el editor de contenido, usando una sintaxis como esta:

[mostrar_codigo_producto]

Cuando se renderiza la página, WordPress reemplaza ese texto por el resultado de una función PHP que hemos registrado previamente con add_shortcode().


Estructura básica

add_shortcode('mostrar_codigo_producto', function () {
    $codigo = get_post_meta(get_the_ID(), 'codigo_producto', true);
    return esc_html($codigo);
});

Este ejemplo muestra el valor del campo codigo_producto, asegurándose de escapar el texto correctamente.


Shortcodes destacados en el plugin

📦 Código del producto

[mostrar_codigo_producto]

Devuelve el código del producto actual.


🧾 Ingredientes

[mostrar_ingredientes]

Devuelve un bloque de texto con los ingredientes del producto.


📥 Enlace a ficha técnica

add_shortcode('url_ficha_pdf', function () {
    $url = get_post_meta(get_the_ID(), 'url_ficha', true);
    $no_tiene = get_post_meta(get_the_ID(), 'no_tiene_ficha', true);
    if ($no_tiene === 'yes' || empty($url)) return '';
    return esc_url($url);
});

Este shortcode es útil para usar dentro de un botón dinámico de Elementor. Si no hay ficha, devuelve cadena vacía.


Uso en Elementor

Los shortcodes se pueden usar de varias formas en Elementor:

  1. En un widget de texto, simplemente escribiendo:
[mostrar_ingredientes]
  1. En un botón, seleccionando Etiqueta dinámica > Shortcode, y escribiendo ahí:
[url_ficha_pdf]
  1. Incluso en campos como enlaces, títulos o leyendas.

Condicionales visuales con CSS

Si el shortcode no devuelve valor (por ejemplo, una URL vacía), se puede usar CSS para ocultar el botón:

#boton-ficha:not([href]) {
    display: none;
}

Esto evita que se muestre un botón sin enlace si el shortcode no devolvió nada.


Buenas prácticas


Enlaces útiles

05 Gestión de medios