Tutoriales, Video, WordPress | 7 de enero de 2015

Personalizar formulario de comentarios de WordPress

Un desafío interesante que he encontrado en el rediseño de mi sitio es la necesidad de personalizar el formulario de comentarios de WordPress, así que quise compartir contigo la forma de poder realizar esto a modo de tutorial.

En el video está todo muy detallado, y a continuación tienes un resumen para que puedas copiar el código en caso de que lo necesites:

Cambios generales

Para hacer cambios generales en el formulario, lo que hay que hacer es modificar la función comment_form() que aparece en el archivo comments.php de tu tema.

Esta función habitualmente se usa con las opciones por defecto, pero lo que haremos será pasarle algunos parámetros para configurar su funcionamiento. En mi caso el código quedó así:

Cambios en los inputs

Para poder modificar la forma en que se comportan los inputs de nombre, email y sitio web, vamos a tener que hacer algo diferente, aunque bastante simple. Lo que haremos será crear una función en nuestro archivo functions.php y asociarlo al filtro comment_form_default_fields, tal como se muestra a continuación:

Soportando los placeholder

Los cambios que hicimos anteriormente eliminan por completo los labels de los campos del formulario y su funcionalidad es reemplazada por el atributo placeholder, que en la mayoría de los navegadores funciona perfectamente, sin embargo hay algunos (internet explorer 8 y 9) en donde no es soportado.

Para solucionar esto, usaremos un plugin jQuery que habilita esta funcionalidad en navegadores antiguos. Para incluirlo en el tema, lo pondremos dentro de la carpeta js y lo llamaremos desde nuestro archivo de funciones así:

Para que este plugin funcione, es necesario que jQuery se esté cargando previamente, así que asegúrate de que lo haga.

Recursos

Bien, eso es todo por ahora, espero que el tutorial te haya resultado de utilidad. Si tienes alguna duda o sugerencia solo deja un comentario.

PD: El código pegado acá puede lucir un poco diferente al del video, porque hice que el texto de los placeholders también fuera traducible, que es algo que olvidé hacer mientras grababa el video.

Un abrazo,
@FranciscoAMK

También te podría interesar:

Cómo dupliqué mi sueldo gracias a WordPress

Hay personas que trabajando con WordPress han generado ganancias verdaderamente interesantes. En este contexto podemos mencionar el éxito que han tenido en WooThemes quienes comenzaron siendo 3 personas vendiendo temas y al cabo de algunos años se han convertido en una empresa avaluada en varios millones de dólares, por otra parte podemos mencionar el éxito […]

Seguir leyendo...

Principios del diseño aplicados en 30 días de posters

En esta transmisión en directo hablaremos de los principios del diseño y cómo los apliqué al desafío de 30 días de posters 😉

Seguir leyendo...

Recién egresado y con cinco años de experiencia

Hay un tipo de ofertas laborales que hace enojar a muchas personas. No sé cómo será en otras industrias, pero he visto muchos diseñadores arder en furia al encontrar solicitudes que piden alguien joven pero con años de experiencia en el rubro. Es cierto que hay algo de ridículo en este tipo de solicitud, sin […]

Seguir leyendo...

Hay 8 opiniones

  1. Hola, te felicito por lo bien explicado que está. Buscando aprender cómo cambiar el form de comentarios terminé aprendiendo muchas otros detalles que desconocía. Realmente muy bien hecho todo.

    Tengo una duda que explico a continuación. En mi sitio las personas no comprenden que el campo “sitio web” es opcional, aunque se los aclare previamente. La mayoría lo completa con cualquier palabra, mi duda es: ¿puedo eliminar ese campo directamente?, ¿cómo lo haría de forma simple?.

    Muchas gracias por tu ayuda desde ya, saludos.

    Mariano.

  2. ¡Hola!:
    La verdad es que el tutorial me ha ayudado mucho, pero hay una parte en la que me he bloqueado. Me refiero a cuando hablas del archivo less. Seguro que es algo fácil, pero soy bastante inexperta. Se que se refiere a CSS; pero no sé dónde debería incorporar esos cambios ni dónde subirlos. He buscado información en internet; sin embargo, no acabo de comprenderlo.
    Perdona por las molestias y ¡muchas gracias de antemano!
    Un saludo.

  3. Hola, me ha servido mucho tu artículo, pero no logro solucionar el siguiente problema. Quiero cambiar el “Hay % comentarios” por “Hay % opiniones” pero desde el archivo functions.php, ¿cómo puedo lograr esto?, ¿es posible?. Saludos, desde ya muchas gracias.

  4. hola. gracias por la info, ya logre hacerlo. Por otro lado si pudieras ayudarme con que quisiera activar el cajon de comentarios para mi portafolio. De la manera que vas a opciones de pantalla, en esa opción no figura, como si lo hace en el post o paginas. porfa te lo agradeceria mucho

Y tú ¿Qué opinas?

Puede que no te responda, pero ten por seguro que leeré tu comentario. Por si acaso, tu email no se mostrará ;)

Recibe más artículos como este cada semana

Únete a los 10.903 suscriptores y recibe cada miércoles nuevo contenido sobre diseño, sitios web y creatividad.

¡Ya estamos casi! revisa tu bandeja de entrada para verificar tu email por favor.
Uy! Parece que algo salió mal procesando tu solicitud. Recaraga la página e inténtalo de nuevo.

Ya me suscribí antes, no me muestres esto.