aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

El nuevo sistema de comentarios anidados de Wordpress 2.7 está dando mucho de que hablar por que es algo completamente nuevo y desde mi punto de vista bastante lioso y complejo. Por ese motivo los posts informativos sobre como adaptar tus themes/plugins a él no paran de aparecer exclareciendo poco a poco esta nueva funcionalidad.

Chriss Harrison ha aislado los estilos CSS que afectan a los comentarios default de nuestro Wordpress 2.7. Recordemos que gracias al parámetro callback podemos personalizar nuestros comentarios, pero si no lo pasamos Wordpress nos genera una estructura “default” que es con la que Chris ha trabajado.

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 {}

Estas 63 líneas hacen que cada elemento del sistema de comentarios pueda tener un aspecto personalizado. Para los desarrolladores de themes estas líneas pueden servirles como base para maquetar desde el CSS el theme para Wordpress 2.7.

Con el rediseño de aNieto2k se implementaron una serie de funcionalidades para hacer más fácil la vida al usuario y así mejorar la experiencia del usuario dentro de la página. Una de estas mejoras es el “Responder” de los comentario. Un sistema basado en Javascript que permite responder a comentarios directamente desde el propio comentario.

Como podemos ver, se basa en un botón (con una flecha circular) que al accionar nos muestra un <textarea /> y un <button /> para enviar el texto al formulario de envio de situado más abajo. Este sistema, personalmente me es muy práctico para contestar a muchos usuarios a la vez y para poder ver el comentario de otro usuario y así comentar por partes sin perder el hilo.

Montémoslo

Para explicaro como montarlo, he decidio usar como base Kubrick que como todos sabemos es el theme por defecto de Wordpress. Es un theme ideal para explicar todas estas cosas, después, dependiendo del theme que estés usando habrá que hacer varios cambios a la estructura JS, pero eso ya es otro tema

Requisitos?

He usado jQuery, por lo rápido que es desarrollar con él. Si alguien lo porta a otros frameworks que me pegue un toque.

1. Wordpress 2.6
2. Theme Kubrick
3. jQuery

¿Javascript?

Para evitar tener que tocar la estructura de nuestro theme y como esta funcionalidad va a necesitar mucho javascript para funcionar he pensado en montarlo todo usando javascript para así, los usuarios que no lo tengan habilitado no verán un enlace sin funcionalidad. Otra alternativa sería usar <noscript /> para mostrar el <textarea /> pero sería más laborioso y al final se consigue lo mismo.

El código

Os pongo el código necesario para conseguir esta funcionalidad sobre el Theme Kubrick.

$(document).ready(function(){
  // Recorremos los comentarios del listado <ol />
  $("ol.commentlist li").each(function(x, el){

	// Cogemos el ID del comentario
    var ID = $(el).attr("id");

	// Cogemos el nombre del autor del comentario
    var author = $(el).find("cite a").text();

	// Añadimos el enlace en la parte inferior del comentario.
    $(el).append('<a class="a-responder" href="#' + ID + '">Responder a ' + author + '</a>');

	// Le añadimos funcionalidad
    $(el).find(".a-responder").bind("click", function(){

		// Guardamos el elemento
        var link = $(this);

		// Añadimos el <textarea /> y el <button />
        $(link).after('<div class="div-responder"><textarea class="txtarea-responder"></textarea><button class="btn-responder">Insertar</button></div>');

		// Le añadimos funcionalidad al <button />
        $(el).find(".btn-responder").bind("click", function(){

			// Guardamos el texto anterior
            var oldText = $("textarea#comment").val() + "\n";

			// Preparamos el nuevo texto.
            var newText = '\n<a rel="reply-comment" href="#comment-'+ ID +'">' + author +"</a>: "+ $(this).prev().val();

			// Añadimos el nuevo texto
            $("textarea#comment").val(oldText + newText);

			// Eliminamos el <textarea /> y el <button />
            $(this).parent().remove();

			// Mostramos el enlace
            $(link).show();
        });

		// Ocultamos el enlace
        $(link).hide();

		// Paramos la ejecución del enlace
        return false;
    });
  });
});

Explicación

Como podemos ver, son muy pocas líneas y tienen una funcionalidad muy potente en sus tripas. Vamos a intentar destripar el código para explicar lo que nos ofrece cada línea.

