Desde que lancé esta versión del blog he recibido varios correos preguntandome como agregar los efectos de la barra lateral así que pensé en escribir un totorial al respecto. No lo convierto en un plugn por que como verán más adelante es necesario cierto nivel de personalización.

Este tutorial asume conocimientos básicos de programación, la estructura de wordpress, javascript, php y que tienes una taza de café lista para pasar tecleando los próximos minutos.

Disclaimer: Esto está hecho a modo de experimento así que no se fijen mucho en el código, estoy seguro que con algo de trabajo se podría hacer algo más elegante. Lo importante aquí es explicar el proceso.

Continua después del salto.

Requerimientos

Lo que vas a necesitar:

• La última versión disponible de scriptaculous.

• La última versión disponible de prototype. Si estás usando una de las últimas versiones de Wordpress saltate este paso pues ya viene incluida.

Preparando los módulos

Vamos a empezar por preparar las funciones que queremos ajaxificar. Necesitamos localizar las funciones que despliegan los datos y asegurarnos que sean capaces de hacer 3 cosas.

• Debe ser capaz de recibir el número de elementos a desplegar como parametro
• Soportar un offset que podamos modificar para empezar la lista desde cualquier punto cada que la llamemos
• Debe regresar los resultados en una variable y no imprimirlos directamente

Si las funciones que queremos usar no cumplen con estas condiciones tenemos que modificarlas para que lo hagan. Para el ejemplo voy a usar la función de mi plugin de posts destacados, FeatureMe, modificada para que cumpla con todas las condiciones, pueden descargarla al final de la página.

function show_featured_posts($max_posts, $offset=0, $before='<li>', $after='</li>') {
    global $wpdb, $table_prefix;
    $table_name = $table_prefix."features";


    while(empty($posts)) {
        $sql = "SELECT * FROM $table_name ORDER BY date DESC LIMIT $offset, $max_posts";
        $posts = $wpdb->get_results($sql);
        $offset = 0;
    }


    $html = '';
    foreach($posts as $post) {
        $id = $post->id;
        $posts_table = $table_prefix.'posts';
        $sql_post = "SELECT * FROM $posts_table where id = $id";
        $rs_post = $wpdb->get_results($sql_post);
        $data = $rs_post[0];
        $post_title = stripslashes($data->post_title);
        $post_title = str_replace('"', '', $post_title);
        $permalink = get_permalink($data->ID);
        $post_id = $data->ID;
        $html .= $before .'<a href="'. $permalink .'" title="'. $post_title .'" id="destacado_'.$post_id.'">'. $post_title .'</a>'. $after;
    }
    return $html;
}

Obteniendo los resultados

Es momento de empezar a programar de verdad, lo primero que haremos es crear una función que nos permita llamar a la función que nos provee de los resultados, enviarle los parámetros necesarios y que reciba los resultados en forma de código HTML. Creamos un archivo sidebar_ajax.php para este propósito y lo pondremos en el folder del tema activo de Wordpress.

include('../../../wp-blog-header.php');


if(isset($_POST['accion'])) {
    $accion = $_POST['accion'];
    switch($accion) {
        case 'destacados':
            $res = show_featured_posts(5, $_POST['offset']);
        break;
    }
    print $res;
}

Antes de que me linchen por usar un switch con un solo caso dejenme explicar la razón por la que lo uso. Cuando terminen con este ejemplo seguramente van a querer agregarle el efecto a más de un módulo de la barra lateral y para lograrlo la única modificación que se le tiene que hacer a este archivo es agregar otro caso así que estamos planeando para el futuro aquí.

La primera linea es la clave de este archivo. Incluir wp-blog-header.php permite enlazar el resto de las funciones declaradas en Wordpress para que podamos hacer uso de ellas. El resto es muy sencillo, dependiedo de la acción que recibamos llamamos la función correspondiente y mandamos los resultados a imprimir, o como veremos en el sigiente paso, los mandamos a la función javascript.

