¿Quiere cambiar el estilo del formulario de comentarios de WordPress en su sitio web? Los comentarios juegan un papel importante en la creación de participación de los usuarios en un sitio web. Un formulario de comentarios agradable e intuitivo anima a los usuarios a unirse a la discusión. Es por eso que hemos creado la guía definitiva sobre cómo diseñar fácilmente su formulario de comentarios de WordPress.
Antes de empezar
Los temas de WordPress controlan el aspecto de su sitio web. Cada tema de WordPress viene con varios archivos, incluidos archivos de plantilla, archivos de funciones, JavaScript y hojas de estilo.
Las hojas de estilo contienen reglas CSS para todos los elementos utilizados por su tema de WordPress. Puede agregar su propio CSS personalizado para anular las reglas de estilo del tema.
Si nunca ha hecho esto antes, consulte nuestro artículo sobre cómo agregar CSS personalizado en WordPress para principiantes.
Además de CSS, es posible que deba agregar algunas funciones para cambiar el aspecto predeterminado del formulario de comentarios de WordPress. Si nunca ha hecho esto antes, consulte nuestro artículo sobre cómo copiar y pegar código en WordPress.
Dicho esto, echemos un vistazo a cómo diseñar el formulario de comentarios de WordPress.
Como esta es una guía bastante completa, hemos creado una tabla de contenido para facilitar la navegación:
Cambiar el estilo del formulario de comentarios en WordPress
Dentro de la mayoría de los temas de WordPress hay una plantilla llamada comments.php. Este archivo se utiliza para mostrar comentarios y formularios de comentarios en las publicaciones de su blog. El formulario de comentarios de WordPress se genera mediante la función: <?php comment_form(); ?>.
De forma predeterminada, esta función genera el formulario de comentarios con tres campos de texto (nombre, correo electrónico y sitio web), un campo de área de texto para el texto del comentario, una casilla de verificación para el cumplimiento de GDPR y el botón de envío.
Puede editar fácilmente cada uno de estos campos simplemente editando las clases CSS predeterminadas. A continuación se muestra una lista de las clases CSS predeterminadas que WordPress agrega a cada formulario de comentario.
#respond { }
#reply-title { }
#cancel-comment-reply-link { }
#commentform { }
#author { }
#email { }
#url { }
#comment
#submit
.comment-notes { }
.required { }
.comment-form-author { }
.comment-form-email { }
.comment-form-url { }
.comment-form-comment { }
.comment-form-cookies-consent { }
.form-allowed-tags { }
.form-submit
Simplemente modificando estas clases de CSS, puede cambiar completamente el aspecto de su formulario de comentarios de WordPress.
Sigamos adelante e intentemos cambiar algunas cosas para que pueda tener una buena idea de cómo funciona esto.
Primero, comenzaremos resaltando el campo de formulario activo. Resaltar el campo actualmente activo hace que el formulario sea más accesible para personas con necesidades especiales y también hace que el formulario de comentarios sea más agradable en dispositivos más pequeños.
#respond {
background: #fbfbfb;
padding:0 10px 0 10px;
}
/* Highlight active form field */
#respond input[type=text], textarea {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid #DDDDDD;
}
#respond input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
margin: 5px 1px 3px 0px;
border: 2px solid rgba(81, 203, 238, 1);
}
Así es como se veía nuestro módulo en el tema Twenty Sixteen de WordPress después de los cambios:
Con estas clases, puede cambiar el comportamiento de cómo aparece el texto dentro de los cuadros de entrada. Continuaremos y cambiaremos el estilo del texto del nombre del autor y los campos de URL.
#author, #email {
font-family: "Open Sans", "Droid Sans", Arial;
font-style:italic;
color:#1d1d1d;
letter-spacing:.1em;
}
#url {
color: #1d1d1d;
font-family: "Luicida Console", "Courier New", "Courier", monospace;
}
Si observa detenidamente la captura de pantalla a continuación, el nombre del campo de correo electrónico y la fuente son diferentes de la URL del sitio web.
También puede cambiar el estilo del botón de envío del formulario de comentarios de WordPress. En lugar de usar el botón de envío predeterminado, demos un degradado CSS3 y una sombra de cuadro.
#submit {
background:-moz-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-webkit-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-o-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-ms-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:linear-gradient(to bottom, #44c767 5%, #5cbf2a 100%);
background-color:#44c767;
-moz-border-radius:28px;
-webkit-border-radius:28px;
border-radius:28px;
border:1px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:17px;
padding:16px 31px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
}
#submit:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5cbf2a), color-stop(1, #44c767));
background:-moz-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-webkit-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-o-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-ms-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:linear-gradient(to bottom, #5cbf2a 5%, #44c767 100%);
background-color:#5cbf2a;
}
#submit:active {
position:relative;
top:1px;
}
Lleve los formularios de comentarios de WordPress al siguiente nivel
Podrías pensar que es demasiado simple. Bueno, tenemos que empezar por ahí para que todos puedan seguirnos.
Puede llevar su formulario de comentarios de WordPress al siguiente nivel reorganizando los campos del formulario, agregando inicio de sesión social, suscribiéndose a comentarios, pautas de comentarios, etiquetas rápidas y más.
Agregar inicio de sesión social a los comentarios de WordPress
Comencemos agregando inicios de sesión sociales a los comentarios de WordPress.
Lo primero que debe hacer es instalar y activar el archivo. Inicio de sesión social de WordPress conectar. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Después de la activación, debe visitar Configuración »WP Social Login página para configurar los ajustes del plugin.
El plugin requerirá claves API para conectarse con plataformas sociales. Verá enlaces con instrucciones sobre cómo obtener esta información para cada plataforma.
Después de ingresar las claves API, haga clic en el botón Guardar configuración para almacenar los cambios.
Ahora puede visitar su sitio web para ver los botones de inicio de sesión social sobre el formulario de comentarios.
Se agregó texto de política de comentarios antes o después del formulario de comentarios
Amamos a todos nuestros usuarios y realmente apreciamos que se tomen unos minutos para dejar un comentario en nuestro sitio. Sin embargo, para crear un ambiente de discusión saludable, es importante moderar los comentarios.
Para lograr la máxima transparencia, hemos creado una página de política de comentarios, pero no puede simplemente poner este enlace en el pie de página.
Queríamos que nuestra política de comentarios fuera prominente y visible para todos los usuarios que dejan un comentario. Es por eso que hemos decidido agregar la política de comentarios en nuestro formulario de comentarios de WordPress.
Si desea agregar una página de política de comentarios, lo primero que debe hacer es crear una página de WordPress y definir su política de comentarios (puede robar la nuestra y modificarla para que se adapte a sus necesidades).
Después de eso, puede agregar el siguiente código en el archivo functions.php de su tema o en un plugin específico del sitio.
function trucoswp_comment_text_before($arg) {
$arg['comment_notes_before'] = "<p class="comment-policy">We are glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our <a href="http://www.example.com/comment-policy-page/">comment policy</a>.</p>";
return $arg;
}
add_filter('comment_form_defaults', 'trucoswp_comment_text_before');
El código anterior reemplazará el formulario de comentarios predeterminado antes de las notas con este texto. También hemos agregado una clase CSS en el código, para que pueda resaltar la advertencia usando CSS. Aquí está el CSS de muestra que usamos:
p.comment-policy {
border: 1px solid #ffd499;
background-color: #fff4e5;
border-radius: 5px;
padding: 10px;
margin: 10px 0px 10px 0px;
font-size: small;
font-style: italic;
}
Así es como se veía en nuestro sitio de prueba:
Si desea ver el enlace después del área de texto del comentario, use el siguiente código.
function trucoswp_comment_text_after($arg) {
$arg['comment_notes_after'] = "<p class="comment-policy">We are glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our <a href="http://www.example.com/comment-policy-page/">comment policy</a>.</p>";
return $arg;
}
add_filter('comment_form_defaults', 'trucoswp_comment_text_after');
No olvide cambiar la URL en consecuencia, para que apunte a la página de política de comentarios en lugar de example.com
Mover el campo de texto del comentario hacia abajo
De forma predeterminada, el formulario de comentarios de WordPress muestra primero el área de texto del comentario y luego los campos de nombre, correo electrónico y sitio web. Este cambio se introdujo en WordPress 4.4.
Antes de eso, los sitios web de WordPress primero mostraban el nombre, el correo electrónico y los campos del sitio web, luego el cuadro de texto del comentario. Sentimos que nuestros usuarios estaban acostumbrados a ver el formulario de comentarios en ese orden, por lo que todavía estamos usando el antiguo orden de campo en TrucosWP.
Si desea hacer eso, todo lo que necesita hacer es agregar el siguiente código al archivo functions.php de su tema o un plugin específico del sitio.
function wpb_move_comment_field_to_bottom( $fields ) {
$comment_field = $fields['comment'];
unset( $fields['comment'] );
$fields['comment'] = $comment_field;
return $fields;
}
add_filter( 'comment_form_fields', 'wpb_move_comment_field_to_bottom');
Este código simplemente mueve el campo del área de texto del comentario al final.
Elimine el campo del sitio web (URL) del formulario de comentarios de WordPress
El campo del sitio web en el formulario de comentarios atrae a muchos spammers. Si bien eliminarlo no detendrá a los spammers ni reducirá los comentarios de spam, definitivamente evitará que apruebe accidentalmente un comentario con un enlace al sitio web de un autor no válido.
También reducirá un campo del formulario de comentarios, haciéndolo más fácil e intuitivo. Para obtener más información sobre este tema, consulte nuestro artículo sobre cómo eliminar el campo de URL del sitio web del formulario de comentarios de WordPress.
Para eliminar el campo URL del formulario de comentarios, simplemente agregue el siguiente código a su archivo functions.php o un plugin específico del sitio.
function trucoswp_remove_comment_url($arg) {
$arg['url'] = '';
return $arg;
}
add_filter('comment_form_default_fields', 'trucoswp_remove_comment_url');
Agregar una casilla de verificación Suscribirse a comentarios en WordPress
Cuando los usuarios dejan un comentario en su sitio web, es posible que quieran seguir ese hilo para ver si alguien ha respondido a su comentario. Al agregar una casilla de verificación para suscribirse a los comentarios, permite que los usuarios reciban notificaciones instantáneas cada vez que aparece un nuevo comentario en la publicación.
Para agregar esta casilla de verificación, lo primero que debe hacer es instalar y activar Suscribirse a comentarios recargados conectar. Tras la activación, debe visitar Configuración »Suscribirse a comentarios para configurar los ajustes del plugin.
Para obtener instrucciones detalladas paso a paso, consulte nuestro artículo sobre cómo permitir que los usuarios se suscriban a comentarios en WordPress.
Agregar etiquetas rápidas en el formulario de comentarios
Las etiquetas rápidas son botones de formato que permiten a los usuarios diseñar fácilmente sus comentarios. Estos incluyen botones para negrita, cursiva, agregar un enlace o una cita en bloque.
Para agregar etiquetas rápidas, debe instalar y activar el Etiquetas rápidas de comentarios básicos conectar. Para obtener más detalles, consulte nuestro artículo sobre cómo agregar fácilmente etiquetas rápidas en el formulario de comentarios de WordPress.
Así es como se verá su formulario de comentarios después de agregar etiquetas rápidas.
Esperamos que este artículo le haya ayudado a aprender a diseñar el formulario de comentarios de WordPress para hacerlo más divertido para sus usuarios. Es posible que también desee ver nuestros consejos para obtener más comentarios en las publicaciones de su blog de WordPress.
¿Te ha resultado útil??
0 / 0