En la entrada anterior vimos como hacer nuestro menú, ahora vamos a crearle los sidebars, de hecho la idea es crearle cinco. El sidebar lateral para las entras tipo blogs junto con las páginas que queramos que lo tengan, tres más en el footer, ya que es interesante ir teniendo información y widgets en él y otro en la cabecera por lo que podamos necesitar, como la típica barra superior con el número de teléfono, mail,  iconos sociales… y todas esas cosas que tanto le gusta a la gente marketing ahora que no nos oyen… 😉

Lo primero que tenemos que observar es que si entramos en nuestro panel de control con nuestra plantilla, tal y como la tenemos ahora mismo, activada, no nos aparecen los Widgets dentro de apariencia.

Esto se debe a que no tenemos registrados los sidebars dentro de nuestro archivo functions.php de modo que vamos a ello…

Registrando los sidebars

Para registrar los sidebars tenemos que abrir el archivo functions.php de nuestra plantilla y añadimos el siguiente código:

//carga de los sidebars
function wpb4_register_sidebars(){
    register_sidebar(array(
        'name'  => __('Sidebar principal', 'wpb4prin'),
        'id'    => 'main_sidebar',
        'description' => __('Este es el sidebar principal' , 'wpb4prin'),
        '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'  => __('Sidebar cabecera', 'wpb4cab'),
        'id'    => 'cabecera_sidebar',
        'description' => __('Este es el sidebar de la cabecera' , 'wpb4cab'),
        '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'  => __('Sidebar Footer izquierdo', 'wpb4fizq'),
        'id'    => 'fooizq_sidebar',
        'description' => __('Este es el sidebar de footer izquierdo' , 'wpb4fizq'),
        'before_widget' => '<div id="%1$s" class="widget %2$s sidefooter">',
        'after_widget'  => '</div>',
        'before_title'  => '<h3 class="widget-title pie-title">',
        'after_title'   => '</h3>'   
    ));
    register_sidebar(array(
        'name'  => __('Sidebar Footer central', 'wpb4fcen'),
        'id'    => 'foocent_sidebar',
        'description' => __('Este es el sidebar del footer central' , 'wpb4fcen'),
        'before_widget' => '<div id="%1$s" class="widget %2$s sidefooter">',
        'after_widget'  => '</div>',
        'before_title'  => '<h3 class="widget-title pie-title">',
        'after_title'   => '</h3>'   
    ));
    register_sidebar(array(
        'name'  => __('Sidebar Footer derecho', 'wpb4fder'),
        'id'    => 'fooder_sidebar',
        'description' => __('Este es el sidebar del footer derecho' , 'wpb4fder'),
        'before_widget' => '<div id="%1$s" class="widget %2$s sidefooter">',
        'after_widget'  => '</div>',
        'before_title'  => '<h3 class="widget-title pie-title">',
        'after_title'   => '</h3>'   
    ));
}

add_action('widgets_init', 'wpb4_register_sidebars');

En este código añadimos un action donde le decimos que utilice la función de WordPress widgets_init para registrar los sidebars.

Una vez dentro de la función de registro lo que hacemos es registrar todas nuestras areas de widgets dándoles un nombre y un id que nos servirá para identificar el lugar donde queremos que aparezcan los sidebars.

Añadimos también una descripción que aparece en la zona de widgets de nuestro panel de control, y finalmente los before y after tanto del widget como del title para abrir y cerrar etiquetas con clases, ids… (Si quieres saber más sobre esto te invito a que entres en este enlace donde escribí más detenidamente sobre ello)

Muy bien ya tenemos registrados nuestras zonas de aside y de hecho WordPress ya nos permite ver su creación en el panel de control pero aunque los pongamos nuestra plantilla aún es incapaz de mostrarlo, de modo que vamos a hacer que los muestre…

sidebar en el header

