Este snippet de código para WordPress permite a los visitantes de tu sitio web dejar reseñas de forma segura y sencilla. A continuación, te explicaré cómo funciona este snippet, sus casos de uso y cómo implementarlo en tu sitio web.
¿Cómo Funciona?
Este snippet crea un shortcode llamado reviews_seguras, que puedes insertar en cualquier página o entrada de tu sitio WordPress. Al hacerlo, se mostrará un bloque que permite a los usuarios calificar tu servicio del 1 al 5 utilizando estrellas. Además, según la calificación, se mostrará un formulario para dejar una reseña detallada o un enlace para valorar el servicio en Google.
Si tu cliente vota menos de 5: le mostramos un formulario para que escriba su comentario y nos llegue al correo.
Si tu cliente vota 5, ¡entonces está contento! y le mostramos un bloque para que la reseña la escriba en Google.
IMPORTANTE: cambia la URL de las reseñas para que vayan a tu negocio, $reviewgoogle=»aquí tu enlace»
La URL la puedes conseguir iniciando sesión en Google y poniendo tu negocio en el buscador, luego pincha en Solicitar reseña y copia la URL
function reviews_seguras_shortcode() {
ob_start();
$reviewgoogle="https://g.page/r/CdQZ3dhos_OzEss/review";
?>
<div class="reviews-seguras">
<h2>Comparte tu opinión</h2>
<p>Califica nuestro servicio del 1 al 5</p>
<div class="estrellas">
<?php for ($i = 1; $i <= 5; $i++) { ?>
<span class="estrella" data-valor="<?php echo $i; ?>">★</span>
<?php } ?>
</div>
<?php
if ($_POST['action'] == 'guardar_reseña' && isset($_POST['reseña'])) {
$valoración = intval($_POST['valoración']);
$reseña = sanitize_text_field($_POST['reseña']);
// Envía el correo al administrador
$admin_email = get_option('admin_email');
$subject = 'Nueva reseña';
$message = "Mensaje enviado:\n\n$reseña";
wp_mail($admin_email, $subject, $message);
// Muestra un mensaje de confirmación
echo '<p>Mensaje enviado, gracias por tu comentario</p>';
} else {
?>
<div class="formulario-reseña" style="display: none;text-align:left">
<form action="<?php echo esc_url($_SERVER['REQUEST_URI']); ?>" method="post">
<label for="reseña">Valora tu experiencia:</label>
<textarea id="reseña" name="reseña" required></textarea>
<input type="hidden" name="action" value="guardar_reseña">
<input type="hidden" id="valoración" name="valoración" value="0">
<input type="submit" value="Enviar">
</form>
</div>
<div class="bloque-google-reseña" style="display: none;">
<div class="bloque-google">
<h3><span>¿Nos ayudas?</span> Valoranos en Google</h3>
<p>Tu opinión es nuestra inspiración para mejorar constantemente.</p>
<a href="<?php echo $reviewgoogle;?>" target="_blank" class="boton-google">Dejar reseña</a>
</div>
</div>
<?php } ?>
</div>
<style>
/* Estilos anteriores */
.reviews-seguras {
text-align: center;
margin: 20px;
}
.estrella {
font-size: 30px;
cursor: pointer;
color: black;
}
.estrella:hover,
.estrella.clicked,
.estrella.selected {
color: fuchsia;
}
.bloque-google {
border: 2px solid #000;
padding: 40px;
border-radius: 15px;
margin-top: 20px;
}
.bloque-google a {
background: #357fbf;
color: #fff;
padding: 12px 24px;
border-radius: 40px;
margin-top: 15px;
display: inline-block;
}
.bloque-google span {
color: #357fbf;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
var estrellas = document.querySelectorAll(".estrella");
var formularioReseña = document.querySelector(".formulario-reseña");
var bloqueGoogleReseña = document.querySelector(".bloque-google-reseña");
var valoraciónInput = document.getElementById("valoración");
var reviewsSeguras = document.querySelector(".reviews-seguras");
var estrellasHabilitadas = true; // Variable para rastrear si las estrellas están habilitadas
estrellas.forEach(function (estrella) {
estrella.addEventListener("mouseover", function () {
if (estrellasHabilitadas) {
var valor = parseInt(estrella.getAttribute("data-valor"));
estrellas.forEach(function (e, i) {
if (i < valor) {
e.classList.add("selected");
} else {
e.classList.remove("selected");
}
});
}
});
});
estrellas.forEach(function (estrella) {
estrella.addEventListener("click", function () {
if (estrellasHabilitadas) {
var valor = parseInt(estrella.getAttribute("data-valor"));
estrellasHabilitadas = false; // Deshabilitar las estrellas después del clic
estrellas.forEach(function (e, i) {
if (i < valor) {
e.classList.add("clicked");
}
e.classList.remove("hovered");
});
valoraciónInput.value = valor;
if (valor < 5) {
formularioReseña.style.display = "block";
bloqueGoogleReseña.style.display = "none";
} else if (valor === 5) {
formularioReseña.style.display = "none";
bloqueGoogleReseña.style.display = "block";
}
}
});
});
});
</script>
<?php
return ob_get_clean();
}
add_shortcode('reviews_seguras', 'reviews_seguras_shortcode');
Casos de Uso
Este snippet es especialmente útil para:
- Sitios web de comercio electrónico que deseen recopilar reseñas de sus productos o servicios.
- Blogs o sitios de contenido que quieran recibir feedback de sus lectores.
- Cualquier tipo de negocio que busque mejorar su servicio al cliente mediante la recopilación de reseñas.
Implementación
Para implementar este snippet, sigue estos pasos:
- Copia todo el código del snippet.
- Ve al panel de administración de WordPress.
- Navega a
Apariencia > Editor de Temas. - Encuentra el archivo
functions.phpde tu tema y pégalo al final del archivo. - Guarda los cambios.
Ahora puedes usar el shortcode [reviews_seguras] en cualquier página o entrada para mostrar el bloque de reseñas.
Personalización
El snippet incluye estilos CSS y JavaScript para controlar la apariencia y el comportamiento del bloque de reseñas. Puedes modificar estos estilos según las necesidades de tu sitio web.
Consideraciones de Seguridad
El snippet utiliza la función sanitize_text_field para limpiar el texto de la reseña, lo que ayuda a prevenir ataques de inyección de código. Además, envía un correo electrónico al administrador del sitio con cada nueva reseña, lo que permite un seguimiento efectivo.
