SummArg | Cursos y recursos para webmasters

Clase 8 Anexo: Sidebar horizontal

A pedido de uno de los lectores que viene siguiendo el curso, añadimos un anexo a la clase 8, dedicada a sidebars, para explicar como maquetar una tercera sidebar pero de modo horizontal. Vamos a seguir experimentando con las sidebars dentro de la plantilla page.php que ya tiene dos sidebars dispuestas de la siguiente manera.

Antes de continuar les recomendamos leer un poco sobre la propiedad float (aquí hay un buen tutorial en español). Básicamente esta propiedad es la encargada de indicarle a un contenedor hacia donde debe ubicarse, lo que requiere para su correcta ubicación es un ancho fijo y espacio libre en la dirección deseada.

En el trabajo que ya tenemos hecho, nuestras dos sidebars tienen ancho fijo y flotan hacia la derecha (float:right). Es importante remarcar que las sidebars se ubican en el primer espacio libre encontrado en la dirección indicada desde float. Nosotros ubicamos el contenido a la izquierda, por eso queda disponible el espacio derecho para nuestros widgets.

#sidebar {
 width: 293px;
 margin-top:20px;
 margin-right:20px;
 float:right;
 }
#sidebar-dos{
 width: 215px;
 margin-top:20px;
 margin-right:20px;
 float:right;
 }

Al tener las sidebars los anchos que deseamos, los contenedores con class .widget no lo necesitan, ya que flotarán con el mismo ancho de su contenedor padre en dirección vertical.

.widget {
 margin-bottom: 20px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 background: #f4f4f4;
 border: 1px solid #ececec;
 padding: 5px;
 }

Ahora lo que tenemos que lograr es insertar una tercera sidebar, debajo de todo el contenido pero arriba del footer, que ocupe todo el ancho de la página y que tenga tres widgets adentro.

La tercera sidebar se ubicará dentro de un archivo que llamaremos sidebar-horizontal.php y la llamada a la misma dentro de page.php se realiza de la siguiente forma:

<?php get_sidebar(); get_sidebar('dos'); get_sidebar('horizontal'); ?>

Dentro de sidebar-horizontal.php colocaremos dos áreas con contenido de pruebas y en el tercer espacio repetiremos un área de widgets (¡ustedes ya saben como agregar áreas nuevas!).

<div id="sidebarHorizontal">
 <div class="widget">
 <h3>Area uno</h3>
 <ul>
 <li>Contenido de prueba</li>
 <li>Contenido de prueba</li>
 <li>Contenido de prueba</li>
 <li>Contenido de prueba</li>
 <li>Contenido de prueba</li>
 </ul>
 </div>
 <div class="widget">
 <h3>Area dos</h3>
 <ul>
 <li>Contenido de prueba</li>
 <li>Contenido de prueba</li>
 <li>Contenido de prueba</li>
 <li>Contenido de prueba</li>
 <li>Contenido de prueba</li>
 </ul>
 </div>
<?php
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar Categoria') ) : endif;
?>
</div><!-- end of sidebarHorizontal -->

Y finalmente el toque “mágico” para que tome la forma deseada: el código CSS. Primero damos el ancho total que va a tener el área contenedor de los widgets, los márgenes (20px de cada lado excepto del izquierdo) y le indicamos que se ubique en el primer espacio libre a la izquierda que encontramos puesto que de lo contrario los elementos dentro de ubicarán fuera del área deseada.

#sidebarHorizontal{
width: 920px;
margin:20px;
float:left;
}

Luego procedemos a indicarle al elemento .widget que, sólo cuando se encuentra dentro del área #sidebarHorizontal, debe tener un determinado ancho fijo, ubicarse en el primer espacio libre a la izquierda (float:left;) y tener un margen a la izquierda de 20px.

#sidebarHorizontal .widget {
width:281px;
float:left;
margin-left:20px;
}

Y listo! Pueden experimentar colocar esta nueva sidebar debajo del header, en la plantilla index.php o en donde se les ocurra.

Demo de esta clase | Descarga themeTaller | Clase 8 Anexo (265)

Volver al temario del taller

 

 

Dejar un comentario

  1. Muy buen articulo, cada vez entiendo más como funciona WordPress. Ahora me falta saber, aunque lo intuyo, como hacer que se publiquen los artículos que yo quiera en el espacio y/o contenedor que yo quiera.

  2. […] Clase Anexo: Añadir una sidebar horizontal […]

Dejar un comentario