Este fin de semana estuve trabajando para un cliente que me había pedido el diseño de un Sitio en Flash, pero como yo no trabajo con Flash le comente de la existencia de de librerías como jQery o Mootools. Básicamente necesitaba una forma de mostrar sus productos a modo de un Slider.

Cu3er y Wordpress

Entonces se me vino a la memoria la existencia de Cu3er, un Slider basado en Flash y XML. Por lo que me puse manos a la obra en el diseño y en la integración con Wordpress. Cu3er tiene la facilidad de depender de un archivo XML donde se encuentra su configuración con las directivas de como comportarse. Tuve que hacerme una idea de como generar un XML dinámicamente para mostrar Títulos, introducción e imágenes.

Como quede bastante conforme con el resultado de Cu3er, decidí compartir como logre dicha integración.

Demo

El siguiente es un simple ejemplo que muestra una configuración y un comportamiento básicos

Como algunos tuvieron problemas a la hora de lograr la integración, he puesto a su disposición otro Demo donde pueden ver el comportamiento con Wordpress y podrán acceder al archivo config.php que se genera dinámicamnete.

Consideraciones Previas

Como lo mencione anteriormente Cu3er trabaja con n XML donde se encuentra su configuración, por lo que tendremos que crear un XML a partir de PHP.

Cu3er es muy simple de implementar y cuenta con muchas opciones a la hora de configurar su comportamiento, te recomiendo que que leas detenidamente su documentación.

Por lo mencionado anteriormente no me detendré en su configuración ya que requeriría de un articulo aparte, pero intentare ser lo mas explicito posible.

Voy a estar trabajando con un Slider de 960px por 240px, esta dimensión es para este caso en particular.

Primeros pasos

Por cuestiones obvias vamos a necesitar una copia de Cu3er. Al extraer el archivo nos encontraremos con los siguientes archivos

  • demo.html

    Un archivo de ejemplo para observar como se comporta Cu3er

  • cu3er.swf

    Sip, este es el slider

  • config.xml

    Nuestro archivo con la configuración

  • Una carpeta llamada js

    con lo necesario para poder embeber Cu3er prolijamente

  • Una carpeta llamada images

    con algunas images para demo.html

Moveremos a la carpeta de nuestro Theme el archivo cu3er.swf y la carpeta js

Creando nuestro config.xml dinámicamente

Esta es la parte fundamental, donde creamos nuestra configuración para el Slider. La idea de fondo es mostrar un Slider donde se muestren nuestras imágenes, el titulo de la entrada y su introducción; todo esto dinámicamente, es decir sin necesidad de modificar nuestro .xml cada vez que se crea una nueva entrada.

Para lograr esto vamos a necesitar crear un nuevo query_posts donde le diremos que nos incluya solo XX cantidad de entradas de la categoría XX y un custom field o campo personalizado llamado “destacada”.

Manos a la obra:

<?php
// definiminos nuestro XML y comportamiento
header("Content-type: text/xml");
header('Cache-Control: no-store');
 
// necesitamos conectarnos para realizar el Loop
require_once ('../../../wp-config.php');
 
// variables
$xml = "";
 
//cantifdad de entradas a mostrar en el slider
$cant_entradas_mostrar = 5;
 
// query post definimos los post y el ID de la categoria en la que vamos a trabajar
query_posts('showposts=' . $cant_entradas_mostrar .
    '&post_type=post&post_status=publish&order=DESC&cat=3');
 
// comienzo de la configuracion de cu3er
$xml .= "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n";
$xml .= '<cu3er>';
$xml .= '<settings>';
 
// configuracion basica: alto, ancho del container, ubicacion y gestos del mouse
$xml .= '<general    
				slide_panel_width="960"
				slide_panel_height="240" 
				slide_panel_horizontal_align="center" 
				slide_panel_vertical_align="center" 
				ui_visibility_time="3.5"	
			/>';
 
// autoplay? Si! Formato: circular 35x35, delay entre transiciones 5 segundos
$xml .= '<auto_play>';
$xml .= '<defaults symbol="circular" time="5"/>';
$xml .= '<tweenIn x="925" y="70" width="35" height="35" tint="0x000000" alpha="0.2" /> ';
$xml .= '<tweenOver alpha="0.4"/>';
$xml .= '</auto_play>';
 
// personalizacion basica del titulo y parrafo en las transisiones
$xml .= '<description>';
$xml .= '<defaults 
				round_corners="10, 10, 10, 10" 
				heading_text_size="25" 
				heading_text_color="0x777777" 
				paragraph_text_size="15" 
				paragraph_text_color="0xFFFFFF"
			/>';
 
$xml .= '<tweenIn x="150" y="160" width="660" height="90" alpha="0.15"/>';
$xml .= '<tweenOver alpha="0.3"/>';
$xml .= '</description>';
 
// boton anterior
$xml .= '<prev_symbol>';
$xml .= '<defaults type="3" />';
$xml .= '<tweenIn x="920" y="250" scaleX=".75" scaleY=".75" />';
$xml .= '<tweenOver  x="922" y="250" scaleX=".9" scaleY=".9"/>';
$xml .= '</prev_symbol>';
 
