WP desde cero (14): los sidebars

En esta entrada aprenderemos a preparar los sidebar de WordPress.

Roy Lichtenstein

archivado en: WordPress / 30 diciembre, 2012 / taller:

En la última entrada del año 2012 de la serie de WordPress desde cero aprenderemos a preparar los sidebar.

Un tema de WordPress puede llevar uno o más sidebar, que no hace falta que estén situados en la barra lateral, sino que pueden distribuirse por cualquier parte de la página. Incluso, puede haber un sidebar para la portada, otro para los artículos... en fin, los que se necesiten.

Para incluir un sidebar hay que registrarlo en el archivo functions.php mediante la función register_sidebar(), cuya sintaxis es muy sencilla:

  • <?php register_sidebar( $args ); ?>

$args es un array con los siguientes valores:

  1. name: el nombre del sidebar.
  2. id: el id, que debe ser único.
  3. description: una descripción breve, que luego se ve en los ajustes de los widgets
  4. class: la clase CSS.
  5. before_widget: lo que hay antes del widget.
  6. after_widget: lo que hay después del widget.
  7. before_title: lo que hay antes del título de cada uno de los widget.
  8. after_title: lo que hay después del título.

Los cuatro últimos necesitan una explicación adicional. La manera convencional de preparar un sidebar para WordPress es mediante listas desordenadas en las que cada widget se sitúa en un elemento <li>. Por lo tanto, lo normal es poner en before_widget la etiqueta de apertura del elemento (<li>) y en after_widget el cierre (</li>).

[singlepic id=53 w=350 h=258 float=center]

Para el titular del widget depende de los demás elementos heading de la página. Recordemos que no deben cumplir una función gráfica, es decir, que no se deben usar para definir tamaños de fuente; sino con un objetivo semántico. En nuestro caso usaremos h1 para la cabecera principal (el logo) y el h3 lo estamos empleando para los titulares de los artículos. Por lo tanto, aquí podemos usar un h5. (Normalmente solo empleo los tags impares cuando estoy preparando una web, de tal manera que me quedan los pares para intercalar en el caso de cualquier necesidad futura).

Por último, indicar que esta función hay que «anclarla» cuando WordPress está preparando todo el código para elaborar la página, por lo que se puede poner dentro de otra función que se active en «widgets_init», es decir, cuando se estén preparando los widget.

  • function sidebars_init() {
  • register_sidebar(array(
  • ...
  • ));
  • }
  • add_action( 'widgets_init', 'sidebars_init' );

Los dos sidebars del tema

En el tema que estamos preparando en esta serie tenemos dos sidebars, uno en el lateral y otro en la parte inferior, que podemos registrar en la misma función-gancho en el archivo functions.php.

  • function sidebars_init() {
  • register_sidebar(array(
  • 'name' => __('Sidebar principal', 'mmfilesi-bones'),
  • 'description' => 'Sidebar principal',
  • 'id' => 'sidebar-principal',
  • 'before_widget' => '<li class="sidebar_widget_lateral" id="%1$s">',
  • 'after_widget' => '</li>',
  • 'before_title' => '<h5>',
  • 'after_title' => '</h5>',
  • ));
  • register_sidebar(array(
  • 'name' => __('Sidebar inferior', 'mmfilesi-bones'),
  • 'description' => 'Sidebar inferior',
  • 'id' => 'sidebar-inferior',
  • 'before_widget' => '<li class="sidebar_widget_inferior" id="%1$s">',
  • 'after_widget' => '</li>',
  • 'before_title' => '<h5>',
  • 'after_title' => '</h5>',
  • ));
  • }
  • add_action( 'widgets_init', 'sidebars_init' );

(Con id="%1s" llamamos a una variable global que va generando los id de cada widget dinámicamente).

Ahora hay que situar los dos sidebar en los respectivos archivos, para lo cual se utilizan dos funciones:

  1. is_active_sidebar(): que evalúa si un sidebar tiene algún widget definido en el escritorio
  2. y dinamic_sidebar(): que se encarga de llamar al sidebar.

Así, en sidebar.php, donde habíamos puesto «Aquí irá la columna secundaria o sidebar», escribimos:

  • <?php if ( is_active_sidebar( 'sidebar-principal' ) ) : ?>
  • <ul>
  • <?php dynamic_sidebar( 'sidebar-principal' ); ?>
  • </ul>
  • <?php endif; ?>

Y en sidebar-inferior.php:

  • <?php if ( is_active_sidebar( 'sidebar-inferior' ) ) : ?>
  • <ul>
  • <?php dynamic_sidebar( 'sidebar-inferior' ); ?>
  • </ul>
  • <?php endif; ?>

CSS + Responsive

Ya tenemos los dos sidebar funcionando, pero ahora hay que quitar los bolinches y los márgenes de las listas para que no se advierta que son listas:

  • .listas_widget {
  • list-style-type: none;
  • margin: 0;
  • overflow: hidden;
  • }

Además, como el inferior es horizontal, podemos flotar los elementos (de ahí que antes necesitáramos poner overflow: hidden en el contenedor).

  • .sidebar_widget_inferior {
  • float:left;
  • width: 45%;
  • }

Por último añadimos los detalles responsive. Como el sidebar lateral pasa a la parte inferior en resoluciones menores, en esos casos le aplicamos el mismo estilo que el sidebar inferior.

  • @media screen and (max-width:820px){
  • .sidebar_widget_lateral {
  • float:left;
  • width: 45%;
  • }
  • }

Y cuando sea una resolución móvil, en vez de dos widget por fila, dejamos ya solo uno.

  • @media screen and (max-width:360px){
  • .sidebar_widget_lateral {
  • float:none;
  • width: 100%;
  • }
  • .sidebar_widget_inferior {
  • float:none;
  • width: 100%;
  • }
  • }

¿Sencillo, no?

Como siempre, todos los archivos están en git.

Feliz año nuevo.  🙂

|| Tags: ,

valoración de los lectores sobre WP desde cero (14): los sidebars

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • 5 sobre 5 (2 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

4 respuestas a “WP desde cero (14): los sidebars

  1. angel polo el dijo:

    Hola, muchas gracias por estos tutoriales, ya he terminado de construir el tema siguiendo los pasos que nos das, pero tengo una pregunta por que ahora estoy intentando instalar un slider a mi web, he probado con nivo slider y con meta slider (el q siempre uso) y no me funciona, pense en un pricipio que era algun error mio, asi que use el tema que pusiste en github, tambien me daba error. Mi pregunta es si hay que poner alguna funcion o algo paracido para que los widgets de sliders funcionen como en el resto de temas. Muchas gracias

  2. marcos el dijo:

    Muchas gracias ángel.

    Noooo! : ) El tema que hay en git es para ir haciendo este tutorial y NO está acabado, ni de lejos. No te va a funcionar nada, lo siento. De todas maneras, a ver si se me pasa este achuchón de curro y puedo retomarlo y terminarlo ya del tirón.

    Abrazos

  3. angel polo el dijo:

    ok, entonces esperare a los siguientes tutoriales, muchas gracias, te seguire en twitter para estar atento 😀