Tecnología y Coaching para Emprendedores

WordPress: Añade Sidebars y Widgets en el Footer

wordpress

No creáis que estos días festivos de Semana Santa me he ido de vacaciones o a hacer alpinismo, qué va, me los he pasado cerrada en casa delante de esta pantalla averiguando como crear mi propia plantilla en WordPress. Utilizo el  framework Thematic, en el que he creado un child theme. A continuación os explico cómo añadir sidebars y widgets al footer de Thematic, aunque lo podéis aplicar a otros frameworks o plantillas.
 

1. Añade barras laterales al footer

Si utilizas el framework Thematic, es fundamental que copies el archivo functions.php a la carpeta en que tengas tu child theme. Nunca, nunca, nunca modifiques los archivos del parent theme de Thematic. Haz una copia y guárdala en la carpeta de tu child theme. Así que si usamos Thematic, lo primero que hacemos, si no lo hemos hecho ya, es copiar el archivo functions.php en la carpeta de nuestro tema.

Primero de todo, hemos de registrar nuestras barras laterales.Para registrarlas, abrimos functions.php y añadimos este código:


<?php 
   register_sidebar(array('name'=>'footer_sidebar1'));
   register_sidebar(array('name'=>'footer_sidebar2'));
   register_sidebar(array('name'=>'footer_sidebar3'));

<?

 
Ahora insertamos las barras laterales en nuestro tema. Justo debajo de <div id=”footer”> añadimos:

&lt;div id=&quot;footer_sidebar&quot; class=&quot;secondary&quot;&gt;
    
   &lt;div id=&quot;footer_sidebar1&quot;&gt;
      &lt;?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(1) ) : ?&gt;
      &lt;?php endif; ?&gt;
   &lt;/div&gt;

   &lt;div id=&quot;footer_sidebar2&quot;&gt;
     &lt;?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(2) ) : ?&gt;
     &lt;?php endif; ?&gt;
   &lt;/div&gt;

   &lt;div id=&quot;footer_sidebar3&quot;&gt;
      &lt;?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(3) ) : ?&gt;
      &lt;?php endif; ?&gt;
   &lt;/div&gt;

&lt;/div&gt;

 

Si utilizamos el framework Thematic, es importante desactivar thematic_footer(); o eliminarlo, ya que sino tendremos problemas con el margen inferior de nuestro footer.

El siguiente paso será dar estilo a cada una de las barras laterales, para ello utilizaremos lógicamente CSS. Aquí el código base que podéis retocar según vuestras necesidades:

#footer_sidebar {
  display:block;
  height: 270px;
  width:960px;
  margin: 0 auto;
  padding-top:20px;
}

#footer_sidebar1 {
  float: left;
  width: 300px;
  margin-right:27px;
}

#footer_sidebar2 {
  float: left;
  width: 300px;
  margin-right:27px;
}

#footer_sidebar3 {
  float: left;
  width: 300px;
}

Ahora ya tenemos nuestras barras laterales creadas, pero todavía no están listas para insertar widgets.

  

2. Insertar widgets en las barras laterales

Una vez tenemos nuestras barras laterales creadas, nuestro objetivos es poder insertar widgets desde la interfaz de WordPress. Así, lo que haremos es crear el código que nos permita insertar widgets desde el panel de administración de WordPress. Para ello, volvemos a nuestro fichero functions.php e insertamos el siguiente código:

&lt;?php if ( !function_exists('dynamic_sidebar')
    || !dynamic_sidebar('footer_sidebar1') ) : ?&gt;
&lt;?php endif; ?&gt;

&lt;?php if ( !function_exists('dynamic_sidebar')
    || !dynamic_sidebar('footer_sidebar2') ) : ?&gt;
&lt;?php endif; ?&gt;

&lt;?php if ( !function_exists('dynamic_sidebar')
    || !dynamic_sidebar('footer_sidebar3') ) : ?&gt;
&lt;?php endif; ?&gt;

Si ahora vamos a nuestro planel de administración de WordPress, a Apariencia -> Widgets, veremos que aparecen tres opciones más llamadas footer_sidebar1, footer_sidebar2, footer_sidebar3.

Para cualquier duda, poneros en contacto conmigo. Espero que este tutorial os haya sido tan útil y gratificante como para mi ha sido descubrir la manera de crear las barras laterales listas para widgets.


Comentarios

  • Elías

    Pueden ser sidebars de texto? para poner un sidebar de texto en cualquier plantilla y administrar el texto desde panel de aministración/menús/sidebars?

    • Sandra

       No, en principio es para crear zonas listas para widgets