Bueno, me he alargado y lo he dejado mucho tiempo, pero más vale tarde que nunca. Entre turrones y garrapiñadas he pensado que sería interesante hacer digestión haciendo algo constructivo, así que vamos al lio.
Introducción
Como es dificil hacer un artículo que abarque a todos los themes disponibles vamos a usar Kubrick para ilustrar con ejemplos este tutorial. Al ser el theme por defecto de Wordpress todos disponemos de él para poder hacer las pruebas mientras seguimos el tutorial.
Para los menos experimentados, el Theme Kubrick es el que nos encontraremos en la carpeta wp-content/themes/default/, concretamente vamos a editar el fichero comments.php de este directorio.
Detectar Wordpress 2.7
Si estamos desarrollando un theme para Wordpress 2.7, este punto puede ser interesante, pero si por el contrario estás haciendo un theme para tu blog, el que ya está en Wordpress 2.7, puedes ahorrarte hacer la comprobación ya que siempre se va a cumplir.
if (function_exists('wp_list_comments')) :
// Wordpress 2.7
else :
// Wordpress 2.6-
endif;
Veamos como quedaría en el theme Kubrick.
<?php if ($comments) : ?>
<h3 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?> to “<?php the_title(); ?>”</h3>
<ol class="commentlist">
<?php if (function_exists('wp_list_comments')) : ?>
<!-- Wordpress 2.7 -->
<?php else : ?>
<?php foreach ($comments as $comment) : ?>
<li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">
<?php echo get_avatar( $comment, 32 ); ?>
<cite><?php comment_author_link() ?></cite> Says:
<?php if ($comment->comment_approved == '0') : ?>
<em>Your comment is awaiting moderation.</em>
<?php endif; ?>
<br />
<small class="commentmetadata"><a href="#comment-<?php comment_ID() ?>" title=""><?php comment_date('F jS, Y') ?> at <?php comment_time() ?></a> <?php edit_comment_link('edit',' ',''); ?></small>
<?php comment_text() ?>
</li>
<?php
/* Changes every other comment to a different class */
$oddcomment = ( empty( $oddcomment ) ) ? 'class="alt" ' : '';
?>
<?php endforeach; /* end for each comment */ ?>
<!-- Wordpress 2.6- -->
<?php endif;?>
</ol>
<?php else : // this is displayed if there are no comments so far ?>
<?php if ('open' == $post->comment_status) : ?>
<!-- If comments are open, but there are no comments. -->
<?php else : // comments are closed ?>
<!-- If comments are closed. -->
<p class="nocomments">Comments are closed.</p>
<?php endif; ?>
<?php endif; ?>
Como podemos ver, ya tenemos el sistema medio montado. Ahora si el Wordpress en el que está corriendo nuestro theme no tiene Wordpress 2.7 nos mostrará los comentarios como los estaba haciendo hasta ahora, en caso contrario y con Wordpress 2.7 disponible no mostraremos nada, por el momento.
wp_list_comments()
La clave de todo es esta función que se encarga de mostrarnos los comentarios de nuestros posts de una forma sencilla y rápida. Como la mayoría de funciones de Wordpress esta tiene una serie de parámetros para personalizar su salida.
- walker, nos activa/desactiva los comentarios anidados (Por defecto Null)
- max_depth, máxima profundidad de estos comentarios (Por defecto ”)
- style, estilo con el que Wordpress nos permite mostrar los comentarios [ul, div] (Por defecto ul)
- callback, función que nos permite personalizar completamente la salida de los comentarios, se lanzará en cada uno de los comentarios.
- end-callback, función que se lanzará al terminar la iteración de los comentarios.
- type, especifica el tipo de comentarios a mostrar [comment, pingback, all] (Por defecto all)
- page, página en la que empezamos a mostrar los comentarios.
- per_page, comentarios por página
- avatar_size, tamaño del avatar de los usuarios que comentan (Por defecto 32)
- reverse_top_level, nos muestra los comentarios en orden inverso al que se introdujeron (Por defecto Null)
- reverse_children, orden inverso en los hijos de los comentarios anidados (Por defecto ”)
Bueno, ahora que conocemos las opciones disponibles en wp_list_comments() incorporémoslo en el código anterior.
<?php if ($comments) : ?>
<h3 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?> to “<?php the_title(); ?>”</h3>
<ol class="commentlist">
<?php if (function_exists('wp_list_comments')) : ?>
<!-- Wordpress 2.7 -->
<?php wp_list_comments(); ?>
<?php else : ?>
<?php foreach ($comments as $comment) : ?>
<li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">
<?php echo get_avatar( $comment, 32 ); ?>
<cite><?php comment_author_link() ?></cite> Says:
<?php if ($comment->comment_approved == '0') : ?>
<em>Your comment is awaiting moderation.</em>
<?php endif; ?>
<br />
<small class="commentmetadata"><a href="#comment-<?php comment_ID() ?>" title=""><?php comment_date('F jS, Y') ?> at <?php comment_time() ?></a> <?php edit_comment_link('edit',' ',''); ?></small>
<?php comment_text() ?>
</li>
<?php
/* Changes every other comment to a different class */
$oddcomment = ( empty( $oddcomment ) ) ? 'class="alt" ' : '';
?>
<?php endforeach; /* end for each comment */ ?>
<!-- Wordpress 2.6- -->
<?php endif;?>
</ol>
<?php else : // this is displayed if there are no comments so far ?>
<?php if ('open' == $post->comment_status) : ?>
<!-- If comments are open, but there are no comments. -->
<?php else : // comments are closed ?>
<!-- If comments are closed. -->
<p class="nocomments">Comments are closed.</p>
<?php endif; ?>
<?php endif; ?>
De esta forma estaremos obteniendo los comentario con los parámetros por defecto, pero ¿que pasa si queremos adaptar a nuestro gusto los comentarios?
Parámetro callback
El parámetro callback representa el nombre de una función que será lanzada en cada comentario y a la que se le pasará el comentario por parámetro para disponer de todas las opciones dentro de ella. De esta forma podemos personalizar nuestros comentarios.
<?php if (function_exists('wp_list_comments')) : ?>
<?php wp_list_comments('callback=MI_TEMPLATE_DE_COMENTARIOS'); ?>
<div class="navigation">
<div class="alignleft"><?php previous_comments_link() ?></div>
<div class="alignright"><?php next_comments_link() ?></div>
<?php else : ?>
<?php foreach ($comments as $comment) : ?>
<?php MI_TEMPLATE_DE_COMENTARIOS($comment);?>
<?php endforeach; ?>
<?php endif; ?>
Y la función MI_TEMPLATE_DE_COMENTARIOS() tendrá un aspecto similar a este:
<?php
function MI_TEMPLATE_DE_COMENTARIOS($comment, $args, $depth) {
// Comentario actual
$GLOBALS['comment'] = $comment; ?>
/*
comment_class() --> Nos permite hacer comentarios tipo zabra.
comment_ID() --> ID del comentario actual
*/
<li <?php comment_class(); ?> id="comment-<?php comment_ID() ?>">
<div id="div-comment-<?php comment_ID(); ?>
<div class="comment-author vcard">
/* Mostramos el avatar del usuario */
<?php echo get_avatar(); ?>
/* Enlace a la URL del autor del comentario */
<?php printf(__('<cite class="fn">%s</cite> <span class="says">says:</span>'), get_comment_author_link()) ?>
</div>
/* Controlamos que el comentario esté aprovado */
<?php if ($comment->comment_approved == '0') : ?>
<em><?php _e('Your comment is awaiting moderation.') ?></em>
<br />
<?php endif; ?>
/* Datos extra de los comentarios */
<div class="comment-meta commentmetadata"><a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ) ?>"><?php printf(__('%1$s at %2$s'), get_comment_date(), get_comment_time()) ?></a><?php edit_comment_link(__('(Edit)'),' ','') ?></div>
/* Texto del comentario */
<?php comment_text() ?>
/*Botón de reply, con él podremos responder a un comentario.*/
<div class="reply">
<?php comment_reply_link(array_merge( $args, array('add_below' => 'div-comment', 'depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
</div>
</div>
</li>
<?php } ?>
Exactamente lo que hará Wordpress, será hacer pasar la variable $comment por esta función en cada comentario, haciendo que esta sea la encargada de pintar la salida por pantalla.
Responder comentarios
La posibilidad de responder a comentarios sin tener que montarlo tu mismo, es un aliciente más que Wordpress 2.7 nos ofrece, pero para entender como funciona debemos conocer comment_reply_link().
comment_reply_link();
Se trata de generar el enlace necesario para poder responder a un comentario, en el código anterior, vemos como lo insertamos despues de comment_text(). Por defecto esta función recibe 3 parámetros:
$args, argumentos que condicionarán la salida$comment, comentario que vamos a responder$post, post en el que se encuentra en comentario que hemos de responder.
Los argumentos disponibles que condicionarán la salida nos darán una cierta flexibilidad a la hora de generar el enlace:
- add_below, patrón al que se le añadirá el ID del comentario que indicará a que comentario hará referencia la respuesta (Por defecto comment-XXX)
- respond_id, lugar en el que se insertará el comentario recien comentado (Por defecto respond)
- reply_text, etiqueta que informará al usuario de la acción del enlace (Por defecto “Reply”)
- login_text, etiqueta que mostrará en caso de que el usuario no esté logueado y sea necesario (Por defecto “Log in to Reply”)
- depth, profundida del comentario, para comentarios anidados (Por defecto 0)
- before, HTML que se insertará delante del enlace
- after, HTML que se inseratá despues del enlace.
Esto nos generará el enlace necesario para responder a comentarios, pero aún nos queda adaptar el theme para poder recibir la respuesta.
La magia del javascript
La respuesta de comentarios necesitará de unas funciones de Javascript para hacer más dinámica la tarea de responder a los comentarios, para ello tendremos que añadir en el <head></head> de nuestro theme la siguiente línea:
if ( is_singular() ) wp_enqueue_script( 'comment-reply' );
Se encargará de cargar los Javascript necesarios para disfrutar de esta funcionalidad.
Modificando el formulario
Wordpress por si solo no puede detectar los nombres de los elementos de nuestros formularios y como necesitan ciertos campos que hasta ahora no existían nos obliga a añadir esta línea en nuestro formulario para generar los campos necesarios para la respuesta.
<?php comment_id_fields(); ?>
Si nuestro theme tiene un elemento <input /> llamado comment_post_ID, podemos borrarlo ya que esta función se encargará de generarlo automáticamente.
Para indicarle el lugar en el que se encuentran los elementos necesarios para responder, debemos insertar un enlace en forma de ancla en el formulario, simplemente nos servirá para llevar el foco al formulario de envio:
<a id="respond"></a>
Para terminar, tenemos la función comment_form_title(), que se encargará de cambiar el famoso texto de “Leave a comment” por un “Leave a reply for XXX” en caso de estar respondiendo un comentario, para ello deberemos reemplazar el texto:
<h3 id="respond">Leave a Reply</h3>
por este otro:
<h3><?php comment_form_title( 'Leave a Reply', 'Leave a Reply to %s' ); ?></h3>
Si el usuario decide cancelar la acción y desechar la respuesta al comentario debe tener un enlace que le permita hacer esto, por eso tendremos que añadirlo en nuestro formulario de comentarios con la siguiente función:
<div id="cancel-comment-reply">
<small><?php cancel_comment_reply_link() ?></small>
</div>
¿Y la paginación?
Otra de las mejoras que los comentarios nos traen en esta nueva versión, es la paginación de los mismos, haciendo que los posts con centenares de comentarios queden un poco más legibles. Para ello tenemos un serie de funciones que nos permiten dotar nuestros themes de esta funcionalidad. Evidentemente estas funciones será usadas únicamente en el apartado que destinamos a Wordpress 2.7 ya que estas funciones no están disponibles para versiones previas.
next_comments_link();
Nos enlaza con la siguiente página de comentarios dentro de nuestro post. Esta función recibe 2 parámetros:
- label, etiqueta que deseamos mostrar para informar al usuario del uso del enlace. (Por defecto “Newer Comments »”)
- max_pages, máximo de páginas mostradas para enlazar. (Por defecto 0)
previous_comments_link();
Nos enlaza con los comentarios anteriores, si los hubiera. Por defecto dispone de un único parámetro:
- label, etiqueta que deseamos mostrar (Por defecto “« Older Comments”)
