Hosting en inglés

alojamiento web con Webhostinghub
Hosting SSD con Raiola

¿Como cambiar el estilo del formulario de comentarios en WordPress?

Los comentarios juegan un rol crucial a la hora de construir una comunidad alrededor de nuestros sitios. Los comentarios proveen una plataforma de interacción para nuestros lectores en la cual pueden intercambiar sus ideas y les brinda una razón para volver. Los mejores sitios construyen relaciones con sus visitantes a través de los comentarios.

Existen muchas maneras de incentivar a los usuarios a que dejen comentarios en el blog. Una de estas herramientas consiste en crear un formulario de comentarios útil, accesible y con una apariencia llamativa. En este artículo vamos a explicar como cambiar el estilo del formulario de contacto en WordPress para llevarlo hasta el siguiente nivel mediante la adición de conexiones de redes sociales, suscripción a los comentarios, política de los comentarios, y más.

Procedimiento para cambiar el estilo del formulario de comentarios

Cada página de nuestro sitio en WordPress contiene clases de estilo por defecto generadas mediante CSS. En la mayoría de los temas de WordPres existe una plantilla llamada comments.php la cual se utiliza para mostrar comentarios y un formulario de comentarios en los artículos/páginas. El formulario de comentarios de WordPress es generado por medio de la función <?php comment_form(); ?>.

Por defecto, esta función genera el formulario de comentario con tres campos de texto (Nombre, Correo electrónico y Sitio web), un área de texto para escribir el texto del comentario y el botón de envío. Estos campos pueden ser modificados fácilmente mediante el ajuste de las clases CSS por defecto. A continuación se muestra una lista de clases CSS que WordPress añade a cada formulario de contacto:

#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 { }
.form-allowed-tags { }
.form-submit

Mediante el ajuste de estas clases CSS, podemos cambiar completamente la apariencia y estilo del formulario de contacto en WordPress. Para explicar el procedimiento vamos a mostrar algunos ejemplos.

Primero vamos a comenzar por destacar el campo activo del formulario de contacto. Resaltar el campo activo actual hace que el formulario sea más útil para personas que tienen necesidades especiales y a la vez consigue que el formulario se vea más vivo.

#respond {
background: #ececec;
padding:0 5px 0 5px;
}
/* Destacar campo activo del formulario */
#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, textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
margin: 5px 1px 3px 0px;
border: 1px solid rgba(81, 203, 238, 1);
}

Así es como el formulario se vería en el tema Twenty Twelve de WordPress:

formulario-comentarios-destacado

Utilizando estas clases CSS podemos cambiar el comportamiento y la manera en que el texto aparecen dentro de los campos de entrada de datos. Ahora vamos a cambiar el estilo del texto del campo del nombre del autor y el campo donde se añade la URL.

#author {
font-family: Lobster, “Lobster 1.4”, “Droid Sans”, Arial;
font-size: 16px;
color:#1d1d1d;
letter-spacing:.1em;
}
#url {
color: #21759b;
font-family: “Luicida Console”, “Courier New”, “Courier”,monospace;
}

Podemos notar en la siguiente imagen que la fuente del campo del nombre es distinta a la del resto del formulario. Así mismo el texto en el campo de la URL ahora es de color azul.

estilo-formulario-comentarios-Wordpress

También tenemos la posibilidad de cambiar el estilo del botón de envío del formulario de comentarios. En vez de utilizar el botón de envío por defecto, agreguemos una sombra al área del botón así como una gradiente CSS3.

#submit {
font-family: Arial;
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;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#006ad4), to(#003366));
background: -moz-linear-gradient(top, #006ad4, #003366);
}