Ajax Time

Ahora viene la parte divertida, la parte de la magia negra con AJAX. Cramos un archivo sidebar_ajax.js y lo guardamos en el directorio del tema activo de wordpress. Lo que hará este archivo es llamar el proceso php de arriba , recibir los resultados y mostrarlos en pantalla sin actualizar el resto de la página.

if(typeof(offset_destacados) == 'undefined') {
    var offset_destacados = 0;
    var inicial_destacados;
}


function getDestacados(urlTema) {
    $('preloader_destacados').style.visibility = 'visible';
    if(offset_destacados==0) {
        inicial_destacados = document.getElementById('lista_posts_destacados').innerHTML;
    }
    offset_destacados += 5;
    var url =  urlTema + '/MonkeyMagick.php';
    var pars = 'accion=destacados&offset=' + offset_destacados;
    var MyAjax = new Ajax.Request(url, { parameters: pars, method: 'post', onComplete: showDestacados });
}


function showDestacados(resultados) {
    var respuesta = resultados.responseText;
    if(respuesta==inicial_destacados) { offset_destacados = 0; }
    new Effect.Fade('lista_posts_destacados', { to: 0.1, queue: 'end', afterFinish: function callback(obj) { $('lista_posts_destacados').innerHTML = respuesta; new Effect.Appear('lista_posts_destacados', { from: 0.1, queue: 'end' }); $('preloader_destacados').style.visibility = 'hidden'; } });
}

Recuerdan mi disclaimer del prinicipio? bueno, en este punto ya se dieron cuenta a que se debe. Esto no ganaría un premio a la solución más limpia pero vamos a explicarla.

La primera parte es muy simple, unicamente inicializa un par de variables en caso de que no estén definidas.

La función getDestacados() es la que se encarga de hacer la llamada al archivo php con los parámetros necesarios. Si estamos en el primer grupo de resultados guarda una variable llamada inicial_destacados con el código HTML original. Esta variable la usaremos en la otra función para saber si hemos recorrido todos los resultados posibles y tenemos que regresar al estado original de la página.

El resto se explica por si solo, aparecemos y desaparecemos el div que contiene un gif animado para avisar al usuario que se están procesando los resultados y mostramos los resultados obtenidos en el lugar correspondiente con un efecto de desvanecimiento para que todo parezca obra de las artes negras.

Poniendo todo a trabajar

Ya tenemos todo en su lugar, ahora solo falta pegarlo y para eso solo necesitamos un poco de HTML. Primero necesitamos asegurarnos de que scriptaculous y prototype están trabajando. Asegurense de poner las siguientes lineas debajo de wp_head() pues esta es la función que llama a prototype y scriptaculous necesita que ser llamado segundo.

<script src="<?php echo bloginfo('template_directory'); ?>/sidebar_ajax.js" type="text/javascript"></script>
<script src="<?php echo bloginfo('siteurl'); ?>/wp-includes/js/scriptaculous/scriptaculous.js?load=effects" type="text/javascript"></script>

Para el paso final vamos a agregar el enlace al módulo de la barra lateral que va a activar todo el proceso. Agrego un gif animado para avisar al usuario que se está procesando información.

<h3 id="posts_destacados">Posts destacados</h3>
    <div class="sidebarbox_big">
        <ul id="lista_posts_destacados"><?php echo show_featured_posts(5); ?></ul>
        <div id="preloader_destacados"><img src="<?php bloginfo('template_directory'); ?>/imagenes/loading.gif" /></div><a href='javascript:getDestacados("<?php bloginfo('template_directory'); ?>");' class='mas'>Más <></a>
        <hr class="clearer" />
    </div>

Listo, lo unico que queda por hacer es probarlo para asegurarnos de que funcione y dejar que nuestros lectores se sorprendan.

Les dejo un zip con los archivos de este ejemplo.

Descargar archivos

Espero les haya servido, si tienen alguna duda por favor dejenla en los comentarios.