Una característica muy importante de WordPress es el poder añadir funcionalidades en zonas específicas del código por medio de widgets, pero estos widgets necesitan un lugar donde estar, un hábitat, y ese lugar son los sidebars, que pueden o no estar en la barra lateral que como veremos en esta entrada son muy fáciles de configurar y de colocar en diferentes lugares de nuestro proyecto según nuestras preferencias, de modo que vamos a aprender a añadir sidebars.

En el panel de control dentro de la sección apariencia debería aparecer widgets, pero no lo hace en nuestro tema, eso es debido a que al igual que hicimos para los menús, que registrarlos, de modo que nos vamos a nuestro archivo functions.php y añadimos el siguiente código:

function voyager_register_sidebars(){
	register_sidebar(array(
		'name' 	=> __('Sidebar principal', 'vo'),
		'id'	=> 'main_sidebar',
		'description' => __('Este es el sidebar principal' , 'vo'),
		'before_widget' => '<div id="%1$s" class="widget %2$s">',
		'after_widget'	=> '</div>',
		'before_title'	=> '<h3 class="widget-title">',
		'after_title'	=> '</h3>' 
	));
}

add_action('widgets_init', 'voyager_register_sidebars');

Si lo analizamos veremos que hemos hecho lo de siempre, añadir una acción por medio de add_action, donde hemos dicho que utilice la función de wordpress widgets_init y que lo haga a través de voyager_register_sidebars (nuestra función).

Una vez ya dentro de la función personalizada, lo que hemos hecho es registrar nuestra área de widgets, para ello le hemos dado un nombre, una id que nos servirá para identificar el lugar donde queremos que aparezca nuestro sidebar, una descripción que aparecerá en la zona de widgets del panel de control y luego aparecen dos parejas de before y after…:

• before y after widget: estos dos elementos del array nos sirven para definir que vamos a poner antes y después del widget, generalmente es un div con unas clases predefinidas, tal y como vemos, aunque aquí le estamos dando dinamismo al nombre para identificar un widget de otro, para por ejemplo modificarlos en el css.
• before y after title: los widgets tienen un título y al igual que antes podemos darle estilos o encerrarlos entre etiquetas con sus respectivas clases, ids…

Con esto aun no hemos logrado añadir sidebars al tema pero ya hemos hecho la mitad del trabajo, ya que ahora si miramos el panel de control en apariencia ya si nos aparece la zona de widgets y si hacemos click ya podemos ver cómo aparece la zona con nuestra descripción y poder añadirle lo que deseemos.

Pero aunque los añadamos nuestro código es incapaz aún de mostrarlos, esto es debido a que nuestro archivo sidebar.php es estático y debemos de adaptarlo para nuestras necesidades, de modo que vamos a abrirlo y a editarlo de la siguiente forma:

<aside>
	<?php if( is_active_sidebar('main_sidebar')){ dynamic_sidebar('main_sidebar'); }else{ ?>
<div class="widget">
<h3 class="widget title"><?php _e('Buscar', 'vo') ?></h3>
                   <?php get_search_form();?>
	           </div>
	<?php } ?>
</aside>

Con este código  lo que hace en primer lugar es comprobar que el sidebar está activo y si lo está lo construye por medio de la función dynamic_sidebar(), observemos que tanto esta función como is_active_sidebar(), reciben como parámetro el id de nuestro sidebar registrado anteriormente.

En caso de que el sidebar no esté activo, lo que nuestro tema va a hacer es introducir un widget que será simplemente un buscador por medio de get_search_form().

Añadiendo más sidebars

De esta forma podemos añadir sidebars en nuestro tema, como podéis ver, es muy sencillo extrapolarlo a diferentes lugares de nuestro tema, darle estilos…

Para añadir más sidebars lo que debemos de hacer en primer lugar es registrar el nuevo sidebar dentro de nuestro archivo functions.php en la función de registro y siempre dándole una id diferente a cada uno:

function voyager_register_sidebars(){
	register_sidebar(array(
		'name' 	=> __('Sidebar principal', 'vo'),
		'id'	=> 'main_sidebar',
		'description' => __('Este es el sidebar principal' , 'vo'),
		'before_widget' => '<div id="%1$s" class="widget %2$s">',
		'after_widget'	=> '</div>',
		'before_title'	=> '<h3 class="widget-title">',
		'after_title'	=> '</h3>' 
	));

	register_sidebar(array(
		'name' 	=> __('Segundo', 'vo'),
		'id'	=> 'second_sidebar',
		'description' => __('Este es el segundo sidebar' , 'vo'),
		'before_widget' => '<div id="%1$s" class="widget %2$s">',
		'after_widget'	=> '</div>',
		'before_title'	=> '<h3 class="widget-title">',
		'after_title'	=> '</h3>' 
	));

}

add_action('widgets_init', 'voyager_register_sidebars');

Una ves que tenemos esto WP ya es reconoce los dos sidebars y podemos darles funcionalidad pero sigue sin poder leerlos para ello en el archivo sidebar.php debemos de repetir el bucle para poder leerlo quedando de la siguiente forma:

<aside>
	<?php if( is_active_sidebar('main_sidebar')){ dynamic_sidebar('main_sidebar'); }else{ ?>
<div class="widget">
<h3 class="widget title"><?php _e('Buscar', 'vo') ?></h3>
			<?php get_search_form();?>
		</div>
	<?php } ?>
	<?php if( is_active_sidebar('second_sidebar')){ dynamic_sidebar('second_sidebar'); }else{ ?>
<div class="widget">
<h3 class="widget title"><?php _e('Buscar', 'vo') ?></h3>
			<?php get_search_form();?>
		</div>
	<?php } ?>
</aside>

Pero esto puede resultar un tanto soso, ya que si tenemos que colocar los sidebars en el mismo archivo aparecerán en el mismo sitio unos después de otros o al menos como poco no nos permitirá hacer demasiado con ellos.

Afortunadamente WordPress tiene una forma de solventar esto y es que podemos crear más archivos de sidebars y llamarlos fácilmente…

Lo único que tenemos que hacer es crear un nuevo archivo que se llame sidebar-[loquesea].php por ejemplo; sidebar-dos.php y a la hora de llamarlo pasarle el sufijo como un argumento de la siguiente forma

get_sidebar('dos');

De este modo podemos hacer los sidebar que queramos y colocarlo donde lo necesitemos. Naturalmente el nuevo archivo debe de tener el bucle correspondiente, clases… para que todo funcione correctamente.

En la siguiente entrada de esta serie ya vamos a tocar el loop de nuestro tema para que aparezcan las entradas… Como siempre si te ha parecido interesante, comenta, comparte…