Plantillas de feed

Una plantilla de feed se renderiza una vez por resultado. Es la propietaria del marcado visible del elemento; el contenedor de resultados independiente controla cómo se organizan todos los elementos.

Condiciones

Usa un campo personalizado para incluir o reemplazar marcado opcional:

{{if meta="subtitle" value="not_empty"}}
    <p>{{meta name="subtitle" only_content="true"}}</p>
{{else}}
    <p>{{translatable_string text=%%No subtitle%%}}</p>
{{/if}}

La condición coincide con un valor guardado exacto, empty o not_empty.

Campos de la entrada

Ejemplo:

<article>
    <a href="{{permalink}}"><h2>{{title}}</h2></a>
    {{date format="j F Y" prepend=%%Published: %%}}
    <p>{{excerpt limit="160"}}</p>
</article>

Medios destacados

Imagen destacada

{{featured_image image_size="medium_large"}}

Para un producto sin imagen, se usa el marcador de posición de WooCommerce. Añade hide_default="true" para suprimirlo.

Devuelve solo la URL con una alternativa opcional:

{{featured_image_url
    image_size="medium_large"
    fallback_url="/wp-content/uploads/card-placeholder.jpg"
}}

Vídeo del producto

{{featured_video}} renderiza el vídeo destacado del producto configurado y, como alternativa, la imagen del producto. {{video_thumbnail image_size="large"}} renderiza el primer vídeo del producto configurado, o la imagen del producto cuando no hay ningún vídeo disponible.

Campos personalizados

Valor general

{{meta name="venue"}}
{{meta name="start_date" type="date" only_content="true"}}
{{meta name="summary" limit="120" prepend=%%Summary: %% append=%%…%% icon="feather/info"}}

name es obligatorio. type acepta date, datetime o time. only_content="true" omite el contenedor de metadatos predeterminado. prepend, append, limit y icon ajustan la salida visible.

Imagen

{{image_from_meta name="card_image"}}

La etiqueta devuelve el HTML de la imagen cuando el valor del campo se puede resolver como un adjunto.

La imagen incluye los atributos numéricos width y height cuando se conocen sus dimensiones, para que el navegador pueda reservar espacio antes de que cargue. Puedes establecer una dimensión de visualización en píxeles y dejar que la otra siga las proporciones de la imagen:

{{image_from_meta name="icon" width="40" height="auto"}}
{{image_from_meta name="portrait" height="80"}}
{{image_from_meta name="square_icon" width="40" height="40"}}

Omitir ambas dimensiones, o usar auto en ambas, usa las dimensiones del adjunto. Con una dimensión numérica, la otra se calcula a partir de la proporción de aspecto de origen y se redondea al entero positivo más cercano. Establece ambos números solo cuando coincidan con las proporciones previstas de la imagen. Los valores no válidos, el cero, los valores negativos y las unidades CSS como 40px se ignoran. auto se resuelve antes de generar el HTML; no se emite como atributo de dimensión HTML.

Para los adjuntos SVG de hasta 512 KiB, la etiqueta usa las dimensiones absolutas declaradas en un archivo local legible de la Biblioteca de medios y su viewBox para calcular una dimensión que falte. Las unidades absolutas como px, pty cm se convierten a píxeles. Un SVG con solo un viewBox aporta proporciones pero no dimensiones de píxeles intrínsecas: proporciona al menos una dimensión numérica en la etiqueta. Para archivos más grandes o cuando no se puede leer la geometría local, se usan los metadatos de adjunto disponibles. Si las dimensiones o proporciones siguen siendo desconocidas, se omiten los atributos sin resolver; proporciona ambas dimensiones numéricas para reservar un espacio conocido.

Estos atributos reservan espacio y establecen proporciones; el CSS aún puede controlar el tamaño mostrado. Para imágenes adaptables, conserva la proporción de aspecto con max-width: 100%; height: auto;. Después de cambiar una plantilla, comprueba la imagen en la interfaz a anchos de escritorio y móvil.

