WPL Elementor Widgets – Ayuda

Tabla de contenidos

• Repeater

  • Data source
    • WPL Query BuilderSource
    • Advanced Custom Fields (repeaters)
  • Display structure
    • Item format
    • Item Tag
    • Structure before/after
  • Slider

Guía para crear plantillas (Item format)

Los templates te permiten diseñar cómo se muestran los datos que vienen del Query Builder o de un Repeater ACF. Podés usar texto, HTML y “marcadores” especiales que se reemplazan automáticamente por los valores reales.

1. Marcadores básicos

Los marcadores se escriben entre % y %, por ejemplo:

%titulo%
%precio%
%permalink%
%thumbnail%
%archive_link%
%archive_term_link%

Cuando se muestra el contenido, estos se reemplazan por:

• %titulo% → el título del elemento
• %precio% → el precio (si existe)
• %permalink% → el enlace a la página
• %thumbnail% → la imagen principal
• %archive_link% → URL archive
• %archive_term_link% → URL de la primera tax encontrada con termino para el archive del termino encontrado.

💡 Los nombres pueden variar según la fuente de datos.
En Query Builder vienen del tipo de contenido (producto, entrada, etc.), y en ACF vienen de los nombres de los campos.

2. Condicionales (mostrar u ocultar contenido)

Podés mostrar algo solo si se cumple una condición.

%if(%precio%='')%
  <p>Sin precio</p>
%elseif(%precio%='0')%
  <p>Gratis</p>
%else%
  <p>Precio: %precio% €</p>
%endif%

• %if%: condición principal
• %elseif%: alternativa
• %else%: lo que se muestra si ninguna condición se cumple
• %endif%: cierra la condición

Solo se puede comparar con = y entre comillas simples ('texto').

3. Funciones útiles

Las funciones permiten dar formato o insertar contenido especial.

4. Repetidores (galerías o listas)

Cuando el campo es una galería o un repeater ACF, el sistema repite automáticamente las imágenes:

<div class="galeria">%galeria%</div>

Cada imagen dentro del repeater genera un <img> automáticamente. Si el campo está vacío, no muestra nada. Para el correcto funcionamiento si se trata de un repeater de ACF el campo debe llamarse imagen.

5. Ejemplos completos

Ejemplo 1: Tarjeta de producto

<div class="producto">
  <a href="%permalink%">
    <img src="%thumbnail%" alt="%titulo%">
    <h3>%titulo%</h3>
  </a>

  %if(%precio%='')%
    <p>Consultar precio</p>
  %elseif(%precio%='0')%
    <p>Gratis</p>
  %else%
    <p><strong>€ %formatNumber(%precio%, '2')%</strong></p>
  %endif%
</div>

Ejemplo 2: Video con miniatura

<div class="video">
  <a href="%video%">
    <img src="%thumbYouTube(%video%)%" alt="%titulo%">
  </a>
  <div class="embed">%embed(%video%, '16:9')%</div>
</div>

Ejemplo 3: Galería (Repeater ACF)

%if(%galeria%='')%
  <p>Sin imágenes</p>
%else%
  <div class="galeria">%galeria%</div>
%endif%

6. Consejos

• Usá %if% para evitar mostrar campos vacíos.
• Podés combinar texto y HTML libremente.
• Los valores se reemplazan automáticamente según los datos disponibles.
• Si algo no aparece, revisá que el campo exista en tu fuente de datos (Query Builder o ACF).