Personalizar los comentarios en WordPress - Funcionalidad y apariencia

En WordPress existen distintos tipos de contenido como entradas, páginas, comentarios, etc. Estos forman lo básico de WordPress. WordPress es una plataforma altamente personalizable que te permite personalizar los tipos más básicos en gran medida para que se adapte a tu sitio. Uno puede cambiar el aspecto así como la funcionalidad de los tipos básicos para que se comporten y tengan el aspecto de la apariencia y funcionalidad de tu sitio. En este artículo vamos a ver cómo podemos cambiar el comportamiento y la apariencia de los comentarios en nuestro sitio WordPress.

Paso 1 Entender la función comment_form

Echemos un vistazo a la función de WordPress comment_form. Esta es la responsable de mostrar el formulario de los comentarios que se muestra principalmente en las páginas o entradas individuales de WordPress. Una llamada a esta función se verá principalmente en el archivo comments.php de la carpeta de tu tema. Después este archivo será incluido en distintos lugares como en single.php, page.php, etc. Directamente o invocando la función comments_template.

Puedes encontrar más detalles sobre comments_template en el Códice de WordPress

Si usamos la función comment_form para mostrar el formulario, el formulario se mostrará usando los parámetros predeterminados los cuales serán campos como nombre, email (ambos son obligatorios), sitio web y el contenido del comentario. En el tema estándar Twenty Eleven el formulario tendrá el siguiente aspecto.

Algunos de los argumentos más importantes de la función comment_form son:

• fields – Mediante el cual puedes controlar realmente qué campos se mostrarán en el formulario del comentario.
• comment_notes_before y comment_notes_after – Estos se usan para mostrar alguna nota antes o después del formulario del comentario.
• title_reply – Usando esto puedes cambiar el título de la respuesta la cual por defecto es “Deja una respuesta”.
• label_submit – Esto se puede usar para cambiar el texto del botón de envío del comentario.

Paso 2 Personalizar tu formulario de comentario usando la función comment_form

Personalicemos ahora nuestro formulario de comentario pasando distintos argumentos a comment_form.

En el caso de que queramos personalizar los campos del formulario del comentario podemos pasar los campos a la función comment_form. Los campos predeterminados en la función comment_form son los siguientes:

1

