Crear un plugin de slider responsivo para WordPress con FlexSlider

Los sliders parecen estar en tendencia a día de hoy, ¡y por una buena razón! Te permiten añadir fotos, contenido, vídeos, y mucho más en un área destacada, y animada de tu sitio web. Aunque existen un montón de plugins de slider por ahí (mi actual favorito es el de Nivo Slider), no existe ninguno para FlexSlider, un slider que es accesible mediante atajos de teclado y que funciona con un gesto de deslizamiento en pantallas táctiles. En este tutorial, ¡crearemos ese plugin!

Paso 1 Configuración del plugin

La primera cosa que necesitamos hacer es configurar el plugin. Crea una carpeta /envato-flex-slider/, y en ella, un archivo denominado 'envato-flex-slider.php'. Aquí añadiremos toda la información necesaria y el código para nuestro plugin, empezando por el bloque que define el plugin:

1

<?php

2

3

/*

4

Plugin Name: Envato FlexSlider

5

Plugin URI: 

6

Description: A simple plugin that integrates FlexSlider (http://flex.madebymufffin.com/) with WordPress using custom post types!

7

Author: Your Name

8

Version: 1.0

9

Author URI: Your URL

10

*/

11

12

?>

También me gusta establecer algunas constantes para información que estaré usando con frecuencia a lo largo del plugin. Bajo el bloque de definición, pero antes de la etiqueta php de cierre, añado esta información:

1

define('EFS_PATH', WP_PLUGIN_URL . '/' . plugin_basename( dirname(__FILE__) ) . '/' );

2

define('EFS_NAME', "Envato FlexSlider");

3

define ("EFS_VERSION", "1.0");

Creo tres constantes: la ruta del plugin, el nombre del plugin, y la versión del plugin, que se utiliza para las actualizaciones, y para notificar al Directorio de plugins de WordPress de los cambios, si fuese necesario. Observa que empiezo todas mis constantes con “EFS”. Haré lo mismo para los nombres de función de manera que no creemos conflictos con otros plugins o con el núcleo de WordPress.

Ahora que hemos tenemos la configuración, añadamos los archivos y el código de FlexSlider.

Paso 2 Añadir FlexSlider

Es el momento de añadir la parte importante: el javascript y el CSS para FlexSlider. Haremos esto usando las funciones wp_enqueue_script and wp_enqueue_style de WordPress para evitar conflictos. Puedes descargar FlexSlider desde aquí.

1

wp_enqueue_script('flexslider', EFS_PATH.'jquery.flexslider-min.js', array('jquery'));

2

wp_enqueue_style('flexslider_css', EFS_PATH.'flexslider.css');

En ambas líneas, asignamos un nombre a cada script, después enlazamos a los archivos .js y .css. Observa que estamos usando nuestra constante ESF_PATH. Necesitamos usar la ruta completa o los archivos no serán enlazados correctamente. También habrás notado que tenemos un 3rd parámetro en wp_enqueue_script. Esta es una matriz de otros scripts de los que depende el nuestro. En este caso, se trata de uno sólo, y es jQuery. Aquí tienes una lista completa de los scripts incluídos en WordPress. Puedes usar cualquier manejador en la matriz de dependencias.

Lo siguiente que queremos hacer es incluir el actual JavaScript que hará funcionar el slider. Hacemos esto con nuestra propia función y una acción de WordPress.

1

