May 222014
 
Artículo WordPress

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:
@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:
<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:

<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”:

    </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>”:

</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:

blog-con-sidebar

 

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

 Publicado por en 4:29 pm

 Deja un comentario

(requerido)

(requerido)