Las áreas de widgets de WordPress

1. Qué son las áreas de widgets

Las áreas de widgets son espacios del sitio web en los que se pueden colocar widgets, es decir, bloques o cajas que incorporan distintas funcionalidades: formularios de búsqueda, baterías de enlaces, elementos multimedia, textos diversos, fuentes RSS, código HTML, PHP, JavaScript, etc. Entre las áreas de widgets más habituales se encuentran las siguientes:

• Área de cabecera. Puede contener, a su vez, una o más áreas de widgets.
• Área de pie de página. Puede contener, a su vez, una o más áreas de widgets..
• Áreas laterales de la página. Las más habituales son las siguientes: barra lateral a la izquierda (una o más de una), barra lateral a la derecha (una o más de una) y barras laterales a izquierda y derecha a la vez.
• Áreas exclusivas para la página de inicio o para otras páginas de especial importancia. La mayoría de los temas de la familia Genesis, que veremos en próximas sesiones de este curso, utilizan masivamente este recurso.
• Áreas sobre los artículos del sitio web o bajo ellos.
• Área sobre el pie de página.
• Otras.

Las áreas de widgets están definidas por la estructura y diseño de cada tema, y afectan esencialmente al aspecto visual del sitio web. Por tanto, el número y distribución de dichas áreas no es igual en unos temas que en otros; de hecho, hay temas con muy pocas áreas de widgets (incluso puede haber temas que no los admitan) y otros con un gran número de ellas.

Para complicar más la situación, las áreas de widgets no son intercambiables entre dos temas cualesquiera, incluso aunque los nombres de las áreas de widgets de los dos temas sean, en apariencia, idénticos. Este hecho debe tenerse muy en cuenta cuando se cambia de tema; en efecto, aunque los widgets no desaparecen ni se eliminan al seleccionar otro tema para el sitio web, pueden quedar desactivados, por lo cual es necesario volver a configurarlos correctamente.

2. Sobre la denominación «barras laterales»

A menudo las áreas de widgets reciben el nombre de «barras laterales» (del inglés sidebars), debido al hecho de que muchas áreas de widgets, y además las más frecuentes, se disponen a modo de barras verticales en los laterales del sitio web. Sin embargo, conviene tener en cuenta que esta es una denominación inexacta, pues no toda área de widgets es una barra lateral, y ni siquiera tiene por qué parecerse a ella.

3. Áreas de widgets globales y específicas

Por regla general, las áreas de widgets definidas en un tema se aplican a todas las páginas de un sitio web, a fin de proporcionar a este un aspecto visual homogéneo y coherente. No obstante, algunos temas permiten asignar áreas de widgets a ciertos elementos del sitio, con lo cual se incrementan en gran medida las posibilidades de personalización de su apariencia. Así, por ejemplo, la mayor parte de los temas de la familia Genesis disponen de los siguientes recursos en relación con la asignación de áreas de widgets:

• Posibilidad de asignar una o varias áreas de widgets a la página de inicio, con lo cual esta puede adquirir una apariencia muy distinta a las demás páginas.
• Posibilidad de seleccionar una distribución diferente de áreas de widgets para las entradas y páginas. Por defecto, el tema Genesis permite los siguientes diseños: sin barras laterales, con barra lateral a la izquierda, con barra lateral a la derecha, con dos barras laterales (una a la izquierda y otra a la derecha), con dos barras laterales a la derecha y con dos barras laterales a la izquierda.
• Posibilidad de seleccionar una distribución diferente de áreas de widgets para las páginas correspondientes a categorías y etiquetas. Por defecto, el tema Genesis permite los siguientes diseños: sin barras laterales, con barra lateral a la izquierda, con barra lateral a la derecha, con dos barras laterales (una a la izquierda y otra a la derecha), con dos barras laterales a la derecha y con dos barras laterales a la izquierda.

4. Ejemplos de áreas de widgets en sitios web del PNTE

Para que los asistentes al curso tengan una visión más precisa y detallada de lo diferente que puede ser la apariencia de un sitio web en función de las áreas de widgets que incorpora, incluimos a continuación una relación (no exhaustiva) de disposiciones o diseños típicos de los sitios web educativos alojados en los servidores del PNTE.

4.1. Cabecera, contenido a la izquierda, barra lateral a la derecha y pie de página

Esta es, probablemente, la disposición más típica y habitual, sobre todo si el sitio web tiene una estructura de contenido al estilo blog, pues combina equilibradamente todos los elementos esenciales de diseño y estructura. He aquí unos cuantos ejemplos de sitios creados con diferentes temas, pero que comparten la misma estructura básica:

1. Consejo Escolar (con un tema de la familia Genesis).
2. CP Alfonso X el Sabio.
3. CP de Abárzuza.
4. CP de Puente la Reina.
5. CP de Ujué.
6. CP Elvira España (con un tema de la familia Genesis).
7. CP Eulza (con un tema de la familia Genesis).
8. CP Griseras (con un tema de la familia Genesis).
9. CP Hermanas Úriz Pi.
10. CP Joaquín Lizarraga (con un tema de la familia Genesis).
11. CP La Cruz.
12. CP Luis Gil (utiliza un tema con más de 30 áreas de widgets diferentes).
13. CP Mendigoiti.
14. CP Mendillorri.
15. CP Monte San Julián.
16. CP Otero de Navascués (utiliza un tema con más de 30 áreas de widgets diferentes).
17. CP Príncipe de Viana.
18. CP Remontival (con un tema de la familia Genesis).
19. CP San Francisco Javier.
20. CP Santa Bárbara.
21. CP Virgen Blanca.
22. CP Ximénez de Rada.
23. Curso de WordPress 2012 (con un tema de la familia Genesis).
24. Curso de WordPress 2016 (con un tema de la familia Genesis).
25. IESO del Camino.
26. IESO Mendaur (con un tema de la familia Genesis).
27. IESO Iñaki Ochoa de Olza.
28. ParaPNTE (con un tema de la familia Genesis).

4.2. Cabecera, contenido a la izquierda, barra lateral a la derecha, sin pie de página

Diseño muy parecido al anterior, pero sin una zona específica para el pie de página. Veamos unos cuantos ejemplos:

1. CP Ángel Martínez Baigorri.
2. CP de Añorbe.
3. CP de Obanos.
4. CP Huertas Mayores.

4.3. Cabecera, contenido a la izquierda y dos barras laterales a la derecha, con o sin pie de página

Para que los diseños con dos barras laterales sean adecuados, hay que calibrar muy bien el equilibrio de proporciones y el número y variedad de widgets, a fin de que el efecto resultante no sea abigarrado y evite sensación de amontonamiento de elementos. No es frecuente este tipo de diseños, pero hemos localizado al menos un ejemplo:

1. CP Ciudad de Corella.

4.4. Cabecera, barra lateral a la izquierda y contenido a la derecha, con o sin pie de página

Este diseño es muy similar al del epígrafe 4.1, con la única diferencia de que la barra lateral se sitúa a la izquierda. Suele preferirse este diseño en sitios informativos o al estilo portal. Aunque este diseño es muy frecuente en Internet, no abunda en los sitios web del PNTE:

1. CP Juan Bautista de Irurzun.
2. CP Lorenzo Goicoa.
3. CP Marqués de la Real Defensa.
4. CP Martín de Azpilicueta.
5. CP Santos Justo y Pastor.
6. IES Lekaroz.

4.5. Barras laterales a derecha e izquierda

El diseño con dos barras laterales a derecha e izquierda puede ser muy útil, pues las dos zonas laterales proporcionan mucho espacio para alojar widgets. Sin embargo, si la caja de texto central no es lo suficientemente ancha, el contenido puede verse afectado, ya que pierde importancia y relevancia en comparación con las zonas aledañas. A continuación vemos algún ejemplo de este diseño:

1. CP Francisco Arbeloa.
2. Eunate BHI.
3. IES Tierra Estella.

4.6. Sin barras laterales en ninguna de las páginas

El diseño sin barras laterales en ninguna de las páginas puede plantear problemas de navegación. Para evitarlos, hay que utilizar uno o varios menús que enlacen adecuadamente todas las páginas del sitio.

1. CP Azpilagaña.
2. CP Dos de Mayo.
3. CP Gloria Larrainzar (con un tema de la familia Genesis).
4. CP Rochapea (con un tema de la familia Genesis).
5. CP San Miguel de Noain.
6. IES Altsasu BHI.

4.7. Áreas de widgets específicas de la página de inicio, sin barras laterales en la página de inicio y barra lateral derecha en las demás páginas

Este tipo de diseños se basan en una serie de áreas de widgets exclusivas de la página de inicio, diseñadas para que esta produzca una particular impresión en el visitante. Hay bastantes ejemplos de este tipo de estructura:

1. CI Agroforestal (con un tema de la familia Genesis).
2. CI Burlada (con un tema de la familia Genesis; algunas páginas tienen barras laterales y otras no).
3. Ciudad de la Música (con un tema de la familia Genesis).
4. CP El Castellar (con un tema de la familia Genesis).
5. CP Erreniega (con un tema de la familia Genesis; algunas páginas tienen barras laterales, y otras no).
6. CP García Galdeano (con un tema de la familia Genesis).
7. CP Luis Fuentes (con un tema de la familia Genesis).
8. CP San Francisco (con un tema de la familia Genesis).
9. CREENA (con un tema de la familia Genesis).
10. Curso de WordPress 2018 (con un tema de la familia Genesis).
11. Cursos de verano de las universidades navarras (con un tema de la familia Genesis; este sitio utiliza, además, un plugin especial para la construcción del sitio; de este tipo de plugins, denominados «constructores visuales» o «constructores de páginas», trataremos en la la última sesión del curso).
12. Escuela Sanitaria – Centro de Referencia Nacional (con un tema de la familia Genesis; algunas páginas tienen barras laterales y otras no).
13. IES Marqués de Villena (con un tema de la familia Genesis).
14. IES Navarro Villoslada (con un tema de la familia Genesis).
15. IES Zizur BHI (con un tema de la familia Genesis).
16. WiFiPNTE (con un tema de la familia Genesis).