function efs_script(){

2

3

print '<script type="text/javascript" charset="utf-8">

4

  jQuery(window).load(function() {

5

    jQuery(\'.flexslider\').flexslider();

6

  });

7

</script>';

8

9

}

10

11

add_action('wp_head', 'efs_script');

La línea importante aquí es add_action('wp_head', 'efs_script');, que ejecutará nuestra función, efs_script() cuando sea invocada wp_head. ¡Nuestra función simplemente imprime el JavaScript necesario para que FlexSlider haga lo que le corresponde!

Habrás notado que estoy usando 'jQuery' en lugar del tradicional '$' usado normalmente en los scripts jQuery. Esto es así para que nuestro script no entre en conflicto con otras librerías JavaScript, como Scriptaculous.

Por último, copia simplemente la carpeta /theme/ en tu carpeta /envato-flex-slider/.

Paso 3 El shortcode y la etiqueta de plantilla

A continuación, vamos a configurar nuestro shortcode y nuestra etiqueta de plantilla. El shortcode permitirá a los usuarios insertar el slider en cualquier página o entrada. Ya tenemos aquí un estupendo tutorial sobre los shortcodes. La etiqueta de plantilla permitirá a los desarrolladores de temas insertar el slider directamente en ellos. Yo, como un desarrollador, creo que es increíblemente importante incluir ambos, y para facilitarles encontrar documentación. Nunca sabes quien estará usando tu plugin.

1

function efs_get_slider(){

2

3

//We'll fill this in later. 

4

5

}

6

7

8

/**add the shortcode for the slider- for use in editor**/

9

10

function efs_insert_slider($atts, $content=null){

11

12

$slider= efs_get_slider();

13

14

return $slider;

15

16

}

17

18

19

add_shortcode('ef_slider', 'efs_insert_slider');

20

21

22

23

/**add template tag- for use in themes**/

24

25

function efs_slider(){

26

27

	print efs_get_slider();

28

}

Ahora mismo este código parece bastante simple. Para el shortcode, invocamos nuestra función general, efs_get_slider() y devuelve los resultados. Para la etiqueta de plantilla, imprimimos los resultados. También usamos la función de WordPress add_shortcode() para registrar nuestro shortcode. He dejado fuera la implementación de efs_get_slider() porque no hemos establecido todavía cómo vamos a crear las imágenes. Para que a los usuarios les resulte más fácil añadir cualquier cantidad de imágenes a su slider, vamos a crear un tipo de entrada personalizada.

Paso 4 El tipo de entrada personalizada para la imagen del slider

Lo primero que haremos es crear un nuevo archivo denominado 'slider-img-type.php', donde irá todo nuestro código para la entrada personalizada. Primero, haremos algunas configuraciones al igual que hicimos para el plugin.

1

<php

2

define('CPT_NAME', "Slider Images");

3

define('CPT_SINGLE', "Slider Image");

4

define('CPT_TYPE', "slider-image");

5

6

add_theme_support('post-thumbnails', array('slider-image'));

7

?>

Cómo puedes ver, todo lo que he hecho hasta ahora es crear algunas constantes (que serán útiles para tipos de entradas más avanzadas), y he añadido soporte para las imágenes en miniatura para nuestro nuevo tipo. La única otra cosa que haremos en este archivo es registrar el nuevo tipo de entrada personalizada. Para saber más sobre tipos de entradas personalizadas, puedes consultar mi tutorial sobre cómo crear un potente portafolio. Justo antes de la etiqueta php de cierre, añadiremos este código:

1

function efs_register() {  

2

    $args = array(  

3

        'label' => __(CPT_NAME),  

4

        'singular_label' => __(CPT_SINGLE),  

5

        'public' => true,  

6

        'show_ui' => true,  

7

        'capability_type' => 'post',  

8

        'hierarchical' => false,  

9

        'rewrite' => true,  

10

        'supports' => array('title', 'editor', 'thumbnail')  

11

       );  

12

13

    register_post_type(CPT_TYPE , $args );  

14

}  

15

16

add_action('init', 'efs_register');

Hemos creado una función para registrar una entrada personalizada que usa el título, el editor, y las cajas para las miniaturas. Después añadimos una acción de WordPress para llamar a esta función tan pronto como WordPress sea inicializado. ¡Eso es! La última cosa que nos falta es incluir nuestro nuevo archivo añadiendo require_once('slider-img-type.php'); en el archivo flex-slider.php. Lo he añadido justo encima de donde hemos encolado nuestros scripts.

Ahora que sabemos cómo estamos implementando las imágenes del slider, volvamos atrás y acabemos con nuestra función general para el slider.

Paso 5 Generar el slider

Vuelve a donde definimos efs_get_slider() y sustituye el comentario //We'll fill this in later con lo siguiente:

1

$slider= '<div class="flexslider">

2

	  <ul class="slides">';

3

4

	$efs_query= "post_type=slider-image";

5

	query_posts($efs_query);

6

7

8

	if (have_posts()) : while (have_posts()) : the_post(); 

9

		$img= get_the_post_thumbnail( $post->ID, 'large' );

10

11

		$slider.='<li>'.$img.'</li>';

12

13

	endwhile; endif; wp_reset_query();

14

15

16

	$slider.= '</ul>

17

	</div>';

18

19

	return $slider;

Las dos primeras líneas son necesarias por la forma en la que FlexSlider funciona. Buscará una lista sin orden denominada ‘slides’ dentro de un div denominado ‘flexslider’ y aplicale el javascript/animations. Nuestro CSS también está configurado para definir .flexslider y ul.slides. Después de esto, creamos un bucle de WordPress cogiendo todos los tipos de entrada slider-image (nuestro tipo de entrada personalizada) y hacemos que imprima la versión amplia de la imagen destacada. Después volvemos todo el HTML generado como variable, que puede ser impreso, como nuestra etiqueta de plantilla, o devuelto, como nuestro shortcode.

Un par de notas

• Con nuestra entrada personalizada, podemos añadir un título y una imagen destacada, y hemos incluido la caja de edición de la entrada. Aunque ahora mismo solo usamos la imagen destacada (y el título para el texto alt), hemos incluido el editor si, por ejemplo, en el futuro quisiéramos soportar titulares en el slider.
• Cuando añadamos una nueva imagen de slider, debemos subir una imagen destacada para que el slider funcione. No solo el adjunto de la entrada.

Paso 6 Comprobaciones

¡Ahora es el momento de hacer pruebas! Una vez hayas añadido un par de imágenes a nuestro nuevo tipo de entrada personalizada, crea una nueva página (yo he llamado a la mis Slider) y añade nuestro recién creado shortcode, [ef_slider]. Guarda la página y obsérvala. Deberías ver algo como esto:

Conclusión

Esto es todo por ahora. Definitivamente existen algunas cosas que podemos hacer para mejorar el plugin, como añadir soporte a las opciones para las personalizaciones avanzadas que FlexSlider nos puede ofrecer o para añadir soporte para añadir titulares. Dicho esto, ¡este plugin te proporciona todo lo que necesitas para crear una versión de FlexSlider simple, fácil de usar y de insertar para WordPress! Si no estás seguro sobre la ubicación o sobre qué archivos incluir, puedes descargar los archivos fuente usando el enlace situado en la parte superior de este tutorial. ¡Disfruta!