// boton siguiente
$xml .= '<next_symbol>';
$xml .= '<defaults type="3" />';
$xml .= '<tweenIn x="940" y="250" scaleX=".75" scaleY=".75" />';
$xml .= '<tweenOver  x="942" y="250"  scaleX=".9" scaleY=".9"/>';
$xml .= '</next_symbol>';
 
// transicion a mostra por defecto
$xml .= '<transitions slicing="vertical" direction="down" duration="0.6" delay="0.2" cube_color="0xc2c2c2"/>';
 
// terminamos con la configuracion basica
$xml .= '</settings>';
 
// comienzo de las transiciones dentro de mi Loop
$xml .= '<slides>';
 
// mi Loop
if (have_posts()):
    while (have_posts()):
        the_post();
 
        // category ID
        $category = get_the_category();
 
        // definimos nuestro custom field
        if (get_post_meta($post->ID, 'destacada', true)) {
 
            // personalizacion de las trasiciones
            $xml .= '<transition num="3" slicing="vertical" direction="down"/>';
            // comienzo de las transiciones
            $xml .= '<slide>';
 
            // llamamos a nuestro custom field
            $xml .= '<url>' . get_post_meta($post->ID, "destacada", $single = true) .
                // 'destacadas' es el nombre de tu campo personalizado
                '</url>';
            // link a nuetsra entrada, click en todo el slide
            $xml .= '<link>' . get_permalink() . '</link>';
            $xml .= '<description>';
 
            // titulo de nuestra entrada
            $xml .= '<heading>' . $post->post_title . '</heading>';
 
            // introduccion a nuestra entrada
            $xml .= '<paragraph>' . get_the_excerpt() . '</paragraph>';
 
            $xml .= '</description>';
            // otras variables que quizas quieras utilizar
            //  $xml .= '<categoria>' . $category[ 0 ]->cat_name . '</categoria>';
            //  $xml .= '<catid>' . bloginfo( 'home' ) . '?cat=' . $category[ 0 ]->cat_ID . '</catid>';
            //  $xml .= '<fecha>' . date( 'M j, Y', strtotime( $post->post_date ) ) . '</fecha>';
            //  $xml .= '<cometarios>' . $post->comment_count . '</cometarios>';
 
            // cerramos las transiciones dentro del Loop
            $xml .= '</slide>';
        }
    endwhile;
endif;
// cerramos las transiciones para cu3er
$xml .= '</slides>';
 
// terminamos con nuestro XML
$xml .= '</cu3er>';
 
// mostrar el output como XML
echo $xml;
?>

Como podes observar el código esta fuertemente comentado. Intente ser lo mas claro posible.

En cada slide aparecerá nuestra imagen, vía custom field, el titulo y la introducción.
Todos los valores de la configuración de Cu3er corresponden a los del ejemplo dado en el Demo. Por lo que seguramente necesites adaptarlos a tus necesidades, principalmente las dimensiones y el comportamiento de las transiciones y descripciones.

Guardamos el archivo como config.php en la carpeta de nuestro Theme.

Llamando a Cu3er

Ahora necesitas decirle a Wordpress donde se encuentra Cu3er y sus configuraciones. Para esto incluiremos en nuestro header.php y antes del cierre de la etiqueta <header> lo siguiente:

 
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/swfobject/swfobject.js"></script>
 
<script type="text/javascript">
		var flashvars = {};
		flashvars.xml = "<?php bloginfo('template_directory'); ?>/config.php";
		flashvars.font = "<?php bloginfo('template_directory'); ?>/sansation.swf";
		var attributes = {};
		attributes.wmode = "transparent";
		attributes.id = "slider";
		swfobject.embedSWF("<?php bloginfo('template_directory'); ?>/cu3er.swf", "cu3er-container", "960", "240", "9", "<?php bloginfo('template_directory'); ?>/js/swfobject/expressInstall.swf", flashvars, attributes);
</script>

Lo que estamos incluyendo corresponde a la ruta de swfobject.js, config.php y cue3er.swf como así también la ruta de nuestra fuente (en caso de poseer una).

Dentro de swfobject.embedSWF estamos diciendo que el Id donde se encontrara el Slider sera cu3er-container su y su dimensión junto con la versión de Flash necesaria para que Cu3er pueda funcionar.

Integrando Cu3er

Por ultimo solo resta insertar el id cu3er-container donde necesitamos que Cu3er se muestre en nuestro Theme.

<div id="cu3er-container">
    <a href="http://www.adobe.com/go/getflashplayer">
        <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
    </a>
</div>

Si todo salio como lo esperamos deberíamos tener el Slider correctamente funcionando.

Consideraciones Finales

Seguramente habrás notado que la integración no es nada complicada, ya que la parte mas ardua de crear un xml dinámicamente esta pre-creada. Espero haber podido explicarme correctamente y recuerden: No programo, solo diseño, el código puede estar sucio.