Crear área de widget responsive

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:

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>'));}

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:

<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>

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


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;

}

}

Deja una respuesta Cancelar la respuesta