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í:

<?php 
//Mostrar formulario de comentarios
comment_form(array(
	'title_reply' => __('¿Y tú qué opinas?', 'apk'), //Cambiar título
	'label_submit' => __('Publicar opinión', 'apk'), //Cambiar texto de botón
	'comment_field' => '<textarea id="comment" name="comment" cols="45" rows="8" aria-required="true" placeholder="' . __('Escribe tu opinión...', 'apk') . '"></textarea>', //Borrar párrafo y label del textarea
	'comment_notes_before' => '', //Borrar las notas antes del formulario
	'comment_notes_after' => '<p class="comment-notes">' . __( 'Por si acaso, tu email no se mostrará ;)', 'apk' ) . '</p>' //Editar las notas después del formulario
));
?>

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:

//Modificar los campos Autor, Email y Sitio web del formulario de comentarios
function apk_modify_comment_fields( $fields ) {
	
	//Variables necesarias para que esto funcione
        $commenter = wp_get_current_commenter();
	$req = get_option( 'require_name_email' );
	$aria_req = ( $req ? " aria-required='true'" : '' );

	$fields =  array(

	  'author' =>
	    '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) .
	    '" size="30"' . $aria_req . ' placeholder="' . __('Tu nombre', 'apk') . '" />', //Editamos el campo autor
	
	  'email' =>
	    '<input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) .
	    '" size="30"' . $aria_req . ' placeholder="' . __('Tu email', 'apk') . '" />', //Editamos el campo email
	
	  'url' =>
	    '<input id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) .
	    '" size="30" placeholder="' . __('Tu sitio web', 'apk') . '"  />', //Editamos el campo sitio web
	); 
	
	return $fields;
	
}

add_filter('comment_form_default_fields', 'apk_modify_comment_fields');

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í:

// Cargar JavaScript condicional
function apk_js_conditional() {
?>
	
	<!--[if (gte IE 6)&(lte IE 9)]>
		<script  type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.placeholder.js"></script>
		
		<script type="text/javascript">
			jQuery('document').ready(function($){
				$('input, textarea').placeholder();
			});
		</script>
	<![endif]-->

<?php
}

add_action('wp_head', 'apk_js_conditional');

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