En 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.
- bootstrap.css -> Descarga
- bootstrap.js (incluido en la descarga de arriba)
- 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 ->
Yo uso el editor de wordpress, hay gente que se conecta por SFTP/FTP para hacer los cambios a los archivos.
- Una vez descargados los archivos, sube los a la carpeta principal de tu tema.
- 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
- 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.
Listo. Ya puedes empezar a escribir codigo del bootstrap y te aparecera en la pagina web.
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.
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? –
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.