Jun 30, 2013
6 Veces leido

Usa twitter bootstrap con wordpress

Autor

Quieres usar twitter bootstrap con tu wordpress, sigue 3 pasos para importar bootstrap.css, jquery y bootstrap.js y list. No dependas de plugins externos, porque relentizar tu pagina web.

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.
Article Tags:
· · · · · ·
Article Categories:
General · Tutoriales

Comentarios para Usa twitter bootstrap con wordpress

  • 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.

    David 13/02/2014 15:26
  • 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

    < ?php get_header(); ?>

    carga el contenido aqui mendiante un loop viendo si tienes posts

    < ?php get_sidebar(); ?>
    < ?php get_footer(); ?>

    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();
    ?>

    < ?php the_post_thumbnail('large');?>

    Tiene sentido lo que digo? –

    canagusto 16/02/2014 13:21
  • 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.

    Miguel Vallejo 19/06/2014 01:06

Deja un Comentario

Tu dirección de correo electrónico no será publicada.