Crear dos o más sidebars en WordPress

Beware: This post was published 9 years ago and its content may be outdated.

Ahora mismo la mayoría de los themes de WordPress ya tienen una sidebar dinámica (con la que puedes añadir los elementos que desees que se vean al entrar a tu blog desde el panel de administración).

Sin embargo en algunas ocasiones tener una única sidebar no es suficiente. Por ejemplo, tal vez queremos tener una sidebar para los artículos, otra para las páginas, otra para las búsquedas y los archivos, otra para el index, etc.

En este tutorial os explicaré cómo añadir no sólo una sidebar, sino todas las que queráis, además de explicar un poco cómo darle formato a la sidebar.

El primer paso es elegir el theme en el que vamos a trabajar. Yo usaré el theme classic, que viene por defecto en WordPress y que no es muy difícil de modificar.

Nota: Todos los archivos a modificar se encuentran en la carpeta classic, dentro de themes (en wp-content).

La idea es la siguiente: Queremos una sidebars para el index, una para las páginas y los artículos individuales, otra para las búsquedas y los archivos y una última compartida entre artículos, páginas, búsquedas y archivos.

Como las sidebars siempre ocuparán la misma posición únicamente editaremos el archivo sidebar.php y functions.php.

El primer archivo contiene el código de la sidebar, mientras que el segundo el código que las define y permite que muestren los widgets.

Sidebar-index

Abramos sidebar.php. Vemos 43 líneas en el archivo, 38 de ellas con código y 5 en blanco.

Entre las líneas 6 y 7 encontraremos el siguiente código:


<?php /* Widgetized sidebar, if you have the plugin installed. */
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>

Este código es el que le dice a WordPress que aquí es donde debe mostrar la sidebar X. En este caso al sólo haber una sidebar no llama a ninguna en concreto.

Unas líneas más abajo (en la línea 37) vemos el siguiente código:

<?php endif; ?>

Este código le avisa a WordPress de que hasta aquí llega la sidebar dinámica.

Veréis que entre ambas líneas hay más código, este código se ejecutará en caso de que no tengamos ningún widget activado, mostrando una lista de páginas, categorías, un cuadro de búsqueda, el archivo y links de meta.

Comenzaremos eliminando estos widgets, ya que si no ponemos widgets en el panel de administración es porque no queremos que se muestre nada.

Borramos (o comentamos) todo el código desde la línea 8 a la 36 (ambas incluídas). Con esto al no tener widgets activados en la sidebar no se mostrará nada.

El siguiente paso será definir las sidebars que queremos.

Abrimos el archivo functions.php.

Veremos el siguiente código:

<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '',
'after_title' => '',
));
?>

La primera línea indica que viene código PHP.
La segunda comprueba que existe la función de sidebars dinámicas.
La tercera define una nueva sidebar
Las líneas cuarta, quinta, sexta y séptima indican variables para la sidebar (explicadas más adelante).
La octava indica el final de la función.
La décima (la novena está en blanco) el final del código PHP.

Las variables que he mencionado antes le indican a WordPress el código que debe aparecer antes y después.

before_widget y after_widget indican el código que WordPress añadirá antes y después de cada widget, mientras que before_title y after_title indican el código que se mostrará antes y después del título del widet.

El próximo paso será darle un nombre a esta sidebar, que será la que se mostrará en el index, por eso la llamaremos sidebar-index.

En la línea 4 creamos una nueva línea y escribimos:

'name' => 'sidebar-index',

Con esto la sidebar pasará a llamarse sidebar-index, y para que WordPress la utilice en el index del blog habrá que editar de nuevo sidebar.php, así que lo abrimos.

Vamos a la línea 7 y sustituímos:

!dynamic_sidebar()

Por:

!dynamic_sidebar('sidebar-index')

Por ahora ya tenemos la primera sidebar definida.

Si os habéis fijado, cuando no tenemos widgets activos, vemos un cuadro blanco muy antiestético. En este paso lo eliminaremos y añadiremos una condición: la que hace que la sidebar se muestre sólo en el index.

En sidebar.php nos situamos en la primera línea y escribimos:

<?php if ( is_home() ) { ?>

Ahora vamos a la última y añadimos:

<?php } ?>

Con esto ya tenemos lista la sidebar del index del blog.

Preparando las demás sidebars

Continuaremos definiendo las demás sidebars en el archivo functions.php, así evitaremos tener que volver a editarlo. Lo abrimos.

En la segunda línea, al final, añadimos un corchete ( { ). En la lína 10 añadimos un cierre de corchete ( } ).

Todo el código que añadiremos ahora será antes del segundo corchete y después del )); .

Basicamente lo que haremos será copiar y pegar el código que define a sidebar-index, y luego modificaremos el nombre en cada caso.

Llamaremos a la sidebar de los artículos y las páginas sidebar-single, a la de las búsquedas y archivos, sidebar-search y a la compartida entre artículos, páginas, búsquedas y archivos, sidebar-compartida.

