Widget Carrusel

Tu widget bootstrap en 10 minutos

Crea un widget para un carrusel con bootstrap

carpetas widgetEn nuestro anterior post os comentaba la cantidad de herramientas que el framework Bootstrap ponía a nuestro alcance. Y como ejemplo práctico, vamos a desarrollar un widget, que consistirá en un carrusel que podremos colocar en nuestras sidebar.

Si te suscribes a nuestra newsletter, podrás descargarte este post en formato de mini e-book, junto con todos los archivos necesarios para instalarlos en tu wordpress. 

En primer lugar, tenemos que tener claro qué es lo que queremos y necesitamos, en este caso un widget para un carrusel en Bootstrap. Para ello, creamos dentro de nuestro tema una carpeta llamada widgets, y en ella, carousel_widget. En la imagen podéis ver la estructura de carpetas y de archivos que he usado para crear el widget. Cada cual puede elegir la suya, con la que se encuentre más cómodo; lo que sí ha de hacerse es tener los distintos tipos de archivos separados, para que sea más fácil localizarlos en cada momento.

El archivo principal del widget es carousel_widget.php. En él está la estructura del widget, así como las llamadas a todos los archivos necesarios para que el widget funcione correctamente.

Para empezar, tenemos la función que llama al constructor del widget:

function carousel_load_widget() {

register_widget(‘carousel_widget’);

include get_template_directory() . ‘/widgets/carousel_widget/carousel-post-type.php’;

include get_template_directory() . ‘/widgets/carousel_widget/carousel-functions.php’;

}

Como podréis observar, además de registrar el widget incluimos dos archivos: carousel-post-type y carousel-functions. En el primero creamos un post-type (te invito a leer el post referente a los custom post types I y custom post types II) llamado carousel, y que será el encargado de contener las imágenes que van a aparecer en el widget. Esas imágenes las incluiremos como Imagen Destacada o Featured Image. También usaremos el título y el contenido de cada post para mostrarlos encima de cada imagen.

En el segundo archivo tenemos guardadas unas cuantas funciones que nos ayudarán al funcionamiento del widget. Una se encarga de dibujar los puntitos que aparecen en la parte inferior de cada imagen, y la otra se encarga de dibujar las propias imágenes del carrusel.

En el fondo, las dos funciones se parecen mucho. Ambas hacen una consulta a WordPress, preguntándole cuántos post de tipo carousel tenemos:

query_posts(array(

‘post_type’ => ‘carousel’,

‘showposts’ => -1

));

Con los datos obtenidos de cada consulta, ponemos en pantalla o los puntitos para navegar por el carrusel, o las imágenes del propio carrusel.

El resto de funciones de la clase del widget son las usuales, a excepción de :

public function widget($args, $instance) {

 // before and after widget arguments are defined by themes

echo $args[‘before_widget’];

?>

<div class=”comp-carousel”>

<div id=”CompCarousel” class=”carousel slide” data-ride=”carousel”>

 <?php social_grown_carousel_indicators(); ?>

 <div class=”carousel-inner” role=”listbox”>

 <?php social_grown_carousel_images(); ?>

 </div>

    </div>

</div>

<?php

echo $args[‘after_widget’];

}

La única diferencia es la parte central; como veréis, llamamos a las dos funciones que os he explicado antes, social_grown_carousel_indicators() y social_grown_carousel_images().

En el constructor del widget he incluido dos funciones:

add_action ( ‘wp_enqueue_scripts’ , ‘themeScripts’ );

add_action ( ‘wp_enqueue_scripts’ , ‘themeStyles’ );

Estas dos funciones se encargan de cargar las hojas de estilo css y el fichero javascript de bootstrap, encargados de que el carrusel funcione. Estas dos funciones también se encuentran en el archivo carousel-functions:

function themeScripts ()

{

wp_enqueue_script ( ‘bootstrap-js’ , ” . get_template_directory_uri () . ‘/widgets/carousel_widget/assets/js/bootstrap.min.js’ , array( ‘jquery’ ) , NULL , TRUE );

}

function themeStyles ()

{

wp_enqueue_style ( ‘bootstrap-css’ , ” . get_template_directory_uri () . ‘/widgets/carousel_widget/assets/css/bootstrap.min.css’ , array() , ‘3.1.1’ , ‘all’ );

}

Como veréis, no hacen más que cargar los archivos css y js necesarios. Si quisieras personalizar tu widget con tu propio estilo, lo más fácil es crear un archivo (por ejemplo custom.css), colocarlo dentro de la carpeta correspondiente y añadir a la función themeStyles la línea:

wp_enqueue_style ( ‘custom-css’ , ” . get_template_directory_uri () . ‘/widgets/carousel_widget/assets/css/custom.css’ , array() , ‘3.1.1’ , ‘all’ );

Instalación del widget desde el archivo de descarga

Widget CarruselYa que hemos entendido como funciona, los pasos a dar para tenerlo listo y preparado en nuestro tema son muy sencillos.

En primer lugar, crearemos en la carpeta raíz de nuestro tema una nueva carpeta llamada “widgets“, y dentro de ella descomprimiremos el archivo zip con el widget. O, si lo has descomprimido en tu escritorio, copiar la carpeta “carousel_widget” con todo su contenido dentro de la carpeta widgets. (Recuerda suscribirte para poder descargarte el archivo .zip)

Bueno, ¿Y como incluimos nuestro widget en el tema? Eso es bien sencillo: en el archivo functions.php de nuestro tema incluímos la siguiente línea:

include get_template_directory() . ‘/widgets/carousel_widget/carousel_widget.php’;

De esta manera, le decimos al tema donde está el archivo principal del widget. Y ya está.

Y eso es todo. Como veréis, con unos conocimientos básicos de WordPress, Php y Twitter Bootstrap podemos crear un widget para un carrusel a nuestro gusto. Con un par de cambios podemos tener un carrusel de noticias,  las últimas 5 entradas de nuestro blog, etc. Esperamos vuestros comentarios sobre los resultados que habéis obtenido.

The following two tabs change content below.

Francisco Palacios Chaves

Licenciado en Matemáticas, programador en PHP, Bootstrap, CSS, Codeignite entre otros. Francisco Palacios es un Freak de Bing Bang Theory, Pet Shop Boys y Apple, techno malagueño, escritor, politólogo, amante de la noche malagueña, bailongo, Indi adicto a las lágrimas de pollo en Mitjana, emprendedor empedernido, CEO y co-fundador de Social Grown.

Latest posts by Francisco Palacios Chaves (see all)

Posted in Blog, Programación and tagged , , , , , , .

Deja un comentario