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

Una de las novedades con las que WordPress 2.5 nos sorprendía era con la aparición de ShortCodes. Un sistema que nos permitía definir pseudo-tags que nos permitía ejecutar PHP en nuestros posts. Como vimos hace unos meses (casi un año) este sistema nos permite definir tags al estilo BBcode que puedan ser usados en nuestros posts, siendo estos reemplazados por el código generado asociado a él.

¿Como funcionan?

Es muy sencillo, únicamente tendremos que definir nuestros propios shortcodes, abajo veremos algunos de ejemplos y los colocaremos en el fichero functions.php de nuestro theme o un un plugin destinado únicamente para ello. Allí, usando add_shortcode() iremos relacionándolos con las funcionalidades que deseemos realizar con cada uno de ellos.

Despues, una vez añadidos a WordPress, únicamente tendremos que escribir nuestro shortcode entre corchetes ([shortcode]) dentro de nuestro post y automáticamente al salir el post por pantalla este reemplazará nuestro shortcode por su equivaléncia en código.

La gente de Smashing Magazine hace una recopilación de algunos interesantes:

Última imagen asociada a un post:

function sc_postimage($atts, $content = null) {
	extract(shortcode_atts(array(
		"size" => 'thumbnail',
		"float" => 'none'
	), $atts));
	$images =& get_children( 'post_type=attachment&post_mime_type=image&post_parent=' . get_the_id() );
	foreach( $images as $imageID => $imagePost )
	$fullimage = wp_get_attachment_image($imageID, $size, false);
	$imagedata = wp_get_attachment_image_src($imageID, $size, false);
	$width = ($imagedata[1]+2);
	$height = ($imagedata[2]+2);
	return '<div class="postimage" style="width: '.$width.'px; height: '.$height.'px; float: '.$float.';">'.$fullimage.'</div>';
}
add_shortcode("postimage", "sc_postimage");

Modo de uso:

[postimage size="" float="left"]

Obtener los posts de una categoría desde un shortcode

function sc_liste($atts, $content = null) {
        extract(shortcode_atts(array(
                "num" => '5',
                "cat" => ''
        ), $atts));
        global $post;
        $myposts = get_posts('numberposts='.$num.'&order=DESC&orderby=post_date&category='.$cat);
        $retour='<ul>';
        foreach($myposts as $post) :
                setup_postdata($post);
             $retour.='<li><a href="'.get_permalink().'">'.the_title("","",false).'</a></li>';
        endforeach;
        $retour.='</ul> ';
        return $retour;
}
add_shortcode("list", "sc_liste");

Modo de uso:

[liste num="3" cat="1"]

Insertar un lector de RSS en tus posts

//This file is needed to be able to use the wp_rss() function.
include_once(ABSPATH.WPINC.'/rss.php');

function readRss($atts) {
    extract(shortcode_atts(array(
	"feed" => 'http://',
      "num" => '1',
    ), $atts));

    return wp_rss($feed, $num);
}

add_shortcode('rss', 'readRss');

Modo de uso:

[rss feed="https://www.anieto2k.com/feed/" num="5"]

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 &#8220;<?php the_title(); ?>&#8221;</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','&nbsp;&nbsp;',''); ?></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 &#8220;<?php the_title(); ?>&#8221;</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','&nbsp;&nbsp;',''); ?></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»)

Varios han sido los usuarios que me han solicitado ayuda para migrar los comentarios de su theme al nuevo sistema de WordPress 2.7.  Hace unas semanas vimos como hacer que dependiendo de la versión aplicara un sistema u otro, ahora veremos como reaprovechar el código para ambas versiones.

Argumento callback

Para ello debemos hacer uso del parámetro callback que le pasaremos a la función wp_list_comments().

// Comentarios
<?php wp_list_comments('type=comment&callback=mytheme_comment'); ?>
// Pingbacks
<?php wp_list_comments('type=pingback&callback=mytheme_pingback'); ?>

callback, se encarga de pasar el comentario a la función que especificamos como valor y esta función se encargará de mostrar el comentario/pingback con el aspecto que definamos en su interior.

<?php 
function mytheme_comment($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 } ?>

En este ejemplo, vemos como la función recibe como parámetro el comentario, los argumentos pasados además del callback y la profundidad de comentarios. 

¿Y las versiones anteriores a la 2.7?

Pues si unimos lo que vimos hace unas semanas, simplemente tendremos que comprobar que wp_list_comments() exista:

<?php if (function_exists('wp_list_comments')) : ?>
	<?php wp_list_comments('type=comment&callback=mytheme_comment'); ?>
	<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 mytheme_comment($comment);?>
	<?php endforeach; ?>
<?php endif; ?>

Si nos fijamos en el código, la misma función nos sirve para ambas versiones. Así que prueba superada, mañana veremos más cosillas sobre los comentarios de WP 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.

No he comentado nunca que el fichero functions.php ubicado en nuestros themes nos permite definir funciones que usaremos en nuestro theme y que nos permiten ampliar las funcionalidades de tu WordPress directamente desde tu theme.

Matt Varone nos muestra dos recopilaciones de funciones que podemos añadir a nuestro functions.php para disponer de ciertas funciones que pueden ayudarnos con nuestros themes de WordPress.

get_custom_field_value( $szKey, $bPrint = false)

Obtén fácilmente un dato personalizado.

reg_replace_content( $szPattern, $szReplace, $bPrint = false )

Permite buscar/reemplazar dentro del contenido de nuestros posts.

get_post_image( $iImageNumber = 0, $bPrint = false )

Nos devuelve una imagen que aparezca en el contenido.

clean_bad_content( $bPrint = false )

Limpieza de código

list_in_columns( $szType = "bookmarks", $iPerColumn = 10, $szDataArguments = null, $szRel = null ,$szClass = "column-list", $szFirstClass = "column-list-first" )

Función para crear listados en columnas de categorías y bookmarks.

wp_list_recent_posts( $iAmount = 5, $szCat = null, $szBefore = "<li>", $szAfter = "</li>" )

Fácil método de obtener los posts más recientes.

shorten_text( $iChars = 250, $szTail = "...", $bPrint = true )

Permite cortar el contenido del post en un número definido de carácteres.

highlight_comment( $szAuthClass = "autor-comment", $iUserID = 1 )

Resalta los comentarios de un autor en concreto

display_copyright( $iYear = null, $szSeparator = " - ", $szTail = '. All rights reserved.' )

Muestra el copyright del blog

Descargar1 / Descargar2