Galería

{{gallery
    meta_name="photos"
    style="masonry"
    image_size="medium"
    lightbox_click="yes"
}}

meta_name es obligatorio. Las presentaciones admitidas incluyen grid, masonry, carrousel, carousel_2, image_with_thumbnails, full_screen y images_only. Para las imágenes propias de un producto de WooCommerce, usa la etiqueta de galería de producto que aparece más abajo.

URL de vídeo

{{video_from_url
    meta_name="video_url"
    play_button="true"
    controls="true"
    loop="false"
    autoplay="false"
}}

El campo debe contener una URL de YouTube o Vimeo. Los cuatro atributos de comportamiento usan true para activar su opción.

URL de botón

{{button_from_meta
    meta_name="booking_url"
    label=%%Book now%%
    style="5"
    rel="nofollow"
    icon="arrow-right"
    size="default"
    block="yes"
}}

No se renderiza ningún botón cuando meta_name falta o su valor está vacío.

Feed anidado

{{feed_from_meta
    meta_name="related_items"
    template_id="my-feed-template"
    layout="default"
    columns="12"
    columns_default="4"
    columns_default_tablet_h="6"
    columns_default_tablet_v="6"
    columns_default_mobile="12"
}}

El campo de origen debe contener los ID de entradas seleccionadas en el formato producido por el campo POM correspondiente. template_id es obligatorio. Un feed anidado está limitado a seis entradas relacionadas.

Términos de taxonomía

{{taxonomy_terms
    taxonomy="category"
    taxonomies_with_links="true"
    without_wrapper="true"
    number="3"
}}

Las opciones útiles incluyen taxonomy, taxonomies_with_links, without_wrapper, number, display_color, tooltip, link_color, category_thumbnail y circle_thumbnail.

Iconos, etiquetas traducidas e interacciones

{{icon family="feather" name="heart"}}
{{translatable_string text=%%Read more%%}}
{{add_to_favorite family="bootstrap" icon="heart"}}
{{like_button family="bootstrap" icon="hand-thumbs-up"}}

El comportamiento de favoritos depende de que la característica correspondiente del tema esté disponible. El botón «me gusta» muestra el recuento actual y el control.

Etiquetas de producto de WooCommerce

Las etiquetas exclusivas de productos no devuelven contenido para otros tipos de entrada.

El formulario percent no añade un signo de porcentaje. Añádelo después de la etiqueta cuando el diseño lo necesite:

{{sale_amount type="percent"}}%

Galería de producto en un modal

Usa esta etiqueta en una plantilla de feed de producto cuando los visitantes deban explorar todas las imágenes de un producto. WooCommerce debe estar activo, el listado debe devolver productos y los productos deben tener imágenes en Products → All Products → Edit → Product image / Product gallery.

1. Abre Settings → POM Theme → Templates → HMTL templates → Feed HTML templates y edita la plantilla seleccionada por el listado de productos.

2. En Template HTML, reemplaza las etiquetas de imagen dentro del modal por esta única etiqueta. Mantén la imagen de la tarjeta fuera del modal y la información restante del producto según sea necesario:

   {{e_commerce_product_gallery style="image_with_thumbnails" image_size="large" height="auto" arrows="yes" dots="yes" loop="yes" draggable="yes" include_featured="yes"}}

3. Asigna a cada modal un ID único que contenga {{post_id}}y usa el mismo ID en su activador. Añade modal_render_inline="yes" a web_modal para que su contenido viaje con los resultados reemplazados por el filtrado o la paginación. Por ejemplo:

   <button type="button" data-toggle="modal" data-target="#product-gallery-{{post_id}}">View images</button>
   [web_modal popup_hide_button="yes" el_id="product-gallery-{{post_id}}" modal_title="Product images" modal_width="large" modal_render_inline="yes"]
   [web_modal_content title="Images"]
   {{e_commerce_product_gallery}}
   [/web_modal_content]
   [/web_modal]

4. Guarda los ajustes del tema y refresca los recursos generados del sitio y la caché de páginas mediante sus controles normales de recursos/caché. Las dependencias de galería se detectan a partir de la etiqueta; no es necesaria una selección de script de carrusel por separado.

5. Abre dos modales de producto distintos. Comprueba las flechas, los puntos, la selección de miniaturas, la ampliación de la imagen y la reapertura. Alterna entre imágenes con proporciones diferentes y confirma que el carrusel principal sigue la altura de la imagen seleccionada mientras las miniaturas conservan su tamaño fijo. Repite la comprobación después de cambiar un filtro de Faceted Search y tras pasar a otra página de resultados, a anchos de escritorio y móvil.

La imagen destacada aparece primero, seguida de todas las imágenes de la galería del producto en su orden guardado. Los ID de adjunto repetidos aparecen una sola vez. Los adjuntos que faltan, están eliminados o no son imágenes se omiten. Sin imagen destacada, la galería empieza por su primera imagen disponible. Un producto con una sola imagen no tiene flechas, puntos, bucle ni arrastre; el estilo predeterminado conserva su única miniatura. Un producto sin imágenes utilizables, o un resultado que no es un producto, no renderiza ninguna galería. El texto o los contenedores opcionales que lo rodean siguen formando parte de tu plantilla.

Usa style="carrousel" para un slider sin navegación por miniaturas. Cada galería pertenece a su resultado actual; abrir otro producto no selecciona imágenes de las galerías vecinas.

Para la altura automática en una plantilla existente, elimina cualquier atributo numérico height o establece height="auto". Un valor configurado explícitamente como height="400" sigue solicitando una altura fija.

La etiqueta usa directamente las imágenes del producto de WooCommerce. No se requiere ningún campo de galería personalizado, migración de datos de producto ni metadatos indexados adicionales de Faceted Search. Las etiquetas existentes {{featured_image}}, {{e_commerce_product_img_from_gallery}} y de campo personalizado {{gallery}} conservan su significado actual. El mantenimiento normal del índice para los filtros de producto sigue aplicándose; el HTML de resultados en caché debe refrescarse después de cambiar una plantilla o las imágenes.

Si aparecen llaves en la página, comprueba que el tema instalado admita esta etiqueta y que esté en una plantilla de feed . Si no aparece ninguna imagen, confirma el tipo de entrada del listado y los adjuntos del producto en la Biblioteca de medios. Si un modal deja de abrirse después del filtrado, confirma modal_render_inline="yes" y los ID únicos coincidentes. Si los controles o las miniaturas no responden, regenera los recursos del sitio y borra las páginas en caché antes de revisar CSS o scripts personalizados.

Ejemplo completo de tarjeta de producto

<article class="product-card">
    {{sale_text text=%%Sale%%}}
    {{title}}
    {{e_commerce_product_btn}}
</article>

Para los productos, {{title}} ejecuta la salida del área de título del bucle de WooCommerce. Según los hooks de WooCommerce activos, esa salida ya puede incluir la imagen del producto, el título, la valoración y el precio. Añade las etiquetas de producto individuales solo cuando los hooks de bucle del sitio no proporcionen ya el mismo elemento.

Límites y alternativas

• Las etiquetas de feed desconocidas permanecen visibles entre llaves, lo que permite detectar un error de escritura o de tipo.
• Una plantilla de resultado personalizada que falta o no se puede usar produce una tarjeta mínima con solo el título.
• Los campos opcionales vacíos normalmente no producen salida dinámica, pero el HTML del contenedor creado permanece.
• Los campos personalizados usados a través de Faceted Search deben estar disponibles en ese contexto de resultados; actualiza el índice correspondiente después de cambiar los datos indexados. La etiqueta de galería de producto lee directamente los datos de imagen propios de WooCommerce.

Guías relacionadas

• Crear una plantilla de feed
• Etiquetas de combinación de la plantilla de feed
• Gestionar valores vacíos y alternativas