// Recorremos los comentarios del listado <ol />
$("ol.commentlist li").each(function(x, el){

Primero hemos de recoger los comentario de la página, Kubrick para ello usa una estructura <ol /> para listar los comentarios así que mediante el uso de each() los iteramos aplicando a cada uno de ellos las siguiente líneas de código.

// Cogemos el ID del comentario
var ID = $(el).attr("id");

// Cogemos el nombre del autor del comentario
var author = $(el).find("cite a").text();

Al iterar un listado de elementos, jQuery nos permite interactuarlos como si estuvieramos en un elemento concreto cada vez. En este caso, recogemos el ID del comentario para almacenarlo y usarlo más adelante, al igual que nombre del autor que en este theme está bajo una etiqueta <cite />.

// Añadimos el enlace en la parte inferior del comentario.
$(el).append('<a class="a-responder" href="#' + ID + '">Responder a ' + author + '</a>');

Una vez guardados estos datos básicos podemos montar el enlace que desencadenará el proceso que nos muestre el <textarea />. Para ello usaremos append(), que nos permite introducir un HTML al final del elemento, en este caso $(el), que representa al item actual dentro de each().

// Le añadimos funcionalidad
$(el).find(".a-responder").bind("click", function(){

Una vez creado el enlace, debemos darle un funciondad, para ello, buscaremos el elemento <a class="a-responder" /> dentro del comentario actual y despues controlaremos el evento “click” del mismo.

// Añadimos el <textarea /> y el <button />
$(link).after('<div class="div-responder"><textarea class="txtarea-responder"></textarea><button class="btn-responder">Insertar</button></div>');

// Le añadimos funcionalidad al <button />
$(el).find(".btn-responder").bind("click", function(){

La funcionalidad de este botón es la de mostrar el <textarea /> y el <button /> además de añadirle la funcionalidad necesaria al <button /> para añadir el texto al formulario de envio de comentarios. Para ello volvemos a buscar el botón dentro del elemento actual y controlamos la funcionalidad del evento “click” del mismo.

// Le añadimos funcionalidad al <button />
$(el).find(".btn-responder").bind("click", function(){
	// Guardamos el texto anterior
        var oldText = $("textarea#comment").val() + "\n";
	// Preparamos el nuevo texto.
        var newText = '\n<a rel="reply-comment" href="#comment-'+ ID +'">' + author +"</a>: "+ $(this).prev().val();
	// Añadimos el nuevo texto
        $("textarea#comment").val(oldText + newText);
	// Eliminamos el <textarea /> y el <button />
        $(this).parent().remove();
	// Mostramos el enlace
       $(link).show();
});

El <button /> únicamente ha de copiar el contenido del <textarea /> al formulario de envio añadiendo el enlace necesario para poder seguir el comentario una vez posteado. Para ello guardaremos, inicialmente, el contenido del <textarea /> del formulario de envio y le añadiremos el nuevo texto. Una vez hecho esto, podemos elimiar el <textarea /> y el <button /> ya que no lo volveremos a usar, pero por si queremos añadir nuevos comentarios volveremos a mostrar el enlace que desencadena todo lo anterior.

¿Y como lo adapto a mi theme?

Esta es la tarea más laboriosa ya que cada theme es un mundo y está pensando y desarrollado de una forma diferente. He intentado dejar el código lo más claro posible para que la adaptación sea más sencilla. Realmente, requiere únicamente conocer dos elementos fundamentales de la estructura del theme para que funcione perfectamente.

1. El sistema en que muestra los comentarios, mediante <ul />, <ol />, <div />,…. y encontrar el patrón que se aplica a cada comentario.
2. El lugar en el que se encuentra el nombre del usuario que ha comentado, aunque es Opcional ya que podemos usar el ID del comentario para enlazar el próximo comentario.

Ver código

Puedes echarle un vistazo al código directamente aqui.
¿Que te animas a montarlo en tu blog? Cuentanos tu experiencia.

Hace unos días, vimos que Wordpress 2.7 integra un Loop para comentarios que simplifica la plantilla de comentarios una barbaridad. Esto puede parecer muy sencillo, pero a simple vista te preguntas: ¿Como separo los comentarios de los pingbacks/trackbacks?

if ( have_comments() ) : ?>
<h4 id="comments"><?php comments_number('No Comments', 'One Comment', '% Comments' );?></h4>
<ul class="commentlist">
	<?php wp_list_comments(); ?></ul>
<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 ('open' == $post->comment_status) :
		// If comments are open, but there are no comments.
	else : // comments are closed
	endif;
endif;

Matt de Sivel.net se lo ha preguntado y ha dado con una solución igual de sencilla que el uso del nuevo Loop.

<?php if ( have_comments() ) : ?>
	<?php if ( ! empty($comments_by_type['comment']) ) : ?>
	<h3 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?> to &#8220;<?php the_title(); ?>&#8221;</h3>

	<ol class="commentlist">
	<?php wp_list_comments('type=comment'); // COMENTARIOS ?> 
	</ol>
	<?php endif; ?>

	<?php if ( ! empty($comments_by_type['pings']) ) : ?>
	<h3 id="pings">Trackbacks/Pingbacks</h3>

	<ol class="commentlist">
	<?php wp_list_comments('type=pings');   // PINGBACKS Y TRACKBACKS ?>
	</ol>
	<?php endif; ?>

	<div class="navigation">
		<div class="alignleft"><?php previous_comments_link() ?></div>
		<div class="alignright"><?php next_comments_link() ?></div>
	</div>
 <?php else : // SI NO HAY COMENTARIOS ?>

	<?php if ('open' == $post->comment_status) : ?>
		<!-- COMENTARIOS ESTAN ABIERTOS, PERO ESTAN VACIOS -->

	<?php else : // SI LOS COMENTARIOS ESTAN CERRADOS ?>
		<!-- If comments are closed. -->
		<p class="nocomments">Comments are closed.</p>

	<?php endif; ?>
<?php endif; ?>

La magia

Como podemos ver el código es realmente sencillo, únicamente hemos de solicitar mediante un parámetro el tipo de comentarios que queremos en cada una de las llamadas a wp_list_comments().

Llamada al template (Actualización)

tikitakfire me avisa de que falta añadir la llamada al template de comentarios comments_template() que en esta versión ha sido modificada y tendremos que llamarla de la siguiente forma :

comments_template('', true);

este código deberá ir en el lugar de tu theme donde antes estaba comments_template(), generalmente en el fichero index.php, single.php y page.php.

Los themes de Wordpress hacen que nuestro blog se diferencie del resto, principalmente por que le aplica un toque personal que pueda acercarse al que deseamos transmitir con nuestra página. 

Cuando no tenemos los conocimientos o la capacidad para convertir esa imagen mental que queremos mostrar no nos queda más remedio que escudriñar centenares de themes hasta dar con un que se acerque a nuestra idea y posteriormente ir cambiando las cosillas que lo harán diferente.

Recopilaciones como estas nos ayudan a mostrarnos lo mejorcito en cuanto a themes de Wordpress se refiere. Y si no te bastan, tienes más de 50 lugares en donde encontrar el theme que estás buscando.