A la hora de personalizar el formulario que aparece al final de cada publicación, a fin de adaptarlo al diseño de nuestro theme, habrá que echar mano de los filters. En esta publicación intentaremos mostrar el código necesario para conseguir nuestro objetivo.

Una cosa habrá que tener en cuenta antes de comenzar. En la sección de comentarios, wordpress distinguirá entre el área de texto en el que escribimos nuestro mensaje y los campos en los que introducimos nuestros datos personales como dos cuestiones independientes. A la hora de customizar el formulario, habrá que desactivar el área de texto que proporciona wordpress y crear el nuestro propìo. todo esto lo veremos a continuación en código PHP.

Dependiendo de la plantilla que estemos utilizando, el código en el que tendremos nuestro formulario estará en un fichero o otro. El código PHP y HTML/CSS que necesitemos lo tendremos que escribir allí. No obstante, lo fundamental se encontrará en el fichero functions.php. Tendremos que crear dos funciones: la primera se encargará de insertar el nuevo formulario en nuestro theme. La segunda función tendrá como finalidad eliminar el área de texto de comentarios que tenemos por defecto en nuestra plantilla. Vamos a ver el código que necesitaremos:

function formulario_personalizado ( $fields ) {

	$html_req = null;
	$html5=null;

	$commenter = wp_get_current_commenter();
	$user = wp_get_current_user ();
	$user_identity = $user->exists() ? $user->display_name() : '';
	$req = get_option ('require name email');
	$aria_req = ($req ? " aria required='true'" : '' );

	$fields = [

	'author' => '<p class="comment-form-author"' . '<label for="author">' . ( $req ? '<span class="required">*</span>' : '' ) . '</label>' . '<input id="autor" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size=30 maxlenght=245"' . $aria_req . $html_req . ' placeholder=author /></p>',


        'email'	=> '<p class="comment-form-email"' . '<label for="email">' . ( $req ? '<span class="required">*</span>' : '' ) . '</label>' . '<input id="email" name="email" ' . ( $html5 ? 'type="email"' : 'type="text"' ) . ' value="' . esc_attr( $commenter['comment_author_email'] ) . '" size=30 maxlenght=100"' . $aria_req . $html_req . ' placeholder=email /></p>',


	'url' => '<p class="comment-form-url"' . '<label for="url">' . ( $req ? '<span class="required">*</span>' : '' ) . '</label>' . '<input id="url" name="url" ' . ( $html5 ? 'type="url"' : 'type="text"' ) . ' value="' . 	esc_attr( $commenter['comment_author_url'] ) . '" size=30 maxlenght=200"' . $aria_req . $html_req . ' placeholder=url /></p>',


	'comment-field'	=> '<p class="comment-form-coment"><label for="comment">' . '</label> <textarea id="comment" name="comment" cols="45" rows="8" maxlenght="65525" aria-required="true" required="required"></textarea></p>'

	];

	return $fields;

 }

 add_filter ( 'comment_form_default_fields', 'formulario_personalizado' );

Esta primera función es un poco compleja e incluye tanto código PHP como HTML. Simplemente en un formulario personalizado con tres campos que almacenarán en este orden el nombre, el correo electrónico y la url del visitante que desea dejar su comentario. Al final está la nueva área de texto en la que escribiremos nuestra opinión de la publicación.

Como puedes apreciar ahora el hook es un filter no una action, puesto que lo que pretendemos en modificar un recurso que wordpress tiene por defecto.

Veamos la segunda función:

function eliminar_comment_form ( $defaults ) {
	 if (isset( $defaults['comment_field'] )) {
		 $defaults['comment_field'] = '';
	 }

	 return $defaults;
 }

 add_filter ( 'comment_form_default', 'eliminar_comment_form' );

Esta función es considerable mucho más sencilla que la anterior. Puesto que wordpress trata a los datos de usuario y el comentario como dos partes separadas, para que no se nos repita el área de texto, tendremos que ocultar la que wordpress nos da por defecto. Y este es el objetivo de este fragmento de código.

Dejo la sección de comentarios abierta por si alguno de mis lectores quiere aportar una visión diferente o dejar sus opiniones y comentarios.

Dejar respuesta

Please enter your comment!
Please enter your name here