Respuesta rápida
Descargando el Source de Bootstrap tenemos los ficheros LESS, los cuáles contendrán variables que podremos reutilizar en nuestros propios ficheros LESS de nuestro theme. Usando la estructura «functions.php extension» solo nos queda añadir las clases a nuestros templates.
Respuesta completa
Requisitos:
Antes de escribir esta entrada estuve pensando hacer una solo de Bootstrap -qué es, qué posibilidades da y cual es la mejor manera de usarlo-, pero está muy bien explicado en su página oficial, así que no voy a ser reiterativo y aconsejo visitar y conocer este framework.
Resumiendo bastante, Bootstrap es un framework que te facilita tener un diseño responsivo, es decir, que se adapta al dispositivo -sea móvil, tablet o pc- y, permite tener premisas en el css.
Por ejemplo, si quieres el diseño de un botón, de un formulario o de una tabla ya existen clases que solo tienes que añadir al tag que quieras, entre otras estructuras.
Para este caso hay que descargarse el Source, es decir, la fuente de Bootstrap. No nos vale el Bootstrap compilado porque nos interesa tener los archivos LESS.
¿Porqué? Porque estos archivos tienen variables que podemos aprovechar en nuestros propios LESS.
Estructura de archivos
En resumidas cuentas, Bootstrap lo dividiremos en LESS y JavaScript -a partir de ahora JS.
Como no podremos interactuar con los ficheros JS no es necesario tener la carpeta con las partes de JS por separado.
En vez de eso nos quedaremos con el archivo ya minimizado bootstrap.min.js, que se encuentra en la carpeta dist/js/.
En nuestro WP, la estructura de los ficheros que vamos a tocar es la siguiente:
alisios |- framework | |- extensions | | |- bootstrap | | |- less | | | |- bootstrap.less | | | |- ... | | | | | |- bootstrap.min.js | | |- function.php | | |- init.php | | | |- alisios-functions-init.php | |- style.less
LESS
La carpeta LESS de Bootstrap tiene muchos archivos, pero todos son llamados en bootstrap.less, que es el archivo raíz.
Por lo tanto, lo único que haremos es hacer un @import en nuestro style.less de ese archivo.
/** * Imports libs: * Bootstrap 3.0.3 */ @import 'framework/extensions/bootstrap/less/bootstrap.less';
JavaScript
El archivo JS lo debemos llamar en nuestra página, al final del todo.
Hay que evitar siempre -siempre, siempre y SIEMPRE- añadir JS en el <head>, ya que cuantos más archivos se cargan en el head más tiempo se queda la página en blanco al cargarse.
A su vez, es obligatorio que la parte CSS se cargue en el head, porque si se carga al final se vería el contenido sin diseño mientras se carga el archivo CSS.
Son décimas de segundo, pero es la experiencia del usuario lo que esta en juego.
La funcionalidad de añadir el JS al wp_footer la escribiremos en bootstrap/functions.php.
El resto son la estructura de llamadas que tenemos para que funcione correctamente.
/* Bootstrap */ require_once( $extensionsDirectory . '/bootstrap/init.php' );
<?php
/**
* Bootstrap v3
* Hooks & Filters
*/
require_once('functions.php');
add_action( 'wp_enqueue_scripts', array('AlisiosBootstrap', 'add_script'));
<?php
class AlisiosBootstrap {
/*
* Hook
* Add in wp_fotter our bootstrap.min.js
*/
public static function add_script() {
wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/framework/extensions/bootstrap/bootstrap.min.js', array( 'jquery' ), '3.0.3', true );
}
}
Para que nuestro script vaya al wp_footer en vez de al wp_head tan solo hay que añadir ‘true’ al quinto parámetro de wp_enqueue_script.
Los parámetros de wp_enqueue_script son ($id, $url, $array_independencias, $version, $isFooter).
Ahora solo nos queda añadir las clases de estructura en nuestro template.
Para que nuestro contenido este centrado hace falta ponerle en nuestro header.php la clase container.
<header class="header" role="banner" >
<div class="container">
<h1 class="site-title">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php echo esc_attr( get_bloginfo( 'name' ) ); ?></a>
</h1>
<h2 class="site-description"><?php echo esc_attr( get_bloginfo( 'description' ) ); ?></h2>
</div>
</header>
<div id="page" class="content-wrapper container">
En el header he decidido poner un div interno porque quiero que un fondo de todo el ancho de la página para el header.
También habrá que centrar el footer.
<div class="footer-content container">
<p>© 2013 <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php echo esc_attr( get_bloginfo( 'name' ) ); ?></a>.</p>
</div><!-- /.footer-content -->
Dentro del contenido habrán dos columnas, así que añadiré en los templates 404.php, archive.php, index.php, page.php, search.php y single.php las clases de columnas.
Las columnas siempre se dividen en 12.
Para móvil en vertical y horizontal, tablet pequeño en vertical y horizontal y tablet normal en vertical se usa la clase col-xs-12, que significa que el ancho será de 12 columnas, es decir, el ancho entero.
Para tablet normal en horizontal y portátiles se usa la clase col-sm-8, que significa que tendrá 8 columnas y dejará 4 libres, dónde estará nuestra segunda columna.
<section id="primary" class="content col-xs-12 col-sm-8" role="main">
A partir de aquí ya se puede jugar con Bootstrap en tu WP Theme.
¡Sé creativo!
Ver Alisios 0.2.
