twitter bootstrapEn este tutorial, vamos a integrar twitter bootstrap con wordpress usando cualquier tema.

Twitter bootstrap nos permite añadir mas cosas con su CSS extendido. En wordpress, existe un plugin que te permite importar las funciones de twitter bootstrap y javascript sin tener que modificar tu css (Worpress Twitter Bootstrap CSS). Peor claro, al tener mas plugins, y dependencia en sistemas externos al tuyo, van a ralentizar tu blog.

Aquí les dejo los pasos para importar Twitter Bootstrap y javascript en su tema de wordpress.

  1. bootstrap.css -> Descarga
  2. bootstrap.js (incluido en la descarga de arriba)
  3. jquery.js

Si quieres puedes descargar la carpeta lista con todos los archivos que utilizo en todas las guías. Descarga Boostrap

En general, wordpress necesita 2 archivos para funcionar, index.php y style.css.  -> en mi caso, los pasos mencionados para index.php los tenia que hacer en header.php ya que es donde cargo todos los estilos, nombre del blog etc.

Como se donde se cargan todas estas cosas? Busca en index.php y header.php a ver donde encuentras algo parecido a las siguientes lineas ->

Screen Shot 2013-06-30 at 11.25.44 PM

 

 

 

 

 

 

Yo uso el editor de wordpress, hay gente que se conecta por SFTP/FTP para hacer los cambios a los archivos.

  1. Una vez descargados los archivos, sube los a la carpeta principal de tu tema.
  2. Edita style.css e importa bootstrap.css ->
    @import url("bootstrap/css/bootstrap.min.css");

    Yo importe bootstrap.css el paquete completo en vez de la version min, porque necesitaba ciertas funciones, pero si no te hace falta, siempre es mejor tener menos codigo en tu pagina web. Que sea la primera linea de codigo de tu style.css

  3. A boostrap le hace falta jquery para funcionar, para ello vamos a importar jquery en nuestro index.php (o donde se cargan todas las cosas, en mi caso header.php) La practica ideal es poner los scripts al final de la pagina para que no relentize la carga de la pagina.Screen Shot 2013-06-30 at 11.39.34 PMListo. Ya puedes empezar a escribir codigo del bootstrap y te aparecera en la pagina web.