Crear áreas para widgets

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 obtenersidebars 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 dewidgets llamada “Sidebar”, si no estamos en dicha categoría entonces que muestre lo que se encuentraentre 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 sidebarspersonalizadas querramos y a todas ellas colocarles áreas de widgets.

 

Fuente: SummArg

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: