Añadir estilo con Bootstrap 3
Una vez que tenemos todos los elementos básicos incorporados en nuestro tema, ha llegado el momento de diseñar su presentación. Para ello, vamos a utilizar la librería Bootstrap de twitter. Bootstrap nos ofrece una solución “adaptativa” (en ingles: responsive) para la presentación del sitio en plataformas múltiples, tanto ordenadores de sobremesa como portátiles, tablets y teléfonos inteligentes.
- Descargar Bootstrap 3 y extraer el contenido del fichero comprimido en el directorio del tema (en nuestro caso, el fichero descargado es bootstrap-3.1.1-dist.zip).
- Importar bootstrap en style.css:
|
1 2 3 4 5 6 7 |
@import url('bootstrap/css/bootstrap.min.css'); body { padding-top: 0px; padding-bottom: 40px; } |
- Añadir el tag “viewport” dentro de la sección <head>, en header.php:
|
1 2 3 |
<meta name="viewport" content="width=device-width, initial-scale=1"> |
Con esto, podemos volver a visitar el sitio desde el navegador y comprobar el resultado:
Como podemos ver, el aspecto del sitio ha cambiado drásticamente. Pero el menú todavía aparece como una lista de elementos.
A continuación, vamos colocar la barra lateral a la derecha del contenido principal, para lo cual vamos a incluir toda la página dentro de un div “container”, en el cual se encuentran:
- el contenido principal, dentro de un div “col-md-8”
- la barra lateral, dentro de un div “col-md-4”
1. En header.php, sustituimos todo lo que hay debajo del tag <body> por:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div class="container"> <div id="page"> <div id="header" role="banner"> <div id="headerimg"> <h1><a href="<?php echo home_url(); ?>/"><?php bloginfo('name'); ?></a></h1> <div class="description"><?php bloginfo('description'); ?></div> </div> </div> <?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?> <hr /> <div class="row"> <div class="col-md-8"> |
2. Al comienzo de footer.php, cerramos el div “col-md-8”, e introducimos la barra lateral dentro de un div “col-md-4”:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
</div> <!-- class="col-md-8" --> <div class="col-md-4"> <?php if(is_active_sidebar('sidebar-1')) : ?> <div id="sidebar"> <ul> <?php dynamic_sidebar('sidebar-1'); ?> </ul> </div> <?php endif; ?> </div> </div> <!-- class="row" --> |
3. Tambien en footer.php, cerramos el div “container” inmediatamente antes del tag “</body>”:
|
1 2 3 4 |
</div> <!-- class="container" --> </body> |
Y, volviendo a acceder al la página del blog, podemos comprobar cómo la barra lateral se ha colocado a la derecha del contenido principal:
En el próximo artículo explicaremos las modificaciones que hay que realizar en el tema para que nuestro menú utilice el estilo de menú de bootstrap.
Referencias
—