WordPress y Bootstrap – como crear un slider con posts destacados

WordPress y Bootstrap – como crear un slider con posts destacados

WordPress y el bootstrap de twitter están convirtiéndose una combinación cada vez más utilizada. Gracias a el “responsiveness” de boostrap y la integración de CSS, tener una página web / blog bonito y personalizado se ve cada vez más y más fácil.

En este post les voy a enseñar como integrar el Boostrap Carousel en WordPress. Aprenderán como configurar el carousel para que utilice entradas que tengan una categoría en particular. En otras palabras, como crear un boostrap carousel que utiliza contenido dinámico y no estático como hago yo para el slider que tengo de cabecera.

Pre requisitos.

• Tener Bootstrap integrado en WordPress.
• Tener JQuery instalado

Empecemos

1. Tiene que tener a mano el código de fuente para el bootstrap carousel.[snippet id=»1096″]
2. Vamos a probar si tenemos todo configurado correctamente. Vamos a utilizar el código de arriba y ver si aparece el carousel y funciona como debería.Para ello, abran un editor de texto simple ie – Bloc de Notas o Notepad++ que es el que utilizo yo. Peguen el  código de arriba en el archivo. Yo lo guarde como sidebar-carousel.php en el directorio de mi tema actual de wordpress.  Al llamarlo asi, podre llamarlo desde cualquier otra pagina .php de mi tema utilizando – <?php get_sidebar(‘carousel’);?>

   NOTA – Si a la hora de darle a las flechas de izquierda o derecha solo se añade #myCarousel a la URL de tu pagina, eso significa que JQUERY no lo tienes configurado bien.

3. Una vez que funcione todo como se debe, prepara el contenido que quieres mostrar en tu carousel.  Tienes que crear una categoría nueva o ya existente que vayas a utilizar para mostrar en el carousel. Todos los posts que estén en esa categoría, serán utilizados por el bucle que vamos a crear a continuación.Yo por ejemplo, cree la categoría “destacado”

   Como verán, por defecto en el carousel, aparecen varios “ítems” y puedes ir añadiendo mas y mas a tu gusto. Veras que hay dos tipos de ítems, uno “Active” y otro normal. En el caso nuestro que vamos a dinamizar el contenido, solo vamos a utilizar 2. Uno que va a ser “active” y otro que va  a ser normal.

4. Tenemos que rodear la clase “ítem active” con la categoría que hayamos creado antes.
   Esto se hace de la siguiente manera ->[snippet id=»1097″]
5. Arriba hemos configurado que el ítem “active”, vamos a configurar los demás. Digamos que son 10 las entradas que tienes en la categoría que has elegido, esto lo defines en post per page. Yo lo tengo que configurado para que no me repita la que aparece en el “active ítem” de arriba utilizado offset 1[snippet id=»1098″]
6. Entonces el código entero debería de parecerse algo a ->[snippet id=»1099″]
7. Y listo, para personalizar la apariencia, puedes utilizar CSS y para cambiar los parámetros, puedes buscar más información sobre WP Query en la API de wordpress.org