Editar diseño del cuadro de comentarios en Wordpress

Índice de contenidos

Contenido

Los comentarios son una parte fundamental de nuestra página web que aportarán actividad a nuestra web y ofrecen al usuario la posibilidad de interactuar y resolver cualquier duda que puedan tener sobre los temas que tratamos en nuestra página web.

Además, los comentarios pueden aportar contenido valioso a nuestra web y proporcionar contenido para indexar a los motores de búsqueda. Por tanto, podemos afirmar que los comentarios pueden influir en nuestro posicionamiento y darnos visibilidad.

A pesar de que existen plugins como DiscuZ, que ofrecen una buena cantidad de opciones y funciones, el más sencillo y claro para los usuarios sigue siendo el que viene preinstalado en nuestro CMS. Además, será el mejor optimizado para nuestra web y nos ahorramos instalar otro plugin.

Vamos a ver como pasar de la imágen de la izquierda a la derecha mejorando el diseño de la caja de comentarios con código CSS y la instalación del reCaptcha de Google para evitar que nos lleguen comentarios de spam.

Caja de comentarios original

Caja de comentarios con diseño mejorado y reCaptcha

Instalar el Google reCaptcha para nuestros comentarios

Google reCaptcha es una de las herramientas más efectivas para evitar comentarios de Spam. Podemos utilizarlo tanto para enviar comentarios como para formularios de registro o recuperar contraseña, entre otros.

Google reCaptcha cuenta con distintas versiones y formas de verificar que el usuario es humano, como marcar la casilla de "no soy un robot" o resolver un reto. En los V3 Google detecta automáticamente si somos un robot o humano en función de nuestro comportamiento y actividad con el ratón y teclado de nuestro ordenador.

Lo primero que debemos hacer es intalar el plugin Advanced noCaptcha & invisible Captcha (v2 & v3). Este plugin, aunque tiene una versión de pago, es totalmente gratuito. Lo instalaremos y lo activaremos. Una vez activado en el menú ajustes aparecerá la opción para acceder al panel de configuración.

Una vez tenemos nuestro plugin instalado, debemos crear un Captcha desde nuestra cuenta Google. Para ello nos dirigimos a este enlace. También podemos acceder a este enlace directamente desde el panel de ajustes del plugin, en la esquina superior izquierda.

Una vez dentro, encontramos lo siguiente:

Simplemente, añadiremos el dominio para el cual lo vamos a utilizar y el tipo de Captcha que queremos.

Hemos optado por el V2 "No soy un robot" debido a que los reCaptcha invisibles o el v3 deben informar de las políticas de uso de Google mediante un icono flotante en una de las esquinas de nuestra web, aunque pueden utilizarse también sin ningún problema.

Una vez creado, pulsamos en Enviar y nos dará dos códigos (clave del sitio web y clave secreta) que vamos a introducir en nuestro plugin.

Abrimos la ventana de ajustes del plugin para terminar con la configuración del reCaptcha y configuramos como está indicado en la imágen (click para ampliar):

IMPORTANTE: Los códigos son exclusivos para cada plugin y dominio. Si queremos cambiar el tipo de reCaptcha, la versión V2 o V3, o el dominio, deberemos obtener unos nuevos códigos.

Para terminar guardamos los cambios y nuestro reCaptcha aparecerá junto al botón de Enviar comentario.

Mejorar el diseño de la caja de comentarios

Si bien es cierto que la caja de comentarios preinstalada en WordPress es la más sencilla y optimizada, puede que en función del tema que estemos utilizando no termine de integrarse completamente en nuestro tema.

Ahora que ya tenemos nuestro reCaptcha configurado vamos a mejorar el diseño de la caja de comentarios. Vamos a separar cuadro del Captcha del botón "publicar comentario" y vamos a crear un borde y un fondo para los comentarios.

Todo esto lo haremos con un sencillo codigo CSS que vamos a aplicar desde el panel Apariencia > Personalizar > CSS Adicional.

Añadimos el siguiente código CSS:

.comments-title
{
margin-left: 10px;

}
.comment-list
{
border-top: 1px solid #8da0bf;
border-bottom: 1px solid #8da0bf;
border-left: 1px solid #8da0bf;
border-right: 1px solid #8da0bf;
margin-left: 20px;
padding-bottom: 20px;
padding-left: 15px;
padding-right: 10px;
background-color:#fff6e0;
}

#commentform input,
#commentform textarea{
margin-top:15px;
}