Modificar el formulario de comentarios en WordPress

[ 24 octubre 2017 ] [ Autor: Jhon Marreros Guzmán ][ Core - Avanzado] [ ]

mejoras

La mayoría de themes no cambian la forma en que se muestra el formulario de comentarios de WordPress, en este artículo aprenderás cómo realizar modificaciones al formulario de comentarios de WordPress y darle un diseño más atractivo.

1- Generalidades

En un artículo anterior habíamos visto cómo eliminar el campo de URL del formulario de comentarios, sin embargo en este artículo vamos a profundizar y hacer modificaciones adicionales.

Vamos a usar el theme Twenty Seventeen, la apariencia del formulario de comentarios por defecto y cómo quedará al final se puede ver en la siguiente imagen:

2- Realizando las modificaciones en código

La función que crea el formulario de registro es la función comment_form(), esta función acepta como uno de sus argumentos un array con los nombres de los diferentes campos, es una manera de hacer las modificaciones, sin embargo en este artículo veremos como hacer las modificaciones a través de filtros.

2.1 Filtro para cambiar la estructura de los campos

Usaremos el filtro comment_form_defaults, nos basaremos en la estructura por defecto y haremos modificaciones en base a esta estructura.

add_filter( 'comment_form_defaults', 'dcms_modify_fields_form' );

function dcms_modify_fields_form( $args ){

	$commenter = wp_get_current_commenter();
	$req = get_option( 'require_name_email' );
	$aria_req = ( $req ? " aria-required='true'" : '' );

	$author = '<input placeholder="'.__( 'Name' ) . ( $req ? ' *' : '' ).'" id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) .'" size="30"' . $aria_req . ' />';
	$email = '<div class="fields-wrap"><input placeholder="'.__( 'Email' ) . ( $req ? ' *' : '' ).'" id="email" name="email" type="text" value="' . esc_attr( $commenter['comment_author_email'] ) .'" size="30"' . $aria_req . ' />';
	$url = '<input placeholder="'.__( 'Website' ).'" id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) .'" size="30" /></div>';
	$comment = '<textarea placeholder="'. _x( 'Comment', 'noun' ).'" id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea>';

	$args['fields']['author'] = $author;
	$args['fields']['email'] = $email;
	$args['fields']['url'] = $url;
	$args['comment_field'] = $comment;

	return $args;

}

Las modificaciones hechas en el código anterior fueron:

• Eliminar los labels, ya que los textos irán como placeholder
• Colocar placeholders con el nombre del label eliminado
• El asterisco que indica requerido será parte del placeholder
• Envolver el campo de email y url para que vayan en un mismo contenedor.

2.2 Filtro para cambiar el orden de los campos

El filtro anterior no nos permite cambiar el orden sólo podemos cambiar el HTML de los campos, para cambiar el orden y hacer que los campos de nombre, correo y url se muestren antes del campo de comentario entonces usaremos el filtro comment_form_fields

add_filter( 'comment_form_fields', 'dcms_modify_order_fields' );

function dcms_modify_order_fields( $fields ){
	$val = $fields['comment'];
	unset($fields['comment']);

	$fields += array('comment' => $val );

	return $fields;
}

Las modificaciones hechas en el código anterior básicamente implica cambiar de posición el elemento del array asociativo con id ‘comment’, de manera que los campos de nombre, correo y web se muestren antes.

4- CSS para mejorar el diseño

Finalmente usaremos código CSS para darle un diseño más atractivo en base a la estructura anterior, dar márgenes y para que los campos de email y url se muestren en la misma línea.

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

@media (min-width:678px){
	#commentform #email{
		width:49%;
		float:left;
	}
	#commentform #url{
		width:48%;
		float:right;	
	}

	#commentform .fields-wrap:after{
		content:"";
		display: block;
		clear:both;
	}	
}

¿Aún con dudas?, en el siguiente video se detalla cada uno de los puntos anteriores.

Valora este artículo : (3 votos, promedio: 4,67 de 5)

Cargando…