#submit:hover {
background: -webkit-gradient(linear, 0 0, 0 100%, from(#003366), to(#006ad4));
background: -moz-linear-gradient(top, #003366, #006ad4)
}

boton-envio-comentarios-wordpress

¿Como personalizar aún más el formulario de comentarios y llevarlo al siguiente nivel?

Muchos probablemente estarán pensando que todo esto es muy básico. Ahora vamos a explicar como llevar el formulario de comentarios al siguiente nivel mediante la adición de diversos elementos como conexiones de redes sociales, suscripción a los comentarios, política de los comentarios, suscripción al newsletter, quicktags, y mucho más.

¿Cómo añadir social logins en los comentarios de WordPress?

Vamos a comenzar por añadir enlaces para conectarse a las redes sociales en el formulario de comentarios. Para esto podemos instalar y activar el plugin WordPress Social Login.

Una vez que se ha activado el plugin, vamos a Settings » WordPress Social Login en donde tenemos que agregar un app ID y un app Key para Google, Facebook y Twitter. Este plugin provee instrucciones paso a paso para configurar correctamente el app en cada una de estas plataformas. Además, no es necesario incluir todas las redes sociales que este plugin puede mostrar. Simplemente podemos escoger cuáles tenemos mayor interés en incluir como Facebook y Twitter. Una vez que hemos finalizado con la configuración y los cambios fueron salvados, vamos a Advanced Settings (Ajustes Avanzados). En esa sección escogemos donde queremos que aparezcan los botones de conexión a las redes sociales. Por ejemplo, podemos escoger que los botones aparezcan en el formulario de comentarios, la página de inicio de sesión o en ambos. En esta página también tenemos la posibilidad de editar el estilo CSS para los botones de conexión.

ingreso-formulario-contacto-wordpress

De esta manera tendremos botones de conexión a las redes sociales que lucirán de la siguiente forma en el formulario de comentarios:

botones-redes-sociales

¿Como añadir texto de política de comentarios antes o después del formulario de comentarios?

Con el fin de crear discusiones útiles en un ambiente sano para cualquier participante  es importante moderar los comentarios. Para tener una transparencia completa se puede implementar una política de comentarios, la cual para que sea más efectiva, no puede indicarse solamente mediante un comentario en el footer. Para esto queremos que la política de comentarios sea prominente y visible para todos los usuarios que dejan comentarios, por lo que podemos añadirla directamente en el formulario de comentarios.

Si queremos añadir una página específica para la política de comentarios, entonces lo primero que debemos hacer es crear una nueva página en WordPress y definir esta política. Después de esto, añadimos el siguiente código en el archivo funtions.php del tema del sitio.

function internetrcc_comment_text($arg) {

$arg[‘comment_notes_before’] = “Nos alegramos de que haya elegido dejar un comentario. Por favor, tenga en cuenta que los comentarios son moderados según nuestra Política de Comentarios. Su email es requerido pero no será publicado.“;

return $arg;

}

add_filter(‘comment_form_defaults’,’internetrcc_comment_text’);

 

El código anterior le añade al formulario de comentarios el texto indicado en azul. También podemos añadir la política de comentarios abajo del formulario de comentarios y antes del botón de envío. Para hacer esto incluimos el siguiente código en el archivo funtions.php del tema del sitio:

function internetrcc_comment_text_after($arg) {
$arg[‘comment_notes_after’] = “Nos alegramos de que haya elegido dejar un comentario. Por favor, tenga en cuenta que los comentarios son moderados según nuestra Política de Comentarios. Su email es requerido pero no será publicado.“;

return $arg;
}

add_filter(‘comment_form_defaults’,’internetrcc_comment_text_after’);

 

Debemos recordar que hay que cambiar la URL correspondiente, de tal manera que esté dirigida a la página de política de comentarios del blog.

¿Como eliminar el campo de URL o sitio web del formulario de comentarios?

Muchos webmasters deciden eliminar el campo de URL del formulario de comentarios para evitar que los visitantes dejen comentarios de tipo spam que pueden resultar bastante molestos. A continuación mostramos como conseguir esto sin el uso de ningún plugin. Simplemente añadimos el siguiente código en el archivo funtions.php del tema del sitio:

function wpbeginner_remove_comment_url($arg) {
$arg[‘url’] = ”;
return $arg;
}
add_filter(‘comment_form_default_fields’,’wpbeginner_remove_comment_url’);

¿Como añadir una casilla de Suscripción a los Comentarios en el formulario de comentarios de WordPress?

Cuando los usuarios dejan comentarios en un blog, en algunos casos pueden tener interés en seguir el hilo de discusión para ver si alguien ha replicado a sus comentarios. Mediante la adición de una casilla de suscripción a los comentarios, le permitimos a los visitantes recibir notificaciones instantáneas cada vez que aparece un nuevo comentario en el artículo. Para incluir esta casilla lo primero que debemos hacer es instalar y activar el plugin Suscribe to Comments. Después de la activación, el plugin añade una casilla con el texto “Notify me of followup comments via e-mail” (Notificarme de comentarios de seguimiento mediante el correo electrónico) debajo del texto.

A partir de ahora, el plugin notificará al usuario de todos los comentarios que se incluyan en el artículo. Si queremos notificar al usuario cuando hayan réplicas a sus comentarios, entonces podemos utilizar un plugin llamado Send Email only on Reply to My Comment.

Nota: Solo se puede utilizar uno u otro plugin, no los dos al mismo tiempo.

Esperamos que esta guía para modificar el formulario de comentarios sea útil. Si tienen algún comentario o sugerencia, pueden incluirla abajo en la sección de comentarios.


SUSCRÍBETE SIN COSTO ALGUNO A NUESTRO BOLETÍN

Escribe tú correo electrónico:

Recibe contenido de este sitio sin costo alguno en tu e-mail. Solamente enviaremos los últimos artículos de Internetrcc, sin ningún tipo de spam

Acelera tu sitio

Leave a Reply