Usa twitter bootstrap con wordpress

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.
Kunal Sajnani
Kunal Sajnanihttps://canariasagusto.com/sobre
¡Hola! Soy Kunal, el autor de este blog. Soy un nerd informático, fotógrafo, diseñador web y cocinero de paso. No dejes que llegue aquel día en el que te arrepientas de no haber explorado o probado cosas nuevas. Con ese lema, voy blogueando a medida que descubro. ¡Sígueme en la aventura!

Latest articles

spot_imgspot_img

Related articles

3 COMENTARIOS

  1. Hola yo también estoy desarrollando mi theme con bootstrap específicamente con la versión 3.1.1 aun tengo un problema al momento de registrar widgets para mi sidebar pues utilizo el siguiente marcado:

    Sidebar #01

    Home

    Profile

    lo registro de la siguiente manera en el functions.php

    ‘Sidebar’,
    ‘before_widget’ => »,
    ‘after_widget’ => »,
    ‘before_title’ => »,
    ‘after_title’ => »,
    ));

    ?>

    cambio el marcado por lo siguiente

    pero no obtengo el estilo deseado, me podría ayudar con esto.

  2. Hola David, vamos a ver si te puedo ayudar con tu tema.

    Me he descargado un .zip de la pagina, veo que viene el HTML y CSS como dices. WordPress funciona con paginas .php ya que tiene contenido dynamico. Supongo que habras diseñado la pagina con layitout. Ahora lo que tienes que hacer es cargar el HTML en tu wordpress. Pero claro, no bastara solo con cargar un HTML statico, como sabra cada boton a que enlance pertenece? – Para eso tienes que buscar en google las funciones de tu tema wordpress.

    Sin embargo, el primer paso seria ver en tu index.php de tu tema wordpress como se carga la pagina -> suelen ser algo

    carga el contenido aqui mendiante un loop viendo si tienes posts


    Dependiendo del layout que hayas elegido vas a tener que buscar en google como poblar las secciones con funciones de llamada wordpress.

    Por ejemplo, cuando use el bootstrap carousel para llenarlo de posts destacados, tuve que hacer lo siguiente -> http://canariasagusto.com/2013/12/wordpress-y-bootstrap-como-crear-un-slider-con-posts-destacados/

    vez que hay una funcion ie –

    while ( $the_query->have_posts() ) :
    $the_query->the_post();
    ?>

    Tiene sentido lo que digo? –

  3. Muchas gracias por la información.

    estoy intentando integrar los diseños realizados a través de http://www.layoutit.com, con mi tema de wordpress he intentado seguir los pasos descritos en este articulo pero no logro obtener ningún resultado.

    layoutit. entrega los archivos html, y css del diseño pero no logro vincularlos con mi tema de wordpress.

DEJA UNA RESPUESTA

Por favor introduzca su comentario.
Introduzca su nombre aqui

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

spot_imgspot_img