Actualmente, muchos temas para WordPress disponen de varias de áreas para widgets en el footer, con lo que puedes crear un «pie de página amplio» con múltiples áreas de widget una junto a otra. Es algo que utilizo en todos mis temas.
Pero ¿qué pasa si tu tema tiene cuatro áreas de widget y sólo desea tener tres? Si no tienes cuidado, terminarás con un antiestético hueco en el lateral derecho donde debería esta ubicado el cuarto widget vacío.
En este tutorial te mostraré cómo evitarlo usando una combinación de etiquetas condicionales en PHP y alguno de CSS orientado a objetos (OOCSS), que comprobará cuantas áreas de widget has utilizado y cambiará automáticamente los tamaños para que cada uno de ellos ocupen la proporción adecuada de la anchura total de la página.
Lo que vas a necesitar
Para seguir este tutorial, necesitarás:
- una instalación de WordPress para el desarrollo
- tu propio tema en el que añadiremos el código
- un editor de código
Registrar las áreas de widget
El primer paso es registrar las cuatro áreas de widget que ocuparán el pie de tu página. Si no dispones todavía de áreas de widget registradas, debes añadir este código al archivo functions.php:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
tutsplus_widgets_init() { // First footer widget area, located in the footer. Empty by default. register_sidebar( array( 'name' => __( 'First Footer Widget Area', 'tutsplus' ), 'id' => 'first-footer-widget-area', 'description' => __( 'The first footer widget area', 'tutsplus' ), 'before_widget' => '<div id="%1$s" class="widget-container %2$s">', 'after_widget' => '</div>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) ); // Second Footer Widget Area, located in the footer. Empty by default. register_sidebar( array( 'name' => __( 'Second Footer Widget Area', 'tutsplus' ), 'id' => 'second-footer-widget-area', 'description' => __( 'The second footer widget area', 'tutsplus' ), 'before_widget' => '<div id="%1$s" class="widget-container %2$s">', 'after_widget' => '</div>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) ); // Third Footer Widget Area, located in the footer. Empty by default. register_sidebar( array( 'name' => __( 'Third Footer Widget Area', 'tutsplus' ), 'id' => 'third-footer-widget-area', 'description' => __( 'The third footer widget area', 'tutsplus' ), 'before_widget' => '<div id="%1$s" class="widget-container %2$s">', 'after_widget' => '</div>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) ); // Fourth Footer Widget Area, located in the footer. Empty by default. register_sidebar( array( 'name' => __( 'Fourth Footer Widget Area', 'tutsplus' ), 'id' => 'fourth-footer-widget-area', 'description' => __( 'The fourth footer widget area', 'tutsplus' ), 'before_widget' => '<div id="%1$s" class="widget-container %2$s">', 'after_widget' => '</div>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) ); } // Register sidebars by running tutsplus_widgets_init() on the widgets_init hook. add_action( 'widgets_init', 'tutsplus_widgets_init' ); |
Esto agregará cuatro áreas de widget al footer de tu tema. Si visitas la sección de Widgets verás allí todos los que existen, junto con los que ya estaban registrados:
Añadir las áreas de widget a tu tema
Si añades ahora widgets a estas áreas de widget, no sucederá nada. Tienes que añadirlas al footer de tu tema. Voy a elaborar paso a paso el código que debes agregar al archivo de pie de página, añadiendo más controles para las diferentes cantidades de áreas de widget ocupadas a medida que vayamos avanzando.
Ten en cuenta que podrías necesitar modificar algunas clases y elementos que contiene el código del área de widget para que esté en consonancia con la estructura y el diseño de tu tema.
1. Verificar que no existan áreas de widget con contenido
El primer paso es verificar si no hay zonas de widget ocupadas, en cuyo caso no se debería mostrar nada. Abre el archivo footer.php de tu tema y agrega el siguiente código.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<footer> <?php /* The footer widget area is triggered if any of the areas * have widgets. So let's check that first. * * If none of the sidebars have widgets, then let's bail early. */ if ( ! is_active_sidebar( 'first-footer-widget-area' ) && ! is_active_sidebar( 'second-footer-widget-area' ) && ! is_active_sidebar( 'third-footer-widget-area' ) && ! is_active_sidebar( 'fourth-footer-widget-area' ) ) return; //end of all sidebar checks. endif;?> </footer> |
2. Comprobar si todas las áreas de widgets están ocupadas
A continuación, voy a verificar si todas las áreas de widgets tienen algún tipo de contenido. Si es así, el tema mostrará el contenido de los cuatro, cada uno de ellos consecutivamente al lado del otro y ocupando un cuarto del ancho de la pantalla. Voy agregar las clases para esto aquí, pero añadiré el CSS en mi hoja de estilo más tarde.
Después de la línea que contiene return; pero antes de la declaración endif; del código que acaba de añadir, agrega esto:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
if ( is_active_sidebar( 'first-footer-widget-area' ) && is_active_sidebar( 'second-footer-widget-area' ) && is_active_sidebar( 'third-footer-widget-area' ) && is_active_sidebar( 'fourth-footer-widget-area' ) ) : ?> <aside class="fatfooter" >role="complementary"> <div class="first quarter left widget-area"> <?php dynamic_sidebar( 'first-footer-widget-area' ); ?> </div><!-- .first .widget-area --> <div class="second quarter widget-area"> <?php dynamic_sidebar( 'second-footer-widget-area' ); ?> </div><!-- .second .widget-area --> <div class="third quarter widget-area"> <?php dynamic_sidebar( 'third-footer-widget-area' ); ?> </div><!-- .third .widget-area --> <div class="fourth quarter right widget-area"> <?php dynamic_sidebar( 'fourth-footer-widget-area' ); ?> </div><!-- .fourth .widget-area --> </aside><!-- #fatfooter --> |
Con esto conseguimos lo siguiente:
- Comprobar que todas las áreas de widget del pie de página contienen las etiquetas
if. - De ser así, abrimos un nuevo elemento denominado
<aside class = "fatfooter">.. Este elemento extra que contiene las áreas de widgets permite que el conjunto del footer esté centrado en la página aunque el pie en sí mismo no lo esté (por ejemplo en el caso de que todo el pie de página tuviese un gran fondo). - Mostrar todas las cuatro áreas de widget usando la función
dynamic_sidebar(), asignando a cada una de ellas clases para poder aplicarles un diseño de maquetación.
Las clases son .left.quarter para la mayoría de las áreas de widget, excepto para la último que tiene .right.quarter.
3. Comprobar si únicamente tres áreas de widget tienen contenido
El siguiente paso es añadir el código que mostrará las áreas de widgets cuando sólo tres de ellos dispongan de contenido. A continuación del código que acabas de añadir, inserta lo siguiente:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<?php elseif ( is_active_sidebar( 'first-footer-widget-area' ) && is_active_sidebar( 'second-footer-widget-area' ) && is_active_sidebar( 'third-footer-widget-area' ) && ! is_active_sidebar( 'fourth-footer-widget-area' ) ) : ?> <aside class="fatfooter" role="complementary"> <div class="first one-third left widget-area"> <?php dynamic_sidebar( 'first-footer-widget-area' ); ?> </div><!-- .first .widget-area --> <div class="second one-third widget-area"> <?php dynamic_sidebar( 'second-footer-widget-area' ); ?> </div><!-- .second .widget-area --> <div class="third one-third right widget-area"> <?php dynamic_sidebar( 'third-footer-widget-area' ); ?> </div><!-- .third .widget-area --> </aside><!-- #fatfooter --> |
Esto comprueba si las tres primeras áreas de widgets tienen contenido y la cuarta no, luego muestra los tres primeros con las clases adecuadas — reemplazando .quarter con .one-third.
Ten en cuenta cuando estés creando el contenido de tus áreas de widget, que siempre deberás dejar vacío el último(s) si no quieres usarlos todos, de no ser así, esta verificación no funcionará. No dejes el primero vacío y rellenes las últimos.
4. Comprobar si Sólo Tienen Contenido Dos Áreas de Widgets
Para mostrar sólo dos áreas de widget que dispongan de contenido, mientras que la tercera y la cuarto no, agrega este código a continuación del código que acabas de agregar:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<?php elseif ( is_active_sidebar( 'first-footer-widget-area' ) && is_active_sidebar( 'second-footer-widget-area' ) && ! is_active_sidebar( 'third-footer-widget-area' ) && ! is_active_sidebar( 'fourth-footer-widget-area' ) ) : ?> <aside class="fatfooter" role="complementary"> <div class="first half left widget-area"> <?php dynamic_sidebar( 'first-footer-widget-area' ); ?> </div><!-- .first .widget-area --> <div class="second half right widget-area"> <?php dynamic_sidebar( 'second-footer-widget-area' ); ?> </div><!-- .second .widget-area --> </aside><!-- #fatfooter --> |
Esto funciona de manera similar a los dos fragmentos anteriores de código, utilizando la clase .half para el diseño.
5. Comprobar Si Sólo Un Área de Widget Tiene Contenido
La última comprobación sirve para comprobar si sólo la primera área de widget tiene contenido. Añade esto a continuación el código que acabas de agregar:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?php elseif ( is_active_sidebar( 'first-footer-widget-area' ) && ! is_active_sidebar( 'second-footer-widget-area' ) && ! is_active_sidebar( 'third-footer-widget-area' ) && ! is_active_sidebar( 'fourth-footer-widget-area' ) ) : ?> <aside class="fatfooter" role="complementary"> <div class="first full-width widget-area"> <?php dynamic_sidebar( 'first-footer-widget-area' ); ?> </div><!-- .first .widget-area --> </aside><!-- #fatfooter --> |
Esto mostrará el contenido de la primera área de widgets en un elemento de anchura completa, que ocupará el 100% del footer.
Ahora guarda el archivo footer.php.
Deja una respuesta