He estado buscando un plugin para valoraciones en WordPress y he encontrado Rich Reviews. Aquí tienes el enlace por si quieres consultar más Rich Reviews by Starfish.
Estuve probando varios pero no me han convencido pues tienen más prestaciones que las que necesito en este momento. Ten en cuenta que instalar más plugins de los necesarios pueden ralentizar tu web y si estos tienen muchas funciones también influirán en tus tiempos de carga. En este post te comento algunos de los elementos básicos para crear tu web.
Quería un plugin simple, con una configuración básica. Mi objetivo ahora es familiarizarme con las herramientas de marcado de Google y como funciona, así que tendré que esperar un tiempo.
En cualquier caso el plugin será interesante porque si me estás leyendo podrás valorar la entrada. Mi intención es que los lectores puedan valorar cada post a partir de estrellas, sin demasiadas complicaciones.
La opción de dejar opiniones escritas la veo más válida para el sitio web en general así que lo dejo pendiente. De todas formas sigue activo el cajón de comentarios en las entradas que por defecto trae WordPress.
Instalación y configuración de Rich Reviews.
Como siempre para su implementación deberás ir al repositorio de plugins de WordPress y desde allí instalarlo o hacerlo vía FTP.
Rich Reviews es un plugin que funciona con shortcodes. Tiene tres tipos de reseñas (por página o post, por categoría o general para todo el sitio web) que se pueden incluir y optimizar en un post, en el sidebar, en el footer, donde quieras.
Lo primero que se encuentra al activar el plugin es el Dashboard, esta parte será importante porque tiene la descripción de los shortcodes. Describe cual trozo de código utilizar en la parte que quieras de tu web.
Hay otras dos pestañas para las reseñas Pendientes y Aprobadas. Aquí se recomienda no desactivar la aprobación para evitar ataques indeseados de robots.
La siguiente pestaña es la de Opciones y aquí es donde comienza el apartado para configurarlo. Podrás incluir un correo electrónico si quieres que te notifique de una reseña pendiente. Tengo que decir que no es muy satisfactorio porque te envía la misma alerta varias veces. Algo a mejorar por parte de los desarrolladores.
En la opción Form podrás elegir los campos que quieres mostrar. Como te dije al principio yo buscaba algo sencillo por lo tanto solo utilizo cuatro campos. Dos son obligatorios (las estrellas o rating y el botón de Enviar), los otros que he seleccionado son Nombre y Correo electrónico.
En la pestaña Display puedes cambiar el color de las estrellas, el orden de las reseñas, etc. Bastante sencillo.
La pestaña User básicamente te pregunta si quieres que el usuario esté logueado en WordPress para dejar una reseña.
Finalmente la dedicada a Markup es para los buscadores. En ella darás detalles de tu sitio web, si ofreces un producto o servicio, si eres una organización, un negocio local, etc. Como estoy en fase de prueba aún no entiendo bien el alcance de esta parte pero creo que se puede rellenar de manera bastante intuitiva porque tú mejor que nadie sabrás lo que hace tu negocio.
Para un primer momento y cómo es una prueba solo quiero mostrar el plugin en las entradas del blog al final de cada post voy a invitar al lector a dejar una valoración y al principio del post tener un resumen de valoraciones que visualmente serán estrellas.
Creando Shortcodes Reutilizables
El siguiente problema ha sido cómo reutilizar estos shortcodes en cada entrada porque evidentemente cada vez que escriba un artículo quiero invitar al lector a dejar una valoración.
Este problema lo he solucionado creando dos shortcodes de manera muy sencilla. Uno solo con estrellas que irá al inicio de cada artículo y otro al final de la entrada con la caja correspondiente a nombre, email, rating y enviar.
Como crear el shortcode
Como casi todos supongo usamos el editor de Gutenberg solo tienes que crear un nuevo bloque. En vez de seleccionar párrafo, encabezado, etc, busca shortcode. Te abrirá una caja para colocar el trozo de código que ya antes has seleccionado en Rich Reviews y lo pegas.
Lo siguiente es en el editor del bloque seleccionar Añadir a bloque reutilizable y guardar con un nombre. Ya estará creado.
Cuando lo necesites utilizar nuevamente vuelves a insertar un bloque y buscas según el nombre con que hayas guardado.
Si como yo quieres agregar un texto puedes volver al editor del bloque, en los tres puntos hay una opción de Insertar antes/ Insertar después. Colócate antes donde quieras insertar tu texto, escribe y vuelve a guardar. Tendrás como yo tu shortcode listo para insertar en las entradas que quieras. Ahora puedes dejar tu estrella y de paso probar como funciona todo lo que te he contado aquí.
Cambiando el CSS de Rich Reviews
El resultado digamos automático de esta selección no me gustaba como quedaba así que con CSS he tenido qué editar para obtener un resultado más aceptable.
Un punto importante es que he agregado una clase al texto que he añadido al shortcode de las estrellas de Rich Reviews (/*titulo-estrellas*/), no encontraba manera de alinearlo con los iconos, así que esta ha sido mi solución al menos temporal.
Este es el código que he utilizado yo. Estuve probando en local con una página de pruebas que tengo pero que no tiene instalado el mismo tema, así que es posible que tengas que revisar las clases que te creará Rich Reviews, pueden no ser las mismas.
/* Rich Reviews */ MODIFICACIONES SUGERIDAS EN EL CSS
.rr_review_text, .rr_review_name {
display: none;
}
.review-head, .review-info {
line-height: 0;
}
div.stars {
margin-left: 35rem;
padding-top: 0;
line-height: 0;
}
p.titulo-estrellas {
margin-right: 10px;
font-size: 3rem;
padding-bottom: 0;
font-weight: bold;
text-transform: uppercase;
line-height: 0;
}
.rr_form_input {
background-color: #f2f2e1;
border-radius: 3px;
}
.rr_form_input
input[type=»submit»] {
background-color: #eded82;
color: #000000;
font-size: 20px;
}
Probablemente los puristas del CSS no lo verán del todo satisfactorio pero me encanta CSS así que prometo aprender mucho más y si hay alguna sugerencia, también será bienvenida. La fórmula para modificar el CSS de WordPress sin complicaciones se me resiste.