Añadir una zona nueva de widgets en WordPress

En una web realizada con WordPress los Widgets son elemento fundamental para poder gestionar contenido diverso. En esta ocasión vamos a añadir una zona nueva de widgets en WordPress para esta plantilla.

El objetivo era conseguir que en el pie de la web pudiera colocar diversos elementos de publicidad. Todos quedarían alineados a la izquierda y tendrían el aspecto que podemos ver en la siguiente imagen.

El resultado ha sido este:

Para conseguirlo hay que tocar 3 ficheros de nuestro tema WordPress:

• functions.php
• footer.php
• style.css

Añadir esto al fichero functions.php de nuestro tema:

/* 
 * FOOTER - Diseño del footer en 3 columnas para widgets
 */

register_sidebar(array(
    'name' => 'Footer Widget Images',
    'id' => 'footer-images',
    'description' => 'First footer widget area',
    'before_widget' => '<div id="footer-widget-images">',
    'after_widget' => '</div>',
    'before_title' => '<h3>',
    'after_title' => '</h3>',
));

register_sidebar(array(
    'name' => 'Sidebar Backup',
    'id' => 'sidebar-backup',
    'description' => 'Guarda los widgets temporalmente aquí',
    'before_widget' => '<div>',
    'after_widget' => '</div>',
    'before_title' => '<h3>',
    'after_title' => '</h3>',
));

// Para desactivar el sidebar momentaneamente
//unregister_sidebar( 'footer-images' );

El resultado de añadir este código al fichero de funciones de nuestro tema es que en la administración de Widgets nos aparecerá ahora dos elementos más donde añadir widgets.

Tenéis que especificar un ID a cada sidebar. A este ID tendréis que hacerle referencia en el footer.php.

Como añadido, he creado una zona de Backup, para poder colocar ahí los widgets que no quiero mostrar de forma temporal pero de los que no quiero perder su configuración. De esta manera puedo recuperarlos cuando quiera y consigo que no sean visibles en la web.

Una vez que ya tenemos creado la zona de Widgets, ya opdemos añadirle contenido. En este caso práctico solo vamos a añadir widgets de imagen. En este momento todavía no serían visibles en la web. Para hacerlos visibles a los visitantes tenemos que tocar dos ficheros más.

Ahora hay que modificar el fichero footer.php:

<div id="footer" class="clearfix">

    <!-- Nueva area para widgets de logos publicitarios -->
    <div id="footer-widgets-images">
        <div id="footer-widget1-images">
            <?php if ( !function_exists('dynamic_sidebar')

            || !dynamic_sidebar('footer-images') ) : ?>
            <?php endif; ?>
        </div>
    </div>

Este código lo tendréis que adaptar según vuestra plantilla. Es la estructura general que debe tener. Solo tenéis que tener en cuenta el nombre que hayáis indicado en ID para que la hoja de estilos sepa que diseño aplicarle.

Y ahora los estilos. Vamos a definir el tamaño y el diseño que queremos. Vamos a hacerlo de ancho completo (que ocupe todo el ancho del footer) y que cada widget que añadamos quede alineado a la izquierda y uno al lado del otro.

/* Estilos para el footer de images para publicidad */
#footer-widgets-images {
	display: block;
	width:950px;
	margin-right:0;
}
#footer-widget-images {
	float: left;
	margin: 0 0 0 0px;
	padding: 10px 0px 0px 15px;
}

Y eso es todo. El resultado será como el que mostraba en la primera imagen. Como podéis ver, es algo sencillo y seguro que se os ocurre alguna cosa para añadir más zonas de contenido en vuestras web. Espero que os sirva.

Guardar

Guardar

Guardar

Guardar

Guardar