$fields =  array(

2

	'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .

3

		'<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',

4

	'email'  => '<p class="comment-form-email"><label for="email">' . __( 'Email' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .

5

		'<input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>',

6

	'url'    => '<p class="comment-form-url"><label for="url">' . __( 'Website' ) . '</label>' .

7

		'<input id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" /></p>',

8

);

Así que en caso de que queramos eliminar el campo del sitio web tenemos que crear los campos sin el campo del sitio web de la siguiente forma y pasarlo a comment_form.

1

$commenter = wp_get_current_commenter();

2

$req = get_option( 'require_name_email' );

3

$aria_req = ( $req ? " aria-required='true'" : '' );

4

$fields =  array(

5

	'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .

6

		'<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',

7

	'email'  => '<p class="comment-form-email"><label for="email">' . __( 'Email' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .

8

		'<input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>',

9

);

10

11

$comments_args = array(

12

	'fields' =>	$fields

13

);

14

15

comment_form($comments_args);

Ahora si vamos y vemos el formulario del comentario aparecerá de la siguiente forma:

Además de esto, cambiemos ahora el título de la respuesta a “Por favor proporciónanos un comentario de valor” y también cambiaremos el título del botón del comentario de la entrada a “Enviar mi comentario”.

A continuación están los argumentos que pasaremos a comment_form para conseguir esto:

1

$commenter = wp_get_current_commenter();

2

$req = get_option( 'require_name_email' );

3

$aria_req = ( $req ? " aria-required='true'" : '' );

4

$fields =  array(

5

	'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .

6

		'<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',

7

	'email'  => '<p class="comment-form-email"><label for="email">' . __( 'Email' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .

8

		'<input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>',

9

);

10

11

$comments_args = array(

12

	'fields' =>	$fields,

13

	'title_reply'=>'Please give us your valuable comment',

14

	'label_submit' => 'Send My Comment'

15

);

16

17

comment_form($comments_args);

Ahora si miramos el formulario del comentario, este tendrá el siguiente aspecto:

Paso 3 Eliminar campos del comentario para usar ganchos

El formulario de comentario de WordPress puede también personalizarse usando ganchos y filtros. Personalizarlo usando ganchos/filtros es muy útil, especialmente cuando lo estás personalizando a través de un plugin y no puedes modificar los archivos del tema.  El filtro para añadir o eliminar campos del formulario de comentarios es 'comment_form_default_fields'

Eliminemos ahora el campo de la URL usando este filtro. El código para hacer esto lo puedes poner o bien en el archivo de tu plugin si lo estás personalizando a través del plugin o en el archivo functions.php de tu tema.

El código es el siguiente:

1

function remove_comment_fields($fields) {

2

	unset($fields['url']);

3

	return $fields;

4

}

5

add_filter('comment_form_default_fields','remove_comment_fields');

En esto añadimos la función remove_comment_fields en el filtro 'comment_form_default_fields' y después desactivamos el campo de url para eliminar el campo del sitio web.

Paso 4 Añadir más datos a tus comentarios usando ganchos

Podemos incluso añadir campos al comentario usando el filtro 'comment_form_default_fields'. Añadamos ahora un campo para la edad del autor del comentario usando este filtro y después lo almacenamos como meta del comentario y lo mostramos en el comentario.

Podemos añadir un campo de la siguiente manera:

1

function add_comment_fields($fields) {

2

3

	$fields['age'] = '<p class="comment-form-age"><label for="age">' . __( 'Age' ) . '</label>' .

4

		'<input id="age" name="age" type="text" size="30" /></p>';

5

	return $fields;

6

7

}

8

add_filter('comment_form_default_fields','add_comment_fields');

Una vez hayamos añadido el campo, es posible que queramos aplicarle estilo en consonancia con nuestro tema. Como yo estoy usando el tema Twenty Eleven, le aplicaré estilo añadiendo #respond .comment-form-age label con las otras etiquetas de estilo como #respond .comment-form-url label etc. De la siguiente manera:

1

#respond .comment-form-author label,

2

#respond .comment-form-email label,

3

#respond .comment-form-url label,

4

#respond .comment-form-age label,

5

#respond .comment-form-comment label {

6

	background: #eee;

7

	-webkit-box-shadow: 1px 2px 2px rgba(204,204,204,0.8);

8

	-moz-box-shadow: 1px 2px 2px rgba(204,204,204,0.8);

9

	box-shadow: 1px 2px 2px rgba(204,204,204,0.8);

10

	color: #555;

11

	display: inline-block;

12

	font-size: 13px;

13

	left: 4px;

14

	min-width: 60px;

15

	padding: 4px 10px;

16

	position: relative;

17

	top: 40px;

18

	z-index: 1;

19

}

Ahora, si vemos el campo de la edad en el formulario del comentario, tendrá el siguiente aspecto:

Ahora que la edad se almacena como meta del comentario, necesitamos engancharla a 'comment_post' y guardar la edad como meta del comentario de la siguiente manera:

1

function add_comment_meta_values($comment_id) {

2

3

	if(isset($_POST['age'])) {

4

		$age = wp_filter_nohtml_kses($_POST['age']);

5

		add_comment_meta($comment_id, 'age', $age, false);

6

	}

7

8

}

9

add_action ('comment_post', 'add_comment_meta_values', 1);

Una vez la meta esté guardada, podrá mostrarse en el comentario de la siguiente forma:

1

<?php echo "Comment authors age: ".get_comment_meta( $comment->comment_ID, 'age', true ); ?>

Paso 5 Personalizar los comentarios para algunos tipos de entrada concretos

En ocasiones puede resultar útil disponer de algunos campos de comentario solo en algunos tipos de entrada específicos. Hagamos ahora cambios en el código para mostrar el campo de la edad solo si es un tipo de entrada, como digamos, libro.

El código para tener la edad solo en el tipo de entrada libros es el siguiente:

1

function add_comment_fields($fields) {

2

3

	if( is_singular( 'books' ) ) {

4

5

		$fields['age'] = '<p class="comment-form-age"><label for="age">' . __( 'Age' ) . '</label>' .

6

			'<input id="age" name="age" type="text" size="30" /></p>';

7

	}

8

	return $fields;

9

10

}

11

add_filter('comment_form_default_fields','add_comment_fields');

Así que aquí añadimos el campo solo si es el tipo “Books” (libros).

Paso 6 Crear una devolución de llamada para mostrar los comentarios

La función wp_list_comments se usa para mostrar los comentarios en una entrada. Puedes leer sobre wp_list_comments en el Códice de WordPress.

wp_list_comments tiene un argumento 'callback' en el que puedes especificar la función que será invocada de vuelta para mostrar el comentario.

En el tema Twenty Eleven en comentarios.php verás una línea:

1

wp_list_comments( array( 'callback' => 'twentyeleven_comment' ) );

Cambiaremos esto a:

1

wp_list_comments( array( 'callback' => 'my_comments_callback' ) );

Así que la función my_comments_callback será llamada en cada entrada.

Paso 7 Aplicar estilo a tus comentarios

Ahora aplicaremos estilo a nuestra entrada de forma un poco distinta. Solo queremos mostrar el contenido de la entrada y el campo de la edad que hemos añadido concretamente. También cambiamos el color de fondo de los comentarios.

El código para la función 'my_comments_callback' es de la siguiente manera:

1

function my_comments_callback( $comment, $args, $depth ) {

2

	$GLOBALS['comment'] = $comment;

3

4

	?>

5

	<li <?php comment_class(); ?> id="li-comment-<?php comment_ID(); ?>">

6

		<article id="comment-<?php comment_ID(); ?>" class="comment">

7

8

			<div class="comment-content"><?php comment_text(); ?></div>

9

10

			<p><?php echo "Comment authors age: ".get_comment_meta( $comment->comment_ID, 'age', true ); ?></p>

11

12

			<div class="reply">

13

				<?php comment_reply_link( array_merge( $args, array( 'reply_text' => __( 'Reply <span>&darr;</span>', 'twentyeleven' ), 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>

14

			</div>

15

		</article>

16

	</li>

17

	<?php

18

}

También modificamos el fondo de la siguiente forma:

1

.commentlist > li.comment {

2

3

	background: #99ccff;

4

	border: 3px solid #ddd;

5

	-moz-border-radius: 3px;

6

	border-radius: 3px;

7

	margin: 0 0 1.625em;

8

	padding: 1.625em;

9

	position: relative;

10

}

Si ahora vemos los comentarios, tendrán el siguiente aspecto:

Conclusión

Los comentarios juegan un importante papel mientras uno construye un sitio comunitario. Dependiendo de la del sitio la funcionalidad de los comentarios también se puede personalizar adecuadamente. WordPress proporciona un sistema de comentarios flexible y proporciona un buen soporte a través de funciones que cambian el comportamiento y la apariencia de los comentarios de tu sitio. ¡Así que diviértete personalizando tu sitio WordPress!

Haznos saber en los comentarios a continuación si tienes cualquier otra sugerencia sobre como personalizar los comentarios en tu sitio WordPress.