El valor de los contenidos en internet se potencia con las opiniones e interacción alrededor de ellos. Así podemos distinguir algunos actores en este caso:
Publican:
- Administradores
- Editores
- Autores
- Colaboradores
Leen:
- Subscriptores
- Visitantes
La funcionalidad de comentarios anidados permite la interacción entre todos estos actores. En la siguiente imagen se muestra como se ha producido el diálogo en el contexto de un post acerca de un programa radial. El locutor y los oyentes interactúan a través de sus comentarios, se saludan, expresan sus opiniones, etc.
Para lograr esto el WordPress nos proporciona todo lo necesario.
1. Activar y configurar la funcionalidad de comentarios anidados
Esto se realiza desde el menú Opciones del Tablero de administración. Allí, en la sección Discusión encontramos Otras opciones de comentarios.
[X|_] Activar los comentarios anidados hasta [n] niveles
[X|_] Dividir los comentarios en páginas con [n] comentarios por página y mostrar la [última|primera]página por omisión
2. Utilizar un tema que soporte esta funcionalidad o modificar el que estemos utilizando.
Podemos partir reemplazando el archivo comments.php por el que nos provea WordPress en su versión más reciente.
/**
* @package WordPress
* @subpackage Default_Theme
*/
// Do not delete these lines
if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
die ('Please do not load this page directly. Thanks!');
if ( post_password_required() ) { ?>
<p class="nocomments">This post is password protected. Enter the password to view comments.</p>
<?php
return;
}
?>
<!-- You can start editing here. -->
<?php if ( have_comments() ) : ?>
<h3 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?> to “<?php the_title(); ?>”</h3>
<div class="navigation">
<div class="alignleft"><?php previous_comments_link() ?></div>
<div class="alignright"><?php next_comments_link() ?></div>
</div>
<ol class="commentlist">
<?php wp_list_comments(); ?>
</ol>
<div class="navigation">
<div class="alignleft"><?php previous_comments_link() ?></div>
<div class="alignright"><?php next_comments_link() ?></div>
</div>
<?php else : // this is displayed if there are no comments so far ?>
<?php if ( comments_open() ) : ?>
<!-- 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; ?>
<?php if ( comments_open() ) : ?>
<div id="respond">
<h3><?php comment_form_title( 'Leave a Reply', 'Leave a Reply to %s' ); ?></h3>
<div class="cancel-comment-reply">
<small><?php cancel_comment_reply_link(); ?></small>
</div>
<?php if ( get_option('comment_registration') && !is_user_logged_in() ) : ?>
<p>You must be <a href="<?php echo wp_login_url( get_permalink() ); ?>">logged in</a> to post a comment.</p>
<?php else : ?>
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
<?php if ( is_user_logged_in() ) : ?>
<p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="Log out of this account">Log out »</a></p>
<?php else : ?>
<p><input type="text" name="author" id="author" value="<?php echo esc_attr($comment_author); ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> />
<label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label></p>
<p><input type="text" name="email" id="email" value="<?php echo esc_attr($comment_author_email); ?>" size="22" tabindex="2" <?php if ($req) echo "aria-required='true'"; ?> />
<label for="email"><small>Mail (will not be published) <?php if ($req) echo "(required)"; ?></small></label></p>
<p><input type="text" name="url" id="url" value="<?php echo esc_attr($comment_author_url); ?>" size="22" tabindex="3" />
<label for="url"><small>Website</small></label></p>
<?php endif; ?>
<!--<p><small><strong>XHTML:</strong> You can use these tags: <code><?php echo allowed_tags(); ?></code></small></p>-->
<p><textarea name="comment" id="comment" cols="58" rows="10" tabindex="4"></textarea></p>
<p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />
<?php comment_id_fields(); ?>
</p>
<?php do_action('comment_form', $post->ID); ?>
</form>
<?php endif; // If registration required and not logged in ?>
</div>
<?php endif; // if you delete this the sky will fall on your head ?>
Debemos identificar que la función wp_list_comments() es la que se encarga de procesar los comentarios.
Podríamos requerir pasarle a esta función el parámetro callback que nos permite emplear una plantilla que se utilizaría para mostrar los comentarios. Esto se realiza de la siguiente manera:
wp_list_comments('callback=PLANTILLA_PARA_COMENTARIOS');
3. Estilo
Podemos empezar con este estilo base
ol.commentlist {}
ol.commentlist li {}
ol.commentlist li.alt {}
ol.commentlist li.bypostauthor {}
ol.commentlist li.byuser {}
ol.commentlist li.comment-author-admin {}
ol.commentlist li.comment {}
ol.commentlist li.comment div.comment-author {}
ol.commentlist li.comment div.vcard {}
ol.commentlist li.comment div.vcard cite.fn {}
ol.commentlist li.comment div.vcard cite.fn a.url {}
ol.commentlist li.comment div.vcard img.avatar {}
ol.commentlist li.comment div.vcard img.avatar-32 {}
ol.commentlist li.comment div.vcard img.photo {}
ol.commentlist li.comment div.vcard span.says {}
ol.commentlist li.comment div.commentmetadata {}
ol.commentlist li.comment div.comment-meta {}
ol.commentlist li.comment div.comment-meta a {}
ol.commentlist li.comment * {} - (p, em, strong, blockquote, ul, ol, etc.)
ol.commentlist li.comment div.reply {}
ol.commentlist li.comment div.reply a {}
ol.commentlist li.comment ul.children {}
ol.commentlist li.comment ul.children li {}
ol.commentlist li.comment ul.children li.alt {}
ol.commentlist li.comment ul.children li.bypostauthor {}
ol.commentlist li.comment ul.children li.byuser {}
ol.commentlist li.comment ul.children li.comment {}
ol.commentlist li.comment ul.children li.comment-author-admin {}
ol.commentlist li.comment ul.children li.depth-2 {}
ol.commentlist li.comment ul.children li.depth-3 {}
ol.commentlist li.comment ul.children li.depth-4 {}
ol.commentlist li.comment ul.children li.depth-5 {}
ol.commentlist li.comment ul.children li.odd {}
ol.commentlist li.even {}
ol.commentlist li.odd {}
ol.commentlist li.parent {}
ol.commentlist li.pingback {}
ol.commentlist li.pingback div.comment-author {}
ol.commentlist li.pingback div.vcard {}
ol.commentlist li.pingback div.vcard cite.fn {}
ol.commentlist li.pingback div.vcard cite.fn a.url {}
ol.commentlist li.pingback div.vcard span.says {}
ol.commentlist li.pingback div.commentmetadata {}
ol.commentlist li.pingback div.comment-meta {}
ol.commentlist li.pingback div.comment-meta a {}
ol.commentlist li.pingback * {} - (p, em, strong, blockquote, ul, ol, etc.)
ol.commentlist li.pingback div.reply {}
ol.commentlist li.pingback div.reply a {}
ol.commentlist li.pingback ul.children {}
ol.commentlist li.pingback ul.children li {}
ol.commentlist li.pingback ul.children li.alt {}
ol.commentlist li.pingback ul.children li.bypostauthor {}
ol.commentlist li.pingback ul.children li.byuser {}
ol.commentlist li.pingback ul.children li.comment {}
ol.commentlist li.pingback ul.children li.comment-author-admin {}
ol.commentlist li.pingback ul.children li.depth-2 {}
ol.commentlist li.pingback ul.children li.depth-3 {}
ol.commentlist li.pingback ul.children li.depth-4 {}
ol.commentlist li.pingback ul.children li.depth-5 {}
ol.commentlist li.pingback ul.children li.odd {}
ol.commentlist li.thread-alt {}
ol.commentlist li.thread-even {}
ol.commentlist li.thread-odd {}
Fuentes:
[EN] Stylizing Threaded/Nested Comments in Wordpress 2.7
[ES] Estilos CSS para los nuevos comentarios de Wordpress 2.7
4. Establecer un ágil formulario de respuesta
Con una sóla línea le incorporaremos a nuestra funcionalidad de responder comentarios una apariencia más ágil y dinámica.
Para ello añadimos en el (suele encontrarse en el archivo header.php de nuestro tema) lo siguiente:
if ( is_singular() ) wp_enqueue_script( 'comment-reply' );
5. Paginación: Navegación por páginas a través de los comentarios
El siguiente código no es tan práctico para cuando los comentarios son muchos:
<div class="navigation">
<div class="alignleft"><?php previous_comments_link() ?></div>
<div class="alignright"><?php next_comments_link() ?></div>
</div>
Este otro nos muestra los números de páginas para poder navegar a través de las muchas páginas de comentarios que podríamos tener:
<div class="navigation">
<?php paginate_comments_links( $args ) ?>
</div>
6. Pingbacks y Trackbacks: ¿Quiénes hacen enlazan y/o hacen referencia a tus artículos?
Podríamos tener una plantilla. Para utilizar la que WordPress proporciona por defecto podemos omitir el parámetro callback.
wp_list_comments('type=pingback&callback=PLANTILLA_PARA_PINGBACKS');
wp_list_comments('type=trackback&callback=PLANTILLA_PARA_TRACKBACKS');
La combinación de estos elementos es el tipo pings
wp_list_comments('type=pings&callback=PLANTILLA_PARA_PINGS');
Enlaces
Documentación Oficial del Codex de WordPress
[EN] Migrating Plugins and Themes to 2.7/Enhanced Comment Display
Otras referencias
[ES] Comentarios anidados con WordPress 2.7 (cita buenas referencias)
[EN] WordPress 2.7 Comments Enhancements
[ES] Adapta los comentarios de tu theme a Wordpress 2.7
[ES] Adapta tus comentarios a Wordpress 2.7 sin problemas