Después de copiar y pegar el código y modificar los nombres deberíamos tener este código en functions.php:

<?php
if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'name' => 'sidebar-index',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '',
'after_title' => '',
));
register_sidebar(array(
'name' => 'sidebar-single',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '',
'after_title' => '',
));
register_sidebar(array(
'name' => 'sidebar-search',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '',
'after_title' => '',
));
register_sidebar(array(
'name' => 'sidebar-compartida',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '',
'after_title' => '',
));
}
?>

Si lo tenemos podemos seguir, y si no basta con copiar el que veis.

Probad a entrar en el panel de administración: podréis ver que ahora tenéis 4 sidebars entre las que escoger.

Ya podemos cerrar el archivo functions.php, hemos completado todas las modificaciones necesarias en él.

Mostrando las sidebars

Vayamos a sidebar.php.

Editamos la primera línea y añadimos el resto de páginas en las que mostraremos sidebars, sustituyendo este código:

<?php if ( is_home() ) { ?>

Por este:

<?php if ( is_404() || is_category() || is_day() || is_month() || is_year() || is_search() || is_paged() || is_single() || is_page() || is_search() || is_home() ) { ?>

Ahora mostraremos la sidebar en todas las ocasiones que queríamos.

Tenemos que añadir la llamada al resto de sidebars, así que copiamos y pegamos el código que llama a la primera, pero cambiando el nombre, dejando así el archivo:

<?php if ( is_404() || is_category() || is_day() || is_month() || is_year() || is_search() || is_paged() || is_single() || is_page() || is_search() || is_home() ) { ?>
<!-- begin sidebar -->
<div id="menu">
<ul>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-index') ) : ?>
<?php endif; ?>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-single') ) : ?>
<?php endif; ?>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-search') ) : ?>
<?php endif; ?>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-compartida') ) : ?>
<?php endif; ?>
</ul>
</div>
<!-- end sidebar -->
<?php } ?>

Seguiremos añadiendo condiciones para evitar que se muestre una sidebar en la página que no debe. comenzaremos con sidebar-index. Añadimos una línea antes de:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-index') ) : ?>

En la que escribimos:

<?php if ( is_home() ) { ?>

Una par de líneas más abajo, después de:

<?php endif; ?>

Añadimos:

<?php } ?>

Con lo que nos quedaría:


<?php if ( is_home() ) { ?>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-index') ) : ?>
<?php endif; ?>
<?php } ?>

Ahora seguimos con sidebar-single. Tenemos que hacer una condición para que se muestre sólo en caso de ver un artículo o una página, así que añadimos antes de:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-single') ) : ?>

El siguiente código:

<?php if ( is_single() || is_page() ) { ?>

Y después de:

<?php endif; ?>

El correspondiente cierre de condición:

<?php } ?>

Nos quedan dos sidebars: sidebar-search y sidebar-compartida. Así que añadiremos antes de:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-search') ) : ?>

El código para comenzar la condición:

<?php if ( is_404() || is_category() || is_day() || is_month() || is_year() || is_search() || is_paged() || is_search() ) { ?>

Y después de:

<?php endif; ?>

El correspondiente cierre de condición:

<?php } ?>

Ya sólo nos queda sidebar-compartida, y como en las anteriores añadimos antes de:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-compartida') ) : ?>

Este código:


<?php if ( is_404() || is_category() || is_day() || is_month() || is_year() || is_search() || is_paged() || is_single() || is_page() || is_search() ) { ?>

Y después de:

<?php endif; ?>

El cierre de esta condición:

<?php } ?>

Y después de este último cierre ya tenemos completo el archivo sidebar.php, que debería quedar así:

<?php if ( is_404() || is_category() || is_day() || is_month() || is_year() || is_search() || is_paged() || is_single() || is_page() || is_search() || is_home() ) { ?>
<!-- begin sidebar -->
<div id="menu">
<ul>
<?php if ( is_home() ) { ?>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-index') ) : ?>
<?php endif; ?>
<?php } ?>
<?php if ( is_single() || is_page() ) { ?>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-single') ) : ?>
<?php endif; ?>
<?php } ?>
<?php if ( is_404() || is_category() || is_day() || is_month() || is_year() || is_search() || is_search() ) { ?>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-search') ) : ?>
<?php endif; ?>
<?php } ?>
<?php if ( is_404() || is_category() || is_day() || is_month() || is_year() || is_search() || is_single() || is_page() || is_search() ) { ?>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-compartida') ) : ?>
<?php endif; ?>
<?php } ?>
</ul>
</div>
<!-- end sidebar -->
<?php } ?>

¡Felicidades! Ya hemos convertido el theme classic en un theme con cuatro sidebars, una para cada ocasión.

Descargar el theme

Por último os dejo el link de descarga del nuevo theme classic.

Descargar.