4.8. Áreas de widgets específicas de la página de inicio, con una barra lateral a la derecha

En esta variante del diseño descrito en el epígrafe anterior, la página de inicio se construye con widgets especiales, pero se incluye además una barra lateral en el lado derecho. También abundan los ejemplos:

1. Código 21 (con un tema de la familia Genesis).
2. CP de Beriain (con un tema de la familia Genesis).
3. CP Iturrama (con un tema de la familia Genesis).
4. CP José María de Huarte (con un tema de la familia Genesis).
5. CP Mendialdea 1 (con un tema de la familia Genesis).
6. CP Mendialdea 2 (con un tema de la familia Genesis).
7. CP Paderborn (con un tema de la familia Genesis).
8. CP San Juan de la Cadena (con un tema de la familia Genesis).
9. Curso de WordPress 2017 (con un tema de la familia Genesis).
10. EIBZ (con un tema de la familia Genesis; este sitio utiliza, además, un plugin especial para la construcción del sitio; de este tipo de plugins, denominados «constructores visuales» o «constructores de páginas», trataremos en la la última sesión del curso).
11. IES Alhama (con un tema de la familia Genesis).
12. IES Biurdana (con un tema de la familia Genesis).
13. IES Huarte (con un tema de la familia Genesis).
14. IES Plaza de la Cruz (con un tema de la familia Genesis).
15. IES Ribera del Arga (con un tema de la familia Genesis).
16. IES Sancho III el Mayor (con un tema de la familia Genesis).
17. IES Sierra de Leyre (con un tema de la familia Genesis).
18. IESO-CP de Larraintzar (con un tema de la familia Genesis).
19. Ikastola Amaiur (con un tema de la familia Genesis).
20. Memoria Histórica (con un tema de la familia Genesis).
21. Multiblog (con un tema de la familia Genesis).

4.9. Áreas de widgets específcias de la página de inicio, con una barra lateral a la izquierda

Diseño muy semejante al del epígrafe anterior, pero con la barra lateral en el lado izquierdo. Es muy poco habitual:

1. eTwinning Navarra (con un tema de la familia Genesis).

4.10. Áreas de widgets específicas de la página de inicio, sin barras laterales en la página de inicio y barras laterales a derecha e izquierda en las demás páginas

Esta es una variante del caso anterior, e igualmente poco frecuente en los sitios del PNTE:

1. CP San Babil (con un tema de la familia Genesis).
2. IESO Pedro de Atarrabia (con un tema de la familia Genesis).

4.11. Áreas de widgets específicas de la página de inicio, sin barras laterales en ninguna página

Una estructura muy parecida a las de los epígrafes 4.7, 48, 4.9 y 4.10, pero sin áreas laterales en absoluto. Hemos localizado los siguientes ejemplos:

1. CP Ibarberri (con un tema de la familia Genesis).
2. Formación del Profesorado (con un tema de la familia Genesis).
3. IES Basoko (con un tema de la familia Genesis; este sitio utiliza, además, un sistema de menús especial, que analizaremos en esta misma sesión del curso).
4. Proyecto Rizoma (con un tema de la familia Genesis; este sitio utiliza, además, un plugin especial para la construcción del sitio; en la última sesión del curso nos ocuparemos de este tipo de plugins, denominados «constructores visuales» o «constructores de páginas»).

4.12. Diseños especiales

Esta es una categoría heterogénea, a modo de cajón de sastre, ya que incluye sitios web que utilizan temas no instalados o no recomendados por el PNTE, la mayor parte de los cuales hacen uso de diseños y técnicas especiales de configuración y construcción de las páginas. Además, en el diseño y elaboración de varios de los sitios web que figuran en esta lista han intervenido empresas externas:

1. CIP Virgen del Camino (sitio en curso de elaboración; el tema cuenta con más de 25 áreas de widgets diferentes).
2. CP Araxes.
3. CP Buztintxuri.
4. CP Vázquez de Mella.
5. CPEBPA José María Iribarren.
6. EOIDNA (este sitio utiliza un plugin especial para la construcción del sitio; en la última sesión del curso nos ocuparemos de este tipo de plugins, denominados «constructores visuales» o «constructores de páginas»).
7. Escuela Sanitaria.
8. IES Mendillorri.
9. IESO Valle del Aragón (este sitio utiliza un plugin especial para la construcción del sitio; en la última sesión del curso nos ocuparemos de este tipo de plugins, denominados «constructores visuales» o «constructores de páginas»).