Los comentarios juegan un papel crucial en la construcción de una comunidad en Internet. Los comentarios proporcionan una plataforma de interacción para sus lectores, donde pueden compartir sus pensamientos, lo que a menudo les hace querer volver.

Hay varias formas de animar a los usuarios a dejar un comentario en su blog. Una de esas formas es crear un formulario de comentarios atractivo, utilizable y accesible.

En este tutorial, le mostraremos cómo diseñar el formulario de comentarios predeterminado de WordPress, también le mostraremos cómo agregar la funcionalidad de comentarios a través de ID de redes sociales y cómo crear la funcionalidad de suscripción de comentarios y mucho más. Más.

Pero antes, si nunca has instalado WordPress, descubre ¿Cómo instalar un blog de WordPress pasos 7 et ¿Cómo encontrar, instalar y activar un tema de WordPress en tu blog 

Luego de vuelta a por qué estamos aquí.

Cómo cambiar el estilo de los comentarios de WordPress

Cuando hablamos de estilo, nos referimos al Lado CSS de la cosa. A continuación, le mostraré cómo personalizar el aspecto del formulario de comentarios en WordPress. Cada elemento por defecto en WordPress tiene un código CSS, este es el caso de la lista de comentarios, menús de navegación, el formulario de comentarios, el widgets y mucho más.

Entre los archivos de Temas de WordPress, tenemos un archivo llamado comments.php que se utiliza para mostrar comentarios y formularios de comentarios en publicaciones y páginas de blogs. Para mostrar el formulario de comentarios de WordPress, el " comment_form () Es usado

Descubre ¿Cómo encontrar el enlace a la página de inicio de sesión de WordPress

De forma predeterminada, esta función genera su formulario de comentarios con tres campos de texto (nombre, correo electrónico y sitio web), un cuadro de texto grande para el contenido del comentario y el botón enviar.

Puede modificar fácilmente cada uno de estos elementos simplemente manipulando las clases e identificadores CSS predeterminados. Aquí hay una lista de las clases CSS predeterminadas que WordPress agrega en cada formulario de comentario.

#respond {#} de respuesta del título {#} cancelar how-respuesta-link {} {} #commentform #author #email {} {} {} #url #comentario #submit .comment Notas {} {} .required .how-forma-autor {} .comment-form-email} {.how-form-url} {.how-forma-how {} .Form-permitido-tags {} .Form a presentar

Simplemente ajustando estas clases CSS, puede cambiar completamente la apariencia del formulario de comentarios. Intentemos cambiar algo para darte una idea de lo que podemos hacer.

Descubre Cómo reemplazar enlaces de imagen después de instalar SSL en WordPress

Primero, comenzaremos resaltando el campo activo del formulario. Al resaltar los campos activos, los usuarios podrán ver fácilmente lo que están cambiando y le dará un poco de dinamismo a su sitio web.

#respond {background: #ececec; padding: 0 5 0px 5px; } / * Destacando el campo de texto activo * / entrada #respond [type = texto] textarea {-webkit-transición: todos 0.30s facilidad-in-out; -moz-transición: todos 0.30s facilidad-in-out; -ms-transición: todos 0.30s facilidad-in-out; -o-transición: todos 0.30s facilidad-in-out; Esquema: ninguna; padding: 3px 0px 3px 3px; margen: 5px 1px 3px 0px; frontera: #dddddd 1px sólido; } #respond de entrada [type = texto]: enfoque, área de texto: focus {box-shadow: RGBA 0 0 5px (81, 203, 238, 1); margen: 5px 1px 3px 0px; frontera: RGBA 1px sólido (81, 203, 238, 1); }

Así es como se verá su formulario de comentarios con Twenty Twelve.

Con el uso de estas clases, puede cambiar la forma en que aparece el texto dentro de los campos. Esto es lo que haremos en el siguiente ejemplo.

#author {font-family: "langosta langosta 1.4", "Sans Droid", Arial; font-size: 16px; Color: #1d1d1d; letter-spacing: .1em; #url} {color: #21759b; font-family: "Luicida consola", "Courier New", "Courier", monovolumen; } 

Aquí está el resultado que producirá el código anterior.

También puede cambiar el estilo del botón del formulario de comentarios. En el siguiente ejemplo, le daremos un fondo degradado.

