Integraremos un rotatorio o carrousel de imagenes a nuestro tema de WordPress utilizando el plugin de jquery Flexslider creado por WooThemes y permitiremos que el administrador del sitio agregue las diapositivas que necesite y personalice el comportamiento del mismo utilizando el plugin OptionTree para WordPress.

Para realizar este procedimiento necesitarás estar familiarizado con WordPress, recuerda que Google puede resolver tus dudas más rápido que yo.

Paso 1 – Preparar los archivos de FlexSlider

Para nuestro propósito necesitaremos descargar el plugin Flexslider y luego extraer el contenido de la carpeta zip. Crea una carpeta llamada flexslider en la raiz de tu tema y pega ahí los siguientes archivos que extrajiste del zip de flexslider:

• flexslider.css
• jquery.flexslider.js
• jquery.flexslider-min.js
• Y el folder images que contiene el archivo bg_direction_nav.png.
• También crea un archivo php con tu editor de código preferido y llamalo flexslider.php para utilizarlo más adelante.

Paso 2 – Preparar las opciones de OptionTree

Primero instala el plugin OptionTree ya sea desde el panel de WordPress>Plugins>Añadir nuevo ó descargalo e instálalo subiéndolo vía el panel de WP o ftp. Luego de que lo instales, actívalo y da click en Settings para crear las siguientes opciones. Recuerda que los section IDs distinguen entre mayúsculas de minúsculas. Yo te recomiendo utilizar minúsculas para todos los IDs.

Opciones para las diapositivas del rotatorio

Nota: dentro de cada sub setting, verás el botón de agregar setting, ese no agregará nada al presionarlo, baja un poco en la página y verás otro botón para agregar un setting, ese es el que te funcionará.

Opciones para el comportamiento del rotatorio

Despues de agregar todas las opciones, da click en el botón save changes y dirigete a Apariencia>Theme Options>Opciones del Rotatorio, configura como desees que se comporte y presiona el botón Save changes.

Inmediatamente dirigete a Apariencia>Theme Options>Rotatorio y agrega dos nuevas diapositivas. Asegúrate de seleccionar el radio button “Tamaño completo” para obtener la url del archivo original y revisa que la URL del enlace contenga la ruta de la imagen, sino es así, presiona el botón “URL del archivo” inmendiatamente despues de subirla. Te recomiendo que subas las imágenes del tamaño que vayas a utilizar para evitar pérdida de resolución o deformación de la misma. Recuerda que los enlaces que agregues deberán contener el protocolo “http://” ya que de lo contrario no funcionarán bien los enlaces.

Paso 3 – Integrar las variables de OptionTree a FlexSlider

Abre el archivo flexslider.php que creaste en el paso 1 y pega el siguiente código.

<?php
/**
 * Flexslider & Option Tree
 *
 * Rotatorio personalizable vía OptionTree.
 * Elaborado por Iru Dionisio.
 * Resuelve tus dudas en http://www.iru.me/
 */
 ?>
<!-- Flexslider markup -->

<div class="flex-container">
	<div class="flexslider">
		<ul class="slides">      
		<?php if ( function_exists( 'ot_get_option' ) ) {

			/* get the slider array */
			$diapositivas = ot_get_option( 'diapositivas', array() );
  
			if ( ! empty( $diapositivas ) ) {
				foreach( $diapositivas as $diapositiva ) {
					echo (
						'<li>
							<a href="' . $diapositiva['enlace_de_diapositiva'] . '" rel="bookmark">
								<img src="' . $diapositiva['imagen_de_diapositiva'] . '" alt="' . $diapositiva['title'] . '" />
								<p class="flex-caption">' . $diapositiva['descripcion_de_diapositiva'] . '</p>
							</a>
							
						</li>'
					);
				}
			}
		} ?>
		</ul><!-- .slides -->
	</div><!-- .flexslider -->
</div><!-- .flex-container -->

<?php if ( function_exists( 'ot_get_option' ) ) {
	$animacion = ot_get_option( 'animacion' );
	$animacion_automatica = ot_get_option( 'animacion_automatica' );
	$velocidad_de_animacion = ot_get_option( 'velocidad_de_animacion' );
	$navegacion_paginada = ot_get_option( 'navegacion_paginada' );
	$navegacion_por_botones = ot_get_option( 'navegacion_por_botones' );
} ?>

<!-- Flexslider Script -->
<script type="text/javascript" charset="utf-8">
	$(window).load(function() {
		$('#header-slider').flexslider({
			slideshow: <?php echo $animacion_automatica ;?>,
			animation: "<?php echo $animacion ;?>",
			controlNav: <?php echo $navegacion_paginada ;?>,
			directionNav: <?php echo $navegacion_por_botones ;?>,
			slideshowSpeed: <?php echo $velocidad_de_animacion ;?>,
		});
	});
</script>

Paso 4 – Preparar los javas y el estilo.

Coloca las siguientes líneas antes de la etiqueta ce cierre de la cabecera de header.php.

<!-- Coloca esto antes de la etiqueta de cierre </head> de header.php -->
<?php $template_url = get_template_directory_uri(); ?>
<link rel="stylesheet" href="<?php echo $template_url; >/flexslider/flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="<?php echo $template_url; ?>/flexslider/jquery.flexslider.js&quot></script>

Paso 5 – Manda a llamar al rotatorio.

Una vez concluidos todos los pasos, manda a llamar al rotatorio desde cualquier plantilla con el siguiente código.

<?php include (TEMPLATEPATH . '/flexslider/flexslider.php'); ?>

En caso de que colapse el div y no se muestre nada, envuelve el código anterior en un div con un ancho y alto fijo. Ademas agregale la propiedad CSS display: inline-block para que se muestre el bloque.

Eso es todo, si necesitas ayuda, agregar alguna sugerencia o demás, por favor deja un comentario.