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

Como le prometi a Show de Show Weblog, aqui traigo un mini tutorial de como hacer que los comentarios sean dinámicos.

En esta primera entrega, por falta de tiempo me voy a centrar en la insercción dinámica de comentarios. En futuras entregas ire poniendo como leerlos dinámicamente.

Pasos:

1. Necesitamos crear un objeto conexión como explicamos en el post de Introducción a Ajax.
2. Necesitamos montar una función en Javascript que nos mande los datos del formulario de comentarios al fichero donde insertamos los datos.
3. Montarlo todo sobre el template.

1. Creacion del objeto HttpRequest

Para la creación del objeto vamos usar una clase llamada XConn, simplifica enormemente el sistema de creación de objetos httpRequest.

1. Descargamos el fichero js (HXConn.js)
2. Y lo añadimos en el fichero header.php de nuestro theme.

Hay que tener cuidado a la hora de insertarlo ya que hay que poner toda la ruta del fichero.

Recomiendo usar la función de wordpress bloginfo(‘stylesheet_directory’); de esta forma.

<script src="<?php bloginfo('stylesheet_directory'); ?>/js/XHConn.js" type="text/javascript" ></script>

2. Montamos la función para insertar los comentarios

Esta función debe ir introducida en el codigo antes de su nombramiento en el boton enviar de los comentarios. Yo personalmente prefiero tener todas las funciones javascript en un fichero a parte y luego llamarlo desde el head, pero tambien se pueden introducir en la pagina de comments.php usando las etiquetas <script></script> alojando dentro el codigo de la función.

function NuevoComment(id,url,formulario){
//Datos del comentario
autor = escape(formulario.elements["author"].value);
email = escape(formulario.elements["email"].value);
url = escape(formulario.elements["url"].value);
comment = escape(formulario.elements["comment"].value);
var myConn = new XHConn();
//si el nagevador no soporta XMLHTTP entonces manda un aviso.
if (!myConn) alert("XMLHTTP not available. Try a newer/better browser.");
//funcion que ejecuta la conexion una vez ejecutado el envio
//en nuestro caso escribimos el html con los comentarios y el formulario
var inserta = function (oXML) {alert("Su comentario ha sido insertado");};
//llamamos a la funcion y le pasamos la id del articulo
myConn.connect(action, "POST", "comment_post_ID="+ id +"&author=" + autor + "&email=" + email + "&url=" + url + "&comment=" + comment, inserta);
}

Para que esto funcione el template ha de respetar los nombres del formulario original (Kubrick).

Recomiendo introducir un div para albergar el resultado de la operación, pero eso ya a gusto del programador ;).

3. Motamos el template

Para montar el template no necesitamos mucha cosa, unicamente hemos de coger y cambiar la linea donde se encuentra el boton de enviar y le añadimos al evento onClick la siguiente función.

Luego tenemos que poner la función que hemos creado anteriormente en algun fichero o incluso en el mismo comments.php del templat, usando las tags <script></script>; para inserta el codigo Javascript.

<input class="button" name="submit" id="submit" type="button" tabindex="5" value="Enviar" onClick="NuevoComment('<?php echo $post->ID ?>','<?php echo get_option('siteurl'); ?>/wp-comments-post.php',this.form);"/>

Actualizacion

He añadido un alert a la función en Javascript, creo que de esta forma ya queda más claro.