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:

Añadir una nueva zona de widgets en Wordpress 01 Añadir una zona nueva de widgets en Wordpress

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.

Añadir una nueva zona de widgets en Wordpress 02 Añadir una zona nueva de widgets en Wordpress

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

300x250 Añadir una zona nueva de widgets en Wordpress

250x250 es ES Añadir una zona nueva de widgets en Wordpress

Dime qué te ha parecido el artículo...

rating off Añadir una zona nueva de widgets en Wordpressrating off Añadir una zona nueva de widgets en Wordpressrating off Añadir una zona nueva de widgets en Wordpressrating off Añadir una zona nueva de widgets en Wordpressrating off Añadir una zona nueva de widgets en Wordpress (Ninguna valoración todavía)
loading Añadir una zona nueva de widgets en WordpressCargando…
Advertisements

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies

Veo que te gusta mi Blog...

Si te ha parecido interesante este artículo, no esperes a suscribirte a mi blog. Cuando vuelva a escribir otro seguro que te interesará y no desearás no haberte enterado. Puedes suscribirte con total tranquilidad de que no recibirás spam. Lo odio igual que tu. Solo quiero que aprendas cosas nuevas y te sientas agusto con mis artículos. ¡Gracias!

¡Gracias por suscribirte!

Pin It on Pinterest

Share This

Compártelo

¡Comparte este artículo con tus amigos!