SummArg | Cursos y recursos para webmasters

14/02/2011

Cómo crear áreas para widgets en diferentes sidebars?

WordPress nos permite manejar widgets con solo arrastrar y soltar desde el panel de administrador. ¿Pero qué sucede si el theme que utilizamos no trae esa función o necesitamos agregar mas sidebars? Aprendamos a generar un área de widgets y a utilizar condicionales para obtener sidebars diferentes para cada sección.

Agregar un área de widgets a nuestra sidebar

Abrimos el archivo functions.php y editamos o, en caso de no tenerlo, creamos un archivo y colocamos lo siguiente dentro:

<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Sidebar',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
?>

Básicamente lo que hacemos es iniciar el widget, colocarle un nombre, indicar si va a tener alguna clase antes y después del elemento, y que etiquetas utilizaremos para el título. En nuestro caso solamente indicaremos que el título del widget irá dentro de tags <h2>.

Ahora en nuestro archivo sidebar.php añadimos:

<div id="sidebar">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Sidebar") ) :  endif; ?>
</div><!-- end of sidebar -->

Ya con este paso podremos ver el área para manejar los widgets en Escritorio > Apariencia > Widgets.

Crear sidebars diferentes para cada sección

Digamos que están trabajando con dos páginas y una categoría. Utilicemos el mismo archivo sidebar.php y agreguemos condicionales para separar las barras laterales a cargar. La primer porción de la sidebar se mostrará solo si se está mostrando algún contenido dentro de la categoría 3 (pueden ser entradas o subcategorías).

<?php if (in_category(3)) { ?>
<div id="sidebar">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Sidebar") ) :  endif; ?>
</div><!-- end of sidebar -->
<?php } else { ?>
<div id="sidebar">
Blablabla
</div>
<?php } ?>

Lo que hicimos es indicar que si el contenido está dentro de la categoría 3, entonces que muestre el área de widgets llamada “Sidebar”, si no estamos en dicha categoría entonces que muestre lo que se encuentra entre llaves luego del else.

Ahora debemos agregar las secciones para las dos páginas que mencionamos antes. En esta sección del codex en WordPress.org van a encontrar todos los conditional tags que podrían necesitar para armar sus propios condicionales.

<?php if (in_category(3)) { ?>
<div id="sidebar">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Sidebar") ) :  endif; ?>
</div><!-- end of sidebar -->
<?php elseif (is_page('Contactenos')) { ?>
<div id="sidebar">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Contactenos") ) :  endif; ?>
</div><!-- end of sidebar -->
<?php elseif (is_page('2')) { ?>
<div id="sidebar">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Otra sidebar") ) :  endif; ?>
</div><!-- end of sidebar -->
<?php } else { ?>
<div id="sidebar">
Blablabla<
</div>
<?php } ?>

Ahora agregamos dos sidebars mas, una para la página “Contáctenos” y otra para la página con ID 2. Verán en el codex que pueden referirse a las páginas por nombre, slug (permalink) o ID.

Sin embargo necesitamos declarar estas dos nuevas áreas de widgets en el functions.php para que funcionen:

<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Sidebar',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Contactenos',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Otra sidebar',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
?>

Ahora si podemos arrastrar y soltar los widgets en las secciones deseadas. Podemos utilizar cuantas sidebars personalizadas querramos y a todas ellas colocarles áreas de widgets.

Dejar un comentario