¿Tienes dos sidebars? ¿Tienes dos columnas de sidebar y, como a mí me pasó, te resulta imposible encontrar en internet cómo widgetear las dos a la vez?

Para widgetear el theme que uso ahora, tuve que widgetear dos columnas y fue una tortura buscar en internet. De hecho, la solución la encontré en foros, ya que Automattic nunca publicó un tutorial para dos sidebars.

Tutorial: “Cómo registrar dos sidebars para widgets”

Para entender este tutorial, necesitas haber leído el anterior a éste: “Cómo widgetear tu theme de Wordpress”.

Si ya lo has leído, ¿a qué esperas? ¡Haz click en leer más para ver el tutorial!

  • Si tu sidebar es desordenado: (para sidebars ordenados, más abajo)

Para este tutorial tomaremos un sólo ejemplo de sidebar: el del theme que uso en Sensei 21, “Leia Theme”, por Kapikua.

El sidebar es así:

<div id=”izquierda“>
<ul>
<li><h2>Categorias</h2>
<ul>
<?php wp_list_cats(); ?>
</ul>
</li>
</ul>
<ul>
<?php wp_list_pages(’title_li=<h2>Paginas</h2>’ ); ?>
</ul>
</div>

<div id=”derecha“>
<ul>
<?php get_links_list(); ?>
</ul>
</div>

Aunque este sidebar es de estructura desordenada, puede aplicarse este sistema a cualquier tipo de sidebar, siempre y cuando se sigan los parámetros que mencioné en el anterior tutorial general.

En este sidebar se aprecian dos mini-sidebars: “izquierda”, y “derecha”, en negrita, definidos por etiquetas <div>.

Si tu sidebar es desordenado y tiene dos sub-sidebars, tendrás que crear un functions.php que será así:

<?php
if ( function_exists(’register_sidebar’) ) {
register_sidebar(array(
‘before_widget’ => ‘<ul> <li>’,
‘after_widget’ => ‘</li> </ul>’,
‘before_title’ => ‘<h2>’,
‘after_title’ => ‘</h2>’,
‘name’=>’izquierda’,
));
register_sidebar(array(
‘before_widget’ => ‘<ul> <li>’,
‘after_widget’ => ‘</li> </ul>’,
‘before_title’ => ‘<h2>’,
‘after_title’ => ‘</h2>’,
‘name’=>’derecha’,
));
}
?>

En este functions.php, especifiqué las condiciones para los dos sidebars. Se puede ver que hay dos secciones. una de name “izquierda” y otra de name “derecha”. Para que el functions.php funcione con tu sidebar, deberás acomodar este código a las condiciones necesarias de tu sidebar. Deberás también acordarte de poner, en el campo “name”, el nombre correcto de tu sidebar para que se relacionen.

Después, tendrás que insertar un trozo de código en el propio sidebar. Toma nota de las partes en negrita:

<div id=”izquierda”>
<?php if ( !function_exists(’dynamic_sidebar’)
|| !dynamic_sidebar(izquierda) ) : ?>

<ul>
<li><h2>Categorias</h2>
<ul>
<?php wp_list_cats(); ?>
</ul>
</li>
</ul>
<ul>
<?php wp_list_pages(’title_li=<h2>Paginas</h2>’ ); ?>
</ul>

<?php endif; ?>
</div>

<div id=”derecha”>
<?php if ( !function_exists(’dynamic_sidebar’)
|| !dynamic_sidebar(derecha) ) : ?>
<ul>
<?php get_links_list(); ?>
</ul>
<?php endif; ?>
</div>

Las partes en negrita son la relación PHP que necesitas hacer para que se relacione con el functions.php. Toma nota de la parte que dice “dynamic_sidebar(derecha)” o izquierda. Esos nombres se corresponden con los que hay en functions.php. Los nombres deben ser respectivos. Si no, Wordpress no los podrá correlacionar.

¡Ya está! Ahora en tu Sidebar Widgets aparecerán dos columnas para colocar widgets.

Si tu sidebar es ordenado, te conviene más la siguiente sección:

  • Si tu sidebar es ordenado:

¿Te acuerdas de cómo era el functions.php de los sidebars ordenados? Era simplemente:

<?php
if ( function_exists(’register_sidebar’) )
register_sidebar();
?>

Si quieres registrar dos sidebars en vez de una, deberás cambiar el valor que hay en register_sidebar(); con el número de sidebars que quieres registrar. Por ejemplo, si tienes dos sidebars, pondrás un 2:

<?php
if ( function_exists(’register_sidebar’) )
register_sidebar(2);
?>

Después, el trozo de código del sidebar deberá lucir de la siguiente forma. Toma nota de las partes en negrita:

<ul id=”sidebar”>
<?php if ( !function_exists(’dynamic_sidebar’)
|| !dynamic_sidebar(1) ) : ?>
<li id=”about”>
<h2>About</h2>
<p>This is my blog.</p>
</li>
<li id=”links”>
<h2>Links</h2>
<ul>
<li><a href=”http://example.com”>Example</a></li>
</ul>
</li>
<?php endif; ?>
</ul>

¿Ves el 1 en rojo? Eso relaciona tu sidebar numero 1 con el functions.php y lo define como el sidebar numero 1. En tu otro sidebar, deberás poner el mismo código pero con un 2.

¡Ya está! Si quieres más sidebars, cambia el número en functions.php y después, a cada sidebar, añadele un numero distinto dentro del rango de sidebars que registraste. Por ejemplo: si registraste el numero 3 en functions.php, a tu sidebar numero ponle 1, a la dos el 2, y a la tres, el 3. (Que explicación tan científica).

Espero que este tutorial haya sido de utilidad para todos aquellos que les gusta manipular Wordpress y acomodar los themes a su estilo de trabajo. ;-)

Para volver a Sensei 21 y ver más tutoriales, click aquí.