Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

Añadir Dinámicamente Cuatro Áreas de Widget al Pie de Página

by
Difficulty:IntermediateLength:MediumLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

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 vacío en el lateral derecho donde debería esta ubicad 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:

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.

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:

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:

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:

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:

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.

Añadir el CSS

Actualmente tus áreas de widgets no funcionarán adecuadamente, de hecho, si los usas todos, rellenándolos con contenido, aparecerán una bajo la siguiente ocupando todo el ancho del footer. Necesitas añadir algunos OOCSS para conseguir que las clases para la maquetación funcionen. El OOCSS que estoy añadiendo es responsivo, por lo que he incluido media queries para adaptar el tamaño de las áreas de widget del pie de página en las pantallas pequeñas.

1. Añadir Flots

Primero vamos a asegurarnos de que las áreas de widget se sitúen una junto a la otra consecutivamente.

Abre el archivo style.css de tu teme y agrega este código:

2. Añadir las Anchuras

Especificar las anchuras nos asegurará que todas las áreas de widget tengan la proporción adecuada a cada pantalla. Estoy usando porcentajes ya que hace el código más flexible y responsivo. Añade esto a tu hoja de estilo:

Ten en cuenta que las anchuras no alcancen el 100% ya que necesitarás espacio para los márgenes.

3. Añadir Márgenes

Ahora añade el estilo para los márgenes a tu hoja de estilo:

Ten en cuenta que los márgenes son diferentes para los elementos que tengan las clases .right o .left asignadas, para que se coloquen al filo del borde de tu elemento contenedor.

4. Añadir Media Queries

Las media queries lograrán dos cosas:

  • En las pantallas pequeñas como puedan ser las tabletas, aparecerán cuatro elementos en forma de retícula de dos por dos, lo que significa que los elementos con la clase .quarter tendrán la mitad de anchura y los márgenes se ajustarán en consecuencia.
  • En las pantallas muy pequeñas, como los smartphones, todos los elementos tendrán una anchura el 100%.

Añadir media queries al final de tu hoja de estilo junto a otras media queries que tengas en ella:

Ahora guarda tu hoja de estilo.

Comprobar Tu Código

Ahora es el momento de ver lo que sucede cuando introduces contenido en las áreas de tus widgets.

A continuación tienes una captura de pantalla de un sitio que administro que emplea este código. Normalmente el footer tiene cuatro áreas de widget:

Footer with four widget areas

Si retiras el widget de la cuarta área de widgets, sólo aparecerán tres, las tres de igual anchura:

Footer with three widget areas

Y si elimino widgets de la tercera zona de widget, los visitantes podrán ver dos áreas de widget cada ocupando la mitad de la anchura:

Footer with two widget areas

Resumen

Esta técnica es útil si deseas que tu tema pueda tener contenido en múltiples áreas en los widgets del pie de página pero no sabes cuántos de estos utilizarás finalmente.

Si está creando un framework, un tema base o un tema que otras personas puedan usar para sus propios sitios, puedes ayudar a crear un footer con un diseño más ordenado y ahorrarte trabajo extra gracias a la adición de las posibilidades del diseño que ofrece CSS.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.