Seguro que alguna vez, realizando un proyecto web con Wordpress, hemos echado en falta un área de widget, en una zona de nuestra página y el tema con el trabajabamos, no nos la proporcionaba. Bien, pues vamos a ver como crear nuestra propia área de widget personalizada, en la zona de nuestra página que deseemos y además responsiva.
Vamos a ello. En este ejemplo vamos a crear el área de widget en el footer, y va a ser a 4 columnas. Los ficheros que entran en juego son: functions.php, footer.php y style.css.
En el fichero functions.php, vamos a definir el nombre que van a tener las zonas de widget, en el escritorio de wordpress y la etiqueta que va a englobar el título del widget. Este sería el código que habría que añadir:
[php toolbar=”true”]
if ( function_exists(‘register_sidebar’) )
{
register_sidebar(array(‘name’ => ‘Footer Left’,’before_widget’ => ”,’after_widget’ => ”,’before_title’ => ‘<h3>’,’after_title’ => ‘</h3>’));
register_sidebar(array(‘name’ => ‘Footer Center 1′,’before_widget’ => ”,’after_widget’ => ”,’before_title’ => ‘<h3>’,’after_title’ => ‘</h3>’));
register_sidebar(array(‘name’ => ‘Footer Center 2′,’before_widget’ => ”,’after_widget’ => ”,’before_title’ => ‘<h3>’,’after_title’ => ‘</h3>’));
register_sidebar(array(‘name’ => ‘Footer Right’,’before_widget’ => ”,’after_widget’ => ”,’before_title’ => ‘<h3>’,’after_title’ => ‘</h3>’));}
[/php]
En el fichero footer.php, crearemos una capa para cada zona de widget y dentro el php para cargarla. El código sería este:
[php toolbar=”true”]
<div id="left-footer">
<?php
if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘Footer Left’) ) : ?>
<?php endif; ?>
</div>
<div id="center-footer">
<?php
if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘Footer Center 1’) ) : ?>
<?php endif; ?>
</div>
<div id="center2-footer">
<?php
if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘Footer Center 2’) ) : ?>
<?php endif; ?>
</div>
<div id="right-footer">
<?php
if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘Footer Right’) ) : ?>
<?php endif; ?>
</div>
[/php]
Por último vamos a darle los estilos necesarios para que el área de widget se comporte de manera responsiva. Introducimos esto en el fichero style.css
[css]
footer h3 {
color:#666;
text-align: center;
}
#left-footer, #center-footer,#center2-footer, #right-footer {
width:25%;
float:left;
padding:20px;
border-right:1px solid #808080;
height: 300px;
}
@media (max-width: 1024px) {
#left-footer, #center-footer,#center2-footer, #right-footer {
width:50%;
float:left;
}
}
@media (max-width: 485px) {
#left-footer, #center-footer,#center2-footer, #right-footer {
width:100%;
float:left;
}
}
[/css]