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.php
de 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.