Integrar FlexSlider con OptionTree para wordpress

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.

Nivel: Intermedio

Recursos:

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

Section

Label: Rotatorio

ID: rotatorio

Setting

Label: Diapositivas

ID: diapositivas

Type: List Item

Description: Agrega las diapositivas que desees para el rotatorio de imágenes creado con FlexSlider.

Settings (botón): Con este botón podrás agregar sub settintings así que agrega los siguientes.

Setting

Label: Imagen de diapositiva

ID: imagen_de_diapositiva

Type: Upload

Description: Agrega la imagen para la diapositiva.

Setting

Label: Enlace de diapositiva

ID: enlace_de_diapositiva

Type: Text

Description: Coloca el enlace que desees para la imagen de la diapositiva.

Standard: #

Setting

Label: Descripción de diapositiva

ID: descripcion_de_diapositiva

Type: text

Description: Agrega la descripción que desees que apararezca al pie de la imagen de la diapositiva.

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

Section

Label: Opciones del Rotatorio

ID: opciones_del_rotatorio

Setting

Label: Animación

ID: animacion

Type: Select

Description: Selecciona el tipo de animación del rotatorio.

Add choice (botón): Con este botón podrás agregar las opciones de animación así que agrega las siguientes.

Choice

Label: Deslizar

Value: slide

Choice

Label: Fundir

Value: fade

Setting

Label: Animación automática

ID: animacion_automatica

Type: Select

Description: Escoge si deseas que el rotatorio cambie las diapositivas de manera automática.

Add choice (botón): Con este botón podrás agregar las opciones de animación automática así que agrega las siguientes.

Choice

Label: Sí

Value: slide

Choice

Label: No

Value: false

Setting

Label: Velocidad de Animación

ID: velocidad_de_animacion

Type: Text

Description: Escoge la velocidad en milisegundos con que rotan las diapositivas.

Standard: 7000

Setting

Label: Navegación paginada

ID: navegacion_paginada

Type: Select

Description: Muestra un menú de navegación debajo del rotatorio, creando un bullet por cada diapositiva.

Add choice (botón): Con este botón podrás agregar las opciones de animación automática así que agrega las siguientes.

Choice

Label: Activar

Value: true

Choice

Label: Desactivar

Value: false

Setting

Label: Navegación por botones

ID: navegacion_por_botones

Type: Select

Description: Muestra un menú de navegación debajo del rotatorio, creando un bullet por cada diapositiva.

Add choice (botón): Con este botón podrás agregar las opciones de animación automática así que agrega las siguientes.

Choice

Label: Activar

Value: true

Choice

Label: Desactivar

Value: false

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.