Crear Carousel Bootstrap en WordPress

Crear un carousel bootstrap e integrarlo en wordpress es bastante sencillo. Requiere unos mínimos pasos y una lógica simple.

Descarga los archivos utilizados en esta entrada. Busca la carpeta Bootstrap en el Directorio de Descargas

Para integrarlo con wordpress, debes tener cargados los CSS para bootstrap. En mi caso, yo tengo en la pagina de la cabecera (header.php) la siguiente linea indicando la ubicacion de mi hoja de estilo, 

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

la linea de arriba indica cual es mi hoja de estilos. Y luego dentro de la hoja de estilos, tengo las siguientes lineas que importan los estilos de bootstrap

@import url("bootstrap/css/bootstrap.css");
@import url("bootstrap/css/bootstrap-responsive.css");
@import url("bootstrap/css/queryLoader.css");

y por regla de optimizacion, al final de la pagina de header.php, a cargar los siguientes scripts.

<script src="bootstrap/js/jquery-1.10.1.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<script src="bootstrap/js/bootstrap-carousel.js"></script>
<script src="bootstrap/js/bootstrap-transition.js"></script>
<script src="bootstrap/js/queryLoader.js"></script>
<script src="bootstrap/js/jquery.sticky.js"></script>

Lo siguiente se trata de pegar el código de abajo en donde quieras el carousel. En mi caso, yo queria reemplazar el logo por el carousel, por lo tanto lo puse en el header.

El carousel por defecto viene con los indicadores de pestaña. Los puedes des-habilitar simplemente borrandolos.

<!-- Bootstrap Carousel Comienzo -->
<div id="contenedor">
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
<li data-target="#myCarousel" data-slide-to="5"></li>
<li data-target="#myCarousel" data-slide-to="6"></li>
<li data-target="#myCarousel" data-slide-to="7"></li>
<li data-target="#myCarousel" data-slide-to="8"></li>
</ol>
<div class="carousel-inner">
<div class="active item"><img src="#" alt="banner1" /></div>
<div class="item"><img src="http://#" alt="banner2" /></div>
<div class="item"><img src="http://#" alt="banner3" /></div>
<div class="item"><img src="http://#" alt="banner4" /></div>
<div class="item"><img src="http://#" alt="banner5" /></div>
<div class="item"><img src="http://#" alt="banner6" /></div>
<div class="item"><img src="http://#" alt="banner7" /></div>
<div class="item"><img src="http://#" alt="banner8" /></div>
<div class="item"><img src="http://#" alt="banner9" /></div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>
</div>
<script>
$(document).ready(function(){
$('#myCarousel').carousel()
});
</script>
<!-- Bootstrap Carousel Fin -->

Al final es donde se carga el script que manejara la velocidad a que se cambian las imágenes. Por defecto, el carousel cambia las imagenes cada 5 segundos. Yo lo tengo modificado a 10 segundos de la siguiente forma.

$(document).ready(function() {
 $('#myCarousel').carousel({ interval: 10000})
});