Reseñas que el cliente añade por su cuenta
Las reseñas llegan sin parar, y es mejor que el cliente las añada él mismo. Cada reseña es una fila de la lista: la cita, la foto del autor y la firma.
Qué obtienes
<section class="reviews">
<h2 fld-text="Reviews title">What guests say</h2>
<div class="reviews__list" fld-loop="Reviews">
<figure class="review">
<blockquote fld-area="Quote">The quietest table in town and the best flat white.</blockquote>
<figcaption>
<img class="review__photo" src="images/guest-1.jpg" alt="" fld-image="Guest photo">
<span fld-text="Guest name">Maria, regular</span>
</figcaption>
</figure>
<figure class="review">
<blockquote fld-area="Quote">They remember my order after one visit.</blockquote>
<figcaption>
<img class="review__photo" src="images/guest-2.jpg" alt="" fld-image="Guest photo">
<span fld-text="Guest name">Leo, works next door</span>
</figcaption>
</figure>
</div>
</section>“The quietest table in town and the best flat white.” — Maria
“They remember my order after one visit.” — Leo
“Cardamom bun every Friday.” — Ines
El cliente añadió la tercera reseña en el panel.
Paso a paso
La lista va en el bloque de reseñas
fld-loop en el contenedor que agrupa las reseñas.
<div class="reviews__list" fld-loop="Reviews">
La cita
Una reseña puede ocupar varias líneas, así que es fld-area: los saltos de línea que haga el cliente se conservan.
<blockquote fld-area="Quote">The quietest table in town and the best flat white.</blockquote>
Foto y firma
fld-image en el
<img>y fld-text en el nombre del autor.<img class="review__photo" src="images/guest-1.jpg" alt="" fld-image="Guest photo"> <span fld-text="Guest name">Maria, regular</span>
Cada reseña, marcada
Todas las reseñas llevan los mismos atributos: así «Cargar datos» las lleva todas al panel.
<figure class="review"> <blockquote fld-area="Quote">They remember my order after one visit.</blockquote>
Lo importante
- El cliente cambia el orden de las reseñas arrastrando las filas y borra las que sobran: el bloque no se rompe.
- La descripción de la foto (
alt) sale de la biblioteca de medios de WordPress, no del marcado.
Errores frecuentes
El registro de la generación es la pestaña «Registros» de tu proyecto en themeforge.pro; la revisión gratuita del marcado muestra los mismos avisos.
<figure class="review">
<blockquote fld-area="Quote">The best flat white.</blockquote>
<figcaption fld-text="Quote">Maria, regular</figcaption>
</figure>El mismo nombre para dos campos distintos, la cita y la firma: la generación informa de una colisión, y en el panel queda un solo campo con dos funciones.
<figure class="review">
<blockquote fld-area="Quote">The best flat white.</blockquote>
<figcaption fld-text="Guest name">Maria, regular</figcaption>
</figure>Cada campo tiene su propio nombre.