#submit {font-family: Arial; de color: #ffffff; font-size: 20px; padding: 10px; text-decoration: none; box-shadow: 0px 1px 3px #666666; webkit-box-shadow: 0px 1px 3px #666666; -moz-box-shadow: 0px 1px 3px #666666; text-shadow: 1px 1px 3px #666666; fondo: -webkit-gradiente (lineal, 0 0, 0 100%, a partir de (#006ad4) a (#003366)); fondo: -moz-lineal-gradiente (superior, #006ad4, #003366); } #submit: hover {background: -webkit-gradiente (lineal, 0 0, 0 100%, a partir de (#003366) a (#006ad4)); fondo: -moz-lineal-gradiente (superior, #003366, #006ad4)}

Aquí está el resultado que se mostrará.

Cómo agregar interacción social en los comentarios

Comencemos agregando inicios de sesión sociales al formulario de comentarios de WordPress. Lo primero que debe hacer es instalar y activar el complemento. Ingresar Social

Descubre Cómo instalar un plugin en WordPress Para activar este complemento debes crear una cuenta gratuita yendo a la siguiente dirección: https://app.oneall.com

Una vez hecho esto, no tendrá que configurar una API para cada red que desee utilizar para permitir que sus usuarios se conecten a través de ellas.

Aunque las API de las distintas redes sociales cambian constantemente, no tendrás que hacer nada, los desarrolladores de este plugin actualizarán su API por ti. Todo lo que necesita hacer es iniciar sesión en la API de OneAll.

Así es como se mostrarán sus formularios.

Descubre también algunos complementos premium de WordPress  

Puedes usar otros plugins de WordPress para dar una apariencia moderna y optimizar el manejo de tu blog o sitio web.

Aquí le ofrecemos algunos complementos premium de WordPress que lo ayudarán a hacerlo.

1. Búsqueda instantánea y sugerencia automática de WP

El complemento "Búsqueda instantánea y sugerencia automática de WP" le permite obtener instantáneamente sugerencias de artículos, páginas y tipos de publicaciones personalizadas cuando busca en su blog de WordPress. Funciona con WPBakery et Piedra angular.

Sus características incluyen: la rbuscar en modo de pantalla completa, la rBúsqueda instantánea de tipos personalizados de publicaciones, compatibilidad con Visual Composer, ttres estilos de diseño integrados, esquemas de color 5 para elegir, el psoporte para teclado y mouse, etotalmente personalizable mediante parámetros, etc.

Descargar | Demo | alojamiento web

2. Página de error 404 Redirigir a la página de inicio o página personalizada

Esta es una de las mejores maneras de agregar fácilmente una página de error 404 que redirigirá al visitante a la página de inicio o página personalizada, después de habilitar esto Plugin de WordPress.

Todas las páginas de error 404 se redirigirán a la página de inicio o a una URL personalizada. Al usar esto Plugin de WordPress, permitirá que Google reduzca el rango de página de su sitio web si tiene muchas páginas de error 404.

Ce Plugin de WordPress no sólo realiza redirecciones, sino que también puede ser una solución adecuada para mejorar la clasificación de su sitio web en los resultados de los motores de búsqueda.

Descargar | Demo | alojamiento web

3. Mensajes relacionados Pro 

Related Posts Pro proporciona una solución simple pero poderosa para todo tipo de contenido similar en WordPress. Admite tipos de publicaciones personalizadas, multisitio, categorías, contenido mixto, contenido personalizado y más ...

Como características que ofrece entre otros: 3 diferentes tipos de diseños, Plantillas predefinidas de 65 para cada diseño, unno será necesaria la codificación, el soporte de tnavegación y reproducción automática, compatibilidad con los tipos de publicaciones personalizadas que utilizan los complementos WooCommerce, WP eCommerce, bbPress etc ..., un barra de búsqueda con filtro, a ddocumentación muy descriptiva y mucho más.

Descargar | Demo | alojamiento web

Recursos recomendados

Conozca otros recursos recomendados para ayudarlo a construir y administrar su sitio web.

• Cómo mostrar la descripción de las categorías en WordPress
• Cómo optimizar su archivo WordPress Robots.txt para un SEO perfecto
• Cómo crear un mercado con WordPress
• Cómo añadir un widget a la cabecera de tu blog de WordPress

Conclusión

Listo ! Eso es todo por este tutorial. Esperamos que este artículo le haya ayudado a hacer que sus formularios de comentarios sean más atractivos. No dudes en ofrecernos también tus consejos sobre la personalización de WordPress, y especialmente comparte este artículo con tus amigos en tus redes sociales favoritas. 

Sin embargo, también podrá consultar nuestra Recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress.

Si tienes sugerencias o comentarios, déjalos en nuestra sección comentarios.

...