Vamos a abrir nuestro archivo header.php y vamos a dejarlo de este modo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="<?php bloginfo('charset')?>">
    <title><?php wp_title(' | ', true, 'right');?><?php bloginfo('name')?></title>
    <!--Introducir el css-->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
	<!--Introducir el javascript-->
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    <?php wp_head();?>
</head>
<body>
	<?php get_template_part( 'template-parts/header/sidebar-cabecera', ''); ?>
	<header>
		<h3><?php bloginfo('name');?></h3>
        <h4><?php bloginfo('description');?></h4>
        <?php get_template_part( 'template-parts/header/nav', ''); ?>
	</header>
	<main>

¿Recordáis cuando hicimos que el header fuera módular? bueno pues como veis hemos vuelto a utilizar la misma técnica que también usaremos en el footer un poco más abajo.

Ahora crearemos el archivo sidebar-cabecera.php en la carpeta template-parts/cabecera que es donde está apuntando la llamada al sidebar y le pondremos el siguiente código:

<?php 
if( is_active_sidebar('cabecera_sidebar')){ ?>
	<div class="barra_superior">
		<?php dynamic_sidebar('cabecera_sidebar'); ?>
	</div>
	<?php
}else{
	//contenido si queremos que aparezca en caso de que el sidebar esté vacio
}?>

Aquí ya estamos haciendo que aparezca el contenido del sidebar de cabecera en la plantilla. ¿Mola eh? pues vamos a por sidebar lateral…

sidebar principal

El sidebar lateral funciona de forma similar al del header, de hecho todos tienen el mismo procedimiento, pero en este caso no vamos a llamar a ningún sidebar, vamos a introducir el código que muestro a continuación en el archivo sidebar.php

<aside class="col-md-4 sidebar_lateral">
	<?php 
	if( is_active_sidebar('main_sidebar')){ ?>
		<?php dynamic_sidebar('main_sidebar');
	}else{
		//contenido si queremos que aparezca en caso de que el sidebar esté vacio
	}?>
</aside>

De esta forma tan simple ya está funcionando el sidebar principal… ahora vamos a por el que mas mola.

sidebars en el footer

En este caso vamos a poner varios sidebars en el footer y los vamos a poner en un archivo modular del mismo modo que hemos hecho con el header, pero además vamos a poner 3 sidebars en el mismo archivo… y es super sencillo.

Primero vamos a crear una carpeta llamada template-parts/footer para tener ahí las partes de nuestro footer de forma organizada y vamos a crear dentro un archivo llamado sidebar-footer.php con el siguiente contenido.

<div class="col-md-4">
	<?php 
	if( is_active_sidebar('fooizq_sidebar')){ ?>
		<?php dynamic_sidebar('fooizq_sidebar');
	}else{
		//contenido si queremos que aparezca en caso de que el sidebar esté vacio
	}?>
</div>
<div class="col-md-4">
	<?php 
	if( is_active_sidebar('foocent_sidebar')){ ?>
		<?php dynamic_sidebar('foocent_sidebar');
	}else{
		//contenido si queremos que aparezca en caso de que el sidebar esté vacio
	}?>
</div>
<div class="col-md-4">
	<?php 
	if( is_active_sidebar('fooder_sidebar')){ ?>
		<?php dynamic_sidebar('fooder_sidebar');
	}else{
		//contenido si queremos que aparezca en caso de que el sidebar esté vacio
	}?>
</div>

Naturalmente nuestro footer.php debe de llamar a este archivo de modo que quedaría de las siguiente manera:

	</main>
	<footer class="container-fluid">
		<div class="row">
			<?php get_template_part( 'template-parts/footer/sidebar-footer', ''); ?>
		</div>
		&copy; <?= date('Y');?> <?php bloginfo('name');?>
	</footer>
	<?php wp_footer(); ?>
</body>
</html>

Cómo puedes ver es muy sencillo y adaptable apenas que imagines un poco puedes crear más sidebars, eliminarlos, maquetarlos a tu gusto y controlarlos como necesites sin ningún tipo de problema.

Espero que te haya servido esta entrada y si te ha gustado compartela y como siempre ya sabe que hay algunos banners por la web, ¡si le das click ayudarás a que siga creando contenido!