Cómo elegir un theme de WORDPRESS (4/6): diseño y prestaciones (1)

Estás en el cuarto post de la serie dedicada la elección de una plantilla de WORDPRESS.

En la presente entrada (y en la siguiente, como continuación, para no alargar esta en exceso), completando la información de la tercera, se examina qué aspectos relativos al diseño y las opciones de presentación de los contenidos pueden caracterizar a las plantillas.

(El texto de este post ha sido actualizado respecto de su versión inicial). 

Cómo empezar el chequeo interno de las plantillas de WORDPRESS

Si para escoger una plantilla de WORDPRESS nos limitáramos a un repaso externo de las modalidades —como la que he realizado en el post anterior de la serie, a través de un examen de capturas de las homepages y de las demos oficiales de cada theme—, en la elección no habríamos valorado muchos aspectos que posteriormente van a condicionar la forma en que podremos presentar nuestros contenidos.

El filtro por tipos de modalidades es, por tanto, una fase del proceso de elección que nos ha de llevar a preseleccionar una serie de plantillas para examinarlas más a fondo una vez instaladas en nuestro servidor a través de la sección del escritorio de administración (Apariencia / Temas / Añadir nuevo).

Una vez instalada cada una, podremos examinar por dentro qué posibilidades nos ofrece. Este post y el siguiente están dirigidos a guiarte en este chequeo.

construirSi estás construyendo aún tu website, conviene que edites algunos contenidos de prueba para que las plantillas instaladas te aporten de inicio unas vistas que vayan dando forma al sitio.

Los que yo recomiendo son los siguientes:

  • Tres páginas con título y contenido de prueba (no es preciso que tengan imágenes).
  • Tres entradas, también con título y contenido de prueba, dos con una imagen destacada asociada y al menos una de ellas con una imagen insertada dentro del contenido.
  • Tres categorías (a las que deberás asociar las entradas: una a cada categoría, pero además una de ellas a las tres categorías, para que ese post tenga varias asociadas).
  • Un menú (puede llamarse menú del blog o menú principal), en el que englobarás las tres categorías (sin contar la que ya existe por defecto).
  • Otro menú (denomínalo, por ejemplo, menú secundario) en el que englobarás las tres páginas.

Para empezar es suficiente.

fragmento de textoEl contenido de prueba de las páginas y entradas puede ser del tipo loren ipsum o extraído de cualquier otro documento. Yo prefiero utilizar textos de otro tipo (el latín siempre nos da una impresión rara y es más propio para fases iniciales de diseño, cuando quienes estructiran y maquetan no quieren distraerse con el texto). Yo, por ejemplo, suelo utilizar extractos de directivas financieras europeas (traducidas), que me permiten comprobar la vista por defecto de letras, números, paréntesis, corchetes, exponentes, signos matemáticos, mayúsculas, cursivas…

Para preparar mejor las pruebas, lo mejor es que al menos uno de los títulos de la entradas sea largo para que en alguna de las vistas pase a segunda línea.

Para terminar, introduce en una entrada un extracto (excerpt), para que puedas ver en pantalla, en las vistas tipo blog extractado, la diferencia entre el fragmento de contenido creado como extracto y el contenido extraído automáticamente por el tema a partir del inicio del contenido.

ejemplo WP homepage
TWENTY FOURTEEN

Una vez cumplimentados estos pasos previos —con el theme que en ese momento esté instalado, el que viene por defecto al instalar WORDPRESS, generalmente el último de la serie Twenty, o el que tú mismo hayas instalado provisionalmente…, será el momento de pasar al examen de las prestaciones. (La captura de la derecha es del theme Twenty Fourteen, que era la penúltima versión de la serie a mediados de 2015, y en 2021 la serie ya va por Twenty Twenty-One).

Una advertencia previa: es posible que en la plantilla que hayas instalado para chequearla no encuentres alguno de los puntos examinados a continuación. En tal caso, si consideras que es importante para lo que tienes en mente, lo mejor que instales algún otro theme que sí lo incorpore para poder comparar.

Como recomendación para que puedas ir más rápido, instala sin activar otros cuatro o cinco themes que te hayan parecido interesantes en el examen de modalidades y así podrás hacer comparaciones rápidas alternando los instalados y viendo de qué modo diferente se presentan los contenidos de prueba.

Los aspectos que examino aquí los clasifico en los siguientes cuatro puntos, para los que mantengo la numeración continuada de los anteriores posts —ya hemos visto ocho puntos—, que más adelante se reflejará en un check list:

  • Diseño de la homepage.
  • Diseño general en el sitio (en todos los espacios).
  • Diseño de entradas y páginas.
  • Opciones del tema en cuanto a administración.

En el presente post examino los dos primeros y en la quinta entrada de la serie continuo con los otros dos.

9. Diseño de la homepage

ejemplos themes WordPressEste aspecto está  directamente relacionado con lo examinado en el anterior post dedicado a las modalidades de plantillas. Si leíste esa entrada, pudiste ver una clasificación de 14 tipos de plantilla y uno adicional para reflejar otras posibilidades.

Hay plantillas de tipo blog con contenido completo, con posts extractados o como blog en columna única; diversos tipos de tema magazine (simple, complejo, de tipo galería, textual); el formato portfolio; el tipo business o corporate; los formatos de segmentos o franjas horizontales (tipo one page) o verticales; los de página única y de perfil profesional (VCard), los de layout de navegación horizontal; los de e-commerce

Me refiero aquí, por supuesto, a la página de entrada al sitio, que suele denominarse de diferentes maneras: homepage, frontpage, home, inicio, página de inicio, página principal…

Como ya comenté, los themes pueden ofrecer más de una opción para que sea página de inicio (temas mixtos, multiuso o multipropósito), pero suelen presentarse en la oferta comercial con uno de esos formatos como predominante. Ahora, como los examinamos por dentro, no nos importa tanto que un formato de homepage sea o no el presentado por defecto, sino que lo relevante es que exista o no dentro de las posibilidades de la plantilla.

Sobre lo relativo al formato que podemos dar a la página de inicio, considero destacables los siguientes aspectos:

  • Opción de páginas de presentación alternativas.
  • Slider frontal.
  • Ventanas (columnas o bloques) de contenido en la homepage.
  • Opción blog, magazine o portfolio en las páginas de presentación tipo business.
  • Áreas o secciones categorizadas.

Opción de páginas de presentación alternativas

Esta opción es la que te permitirá elegir una homepage de tipo business (corporate) sin necesidad de tener que instalar previamente una plantilla que muestre esta presentación como formato por defecto, o elegir una de tipo blog en un tema magazine o business, por poner dos ejemplos.

En muchas plantillas comercializadas con vistas blog, magazine o de otro tipo existe la posibilidad de activar como página de inicio una de tipo corporate (con un slider o una imagen grande bajo la cabecera, espacios para contenido textual, áreas, ventanas, columnas o bloques de texto y, en algunos casos, espacios inferiores para listar otras páginas o entradas). También hay opciones de presentación blog, magazine, portfolio… en otras modalidades de tema.

La elección del formato de página de inicio, cuando hay varios alternativos, puede hacerse, dependiendo de los temas:

  • Mediante una opción de configuración dentro de la sección Apariencia / Personalizar del escritorio de WORDPRESS.
  • Mediante una sección especial dentro de un menú theme options o theme settings (como se comenta en el punto 12, en el siguiente post) que permita la activación alternativa.
  • A través de la sección del escritorio de administración Ajustes / Lectura, eligiendo como inicio una página a la que luego se le dará formato elegido de los posibles (tipo business, tipo blog, tipo magazine…).

Esta última opción dependerá de que en los formatos de página se incluya la posibilidad de esos tipos de presentación (se comenta en uno de los aspectos del punto 11, también en el siguiente post).

Slider frontal

La posibilidad de mostrar un deslizador de imágenes en nuestro sitio no depende exclusivamente de que ello venga de serie en la plantilla. Existen diversos plugins que permiten activar sliders con distintos formatos, dimensiones y criterios de extracción de imágenes, páginas o entradas.

Pero hay themes que ya llevan por defecto la posibilidad de activar un slider en la página de inicio, generalmente en su zona más visible, justo debajo de la cabecera o header (zona del logo y de los menús superiores) o del access (zona dedicada en muchas plantillas al menú principal del sitio).

Un ejemplo es el theme el el que se sustenta este mismo sitio (examina la página principal si te parece oportuno).

La activación de sliders mediante plugins es más adecuada para insertarlos en:

  • Páginas o entradas.
  • Widget areas previstas en la homepage.

Si el tema no contiene una widget area en la cabecera o bajo esta, será más complicado insertar un slider mediante un plugin (habría que modificar mediante códigos la estructura de la plantilla o crear el área con algún plugin, algo que no siempre es posible), por lo que, si se desea un deslizador en la zona superior de la página de inicio, lo mejor es elegir una plantilla que contemple de serie esta posibilidad.

Sobre los sliders de serie que vienen en algunos temas, hay que tener en cuenta que los hay de dos tipos:

  • Fijos. Solo permiten exhibir páginas concretas (custom slides), con información e imágenes, pero no extraen de modo automático páginas o entradas siguiendo algún criterio de publicación (por lo que para variar lo que exhiben hay que determinar ex profeso las nuevos contenidos asociados). Son bastante habituales en los themes lite, y normalmente tienen un número limitado de slides.
  • Dinámicos. Permiten más opciones, con una asociación fija más variada (exhiben páginas o entradas concretas, pero también páginas creadas mediante ciertos widgets específicos) o una vinculación basada en algún criterio de publicación: últimas entradas, entradas destacadas, entradas en modo random (aleatorio), solo entradas de alguna categoría o de varias, entradas de alguna categoría pero sólo las últimas o en modo random)… Pueden tener un número máximo de slides, pero también los hay sin límite.

En cuanto a la presentación, hay sliders que muestran una sola imagen que va sustituyéndose por otra con efectos diferentes y otros que dejan siempre a la vista dos o tres imágenes más pequeñas que van avanzando hacia la derecha o izquierda dejando ver otras nuevas (galería en movimiento).

El mayor o menor número de opciones de los sliders dinámicos depende de cada plantilla, pero, en todo caso, siempre será más práctico para el diseñador contar con este tipo de deslizadores que van variando su contenido que limitarse a la opción de los que solo muestran los posts o imágenes fijados.

Conviene mencionar que existen algunos plugins para crear widget areas en los sitios (en el header, bajo este, en el footer o antes de este, en sidebars, en las propias entradas o páginas, en determinados tipos de formato de página o entrada…), por lo que pueden permitir que con una plantilla que no tiene deslizador frontal sea posible insertar uno mediante otro plugin específico para crear sliders.

En todo caso, la creación de áreas para widgets puede depender de cómo esté diseñada la plantilla (no siempre será posible, o al menos fácil, habilitar nuevos espacios en el header o en la zona central de contenido, bajo el menú access).

Ventanas (columnas o bloques) de contenido en la homepage

Son, en cierto modo, widget areas que vienen incluidas en las páginas de presentación de las plantillas de tipo business (como también en algunas de tipo one page, con segmentos horizontales, o magazine complejo), con contenidos en ocasiones ya determinados por defecto con un formato del tipo icono o imagen + título + texto breve, aunque también pueden ser áreas más flexibles preparadas para insertar otro tipo de widgets de contenido.

Hay que diferenciar tres tipos:

  • Bloques fijos (con o sin enlaces). Son espacios de formato homogéneo generalmente pensados para que se incluyan textos corporativos breves con algún icono o pictograma (logos o emblemas de clientes, valores de la empresa, líneas de negocio, testimonios breves de clientes…). No suelen incorporar imágenes y con bastante frecuencia no enlazan con contenido.
  • Bloques fijos con enlaces. Son espacios preparados para presentar una información mediante una imagen o icono y un texto breve, que enlaza con un contenido más desarrollado. Son idóneos para aportar información sobre líneas de negocio, sugerir la entrada a secciones del sitio, mostrar servicios o productos, dar acceso a datos de contacto o a descripciones del equipo, exhibir proyectos y testimonios de clientes o colaboradores… Suelen ser de formato homogéneo.
  • Bloques flexibles — Estos espacios permiten utilizar los bloques para insertar en ellos diferentes tipos de contenido a partir de las presentaciones que permiten los plugins generadores de widgets: páginas concretas, accesos a categorías, listados de entradas seleccionadas por algún criterio, calendarios, formularios… Los formatos a la vista pueden ser homogéneos o diferentes en algunas columnas, según el tema, y generalmente enlazan con páginas o secciones dentro del sitio.

En cuanto a la configuración, esta puede controlarse, según el tema:

  • A través de una opción dentro del menú Apariencia / Personalizar.
  • A través de una sección dentro de un menú theme options.
  • A través de un menú específico que la plantilla crea dentro del escritorio de WORDPRESS.
  • Mediante los ajustes en los widgets insertados en esos espacios, si existe esta posibilidad.

Las dos primeras opciones citadas son las más habituales.

bloques contenido - ejemplo 1
Bloques de contenido – PREFERENTIAL LITE
bloques contenido - ejemplo 2
Bloques de contenido – ULTIMATE

Algunos themes fijan los bloques para la homepage (generalmente en cuatro columnas), otros establecen un número máximo (que suele ser también de cuatro) y, por último, los hay que permiten un número mayor o incluso ilimitado (suelen ser los que permiten la inclusión de widgets específicos del tema, ya preparados para estos bloques, o los que contienen una área de widgets preparada para contener todos los que se quieran insertar).

Opción blog, magazine o portfolio en la página de presentación tipo business

En algunos formatos de tipo business (corporate) es posible incluir un listado completo de entradas en formato blog extractado, magazine simple, magazine galería o incluso portfolio antes de la zona inferior (footer o bottom), justo debajo de los bloques o columnas de contenido.

La posibilidad de fundir la página de presentación de tipo corporate y el blog o galería permite que la presentación de la página de inicio sea muy completa, algo útil en sitios de empresas e instituciones cuando el propietario, diseñador o administrador prefiere mostrar todo el contenido posible en una misma vista sin renunciar al estilo de plantilla business clásica.

También los formatos One page suelen combinar algunas de estas posibilidades en sus secciones presentadas en franjas horizontales.

Hay que diferenciar esto (blog como listado completo de posts) de la incorporación en algunos temas de esta modalidad de un espacio con tres o cuatro entradas destacadas o recientes bajo los bloques de contenido (como presentación de serie).

Áreas o secciones categorizadas

Este es un aspecto que solo interesará a quienes necesiten en su sitio que las entradas aparezcan en el área principal de contenido (generalmente en la misma página de inicio) separados por categorías, pero, para quienes tengan realmente esta necesidad, constituye una prestación de capital importancia.

Aunque pueda parecer a simple vista que la distribución por categorías se incluye en la mayoría de las plantillas, no es así. Muchos temas con formato de blog extractado o magazine simple o complejo destacan las categorías junto a los títulos de los posts, e incluso clicando sobre estas puede accederse al listado completo de las entradas de esa categoría, pero eso no es lo mismo que una presentación de entradas clasificada por categorías.

Un área de contenido categorizada viene a ser como si en un mismo espacio tuviéramos entrada a varios blogs, cada uno correspondiente a los posts asociados a una determinada categoría. En algunas plantillas puede asociarse también el slider a una categoría, con lo que es otra vía de entrada a un blog selectivo diferenciado.

En estas capturas de dos plantillas distintas (dos atractivos temas premium) puedes ver como en ambos se cita la categoría, pero en el situado a la izquierda no hay una distribución por secciones en el sitio (el listado de entradas es cronológico, en formato magazine simple, con menciones de la categoría a modo de etiqueta sobre la entrada que, clicadas, permiten acceder a las lista de posts de dicha categoría), mientras que en la captura de la derecha cada categoría tiene en el home su espacio propio en el que se listan algunos posts asociados según se vayan publicando con independencia de la otra categoría. Clicando sobre las imágenes puedes agrandar las capturas y haciéndolo sobre los textos bajo cada imagen puedes enlazar con las demos oficiales de los themes que te dejarán aún más clara la diferencia.

zona home no categorizada
MEGANEWS
secciones home categorizadas
ESPRESSO

Ambas opciones son perfectamente válidas, y de hecho, si no existe la necesidad de presentar el sitio con listados diferentes por categorías, es mejor no elegir las plantillas con áreas categorizadas (de no poderse desactivar estas), porque pueden impedir o limitar la vista cronológica simple.

En todo caso, muchos temas, y especialmente los premium, incluyen opciones para presentar posts en la homepage con los dos criterios (como has podido ver en la demo del theme Espresso, que tiene más de una vista para posts categorizados y también una cronológica con etiquetas de categoría en la sección denominada Latest posts).

Pasamos ya a los aspectos que tienen que ver con las prestaciones del tema en cuanto a formatos de presentación de contenidos, referidos ya de modo general al sitio y no solo a la homepage.

10. Diseño general en el sitio (en todos los espacios)

Dimensión y flexibilidad del layout

En cierta medida, ya habrás valorado el formato del sitio al examinar distintos tipos de plantilla (ver post anterior), diferenciando entre los que presentan las entradas en cuadrícula alineada (grid), los que encajan estas como piezas (grid masonry), los que listan los posts en filas (blog extractado), en dos columnas (magazine simple) o en diversas secciones (magazine complejo…), los que presentan la información en segmentos horizontales en una sola página (one page) o en un espacio único centrado…

Pero, con uno u otro formato, el área global del sitio en cualquiera de estos formatos puede ser más o menos amplia y, consecuentemente:

  • Ocupar toda la pantalla, incluso en los monitores más grandes.
  • Dejar ver una parte del fondo a los lados del área del sitio.
  • Limitarse a una zona central del sitio, dejando a la vista una buena parte del fondo a cada lado.

Algunos themes se limitan a uno de estos formatos, con un ancho fijo, mientras que otros admiten el ajuste de diferentes anchuras:

  • A través de alguna sección layout setting dentro de un menú theme options.
  • Dentro del menú Apariencia / Personalizar del escritorio de WORDPRESS.

El ajuste del layout del sitio puede limitarse a dos o tres opciones o dejar al administrador que los ajuste de modo más preciso mediante alguna barra movible o tecleando la medida o porcentaje de ancho del total que desea para el área de contenido o para esta y la barra lateral, si existe.

Más allá de estas posibilidades, la anchura del sitio también puede modificarse determinando un width diferente en el archivo CSS de estilo del usuario o en la zona preparada para estos cambios si viene incluida en el menú theme options.

theme box layout
UNIVERSITY

Sobre la mayor o menor flexibilidad del layout del sitio, hay que tener en cuenta lo siguiente:

  • En el buscador avanzado de WORDPRESS existen dos ítems para filtrar temas por la flexibilidad del layout: fixed y fluid. No hay que confundirlos con otro ítem denominado full width template, que se refiere a la posibilidad de eliminar la sidebar existente por defecto en el sitio de una determinada página o entrada para que el área para el texto sea completa (lo veremos en el post 5 de la serie).
  • No todas las dimensiones posibles del layout son adecuadas para cualquier plantilla. Las hay pensadas para espacios de contenido estrechos, o que llevan barras laterales fijas que necesitan un mínimo de espacio, o que por su formato de tipo galería no admitirían bien un espacio de escasa anchura…
  • Si se prevé incluir publicidad y se estima como interesante su emplazamiento en el fondo del sitio (para que sea vea por los laterales del área de contenido), la dimensión deberá ser estrecha (lo que suele denominarse tipo box). También resultará adecuado este formato si se quiere decorar el sitio con alguna imagen a modo de fondo, en un estilo similar al de TWITTER (imaginemos, por ejemplo, un sitio sobre boxeo que en el fondo incluya alguna imagen de boxeadores o de combates).
  • Para portfolios o magazines tipo galería en los que se quiera dar preponderancia a las fotografías, suele ser recomendable optar por un layout amplio que permita el aprovechamiento a fondo del espacio grid con varias columnas para la galería de posts.
  • La estructura del sitio web incluye diversos niveles en cuanto a áreas de contenido, que pueden llevar denominaciones diversas (aunque generalmente se utilizan las mismas o al menos similares: main, body, wrapper, container, content…). El ajuste de dimensiones del layout del sitio que venga incluido en alguna sección del menú ya actuará sobre los elementos que correspondan, pero si se opta por la modificación CSS, se deberá seleccionar correctamente el área que se debe ampliar o estrechar. (A las partes o elementos de la estructura interna de una página web les dedicaré una futura entrada).

Número de columnas y ubicación (sidebar)

Si leíste el post anterior de la serie, recordarás como el buscador avanzado de plantillas del sitio de WORDPRESS incluía varios ítems sobre el número de sidebars y la ubicación de estas.

ejemplo 1 - dos sidebars
MEGARESPONSIVE

Una columna a cada lado

ejemplo 2 - dos sidebars
MEGARESPONSIVE

Dos columnas a la izquierda

Muchos themes permiten optar alternativamente por barras laterales a la izquierda o a la derecha del área de contenido. También hay plantillas que admiten tres columnas (dos sidebars) o incluso cuatro (tres sidebars), mientras que otras solo admiten una barra lateral o, como sucede con las de tipo blog columna única, no llevan ninguna.

(Hay que tener en cuenta que la indicación de columnas en el buscador siempre incluye entre estas el área de contenido, por lo que dos columnas suponen una sola barra, tres columnas, dos, y cuatro columnas, tres).

La búsqueda de un tema con una, dos o tres barras o con estas a la izquierda o a la derecha debe completarse averiguando si se trata de diseños fijos o flexibles en cuanto a esta parte de la estructura, ya que en algunas plantillas que permiten una flexibilidad máxima puede optarse, en función del número de sidebars posible, por ubicar:

  • Una a la derecha o a la izquierda.
  • Dos a la derecha o dos a la izquierda.
  • Una a la derecha y otra a la izquierda.
  • Dos a un lado y otra al contrario.

En muchas ocasiones es la inserción de widgets en las barras la que activa estas, por lo que si al instalar el tema no hay ninguno (o solo aparecen los widgets que vengan por defecto), puede que alguna de las barras opcionales no aparezca.

Ajustes de background y header

Como ya comenté en la segunda entrada de la serie, la posibilidad de que la plantilla incluya alguna opción para modificar la cabecera del sitio (header) —subiendo logos o imágenes— o su fondo (background) —variando colores o instalando fondos con colores, texturas e incluso imágenes— tiene una importancia relativa, ya que puede efectuarse esa modificación también vía CSS.

A pesar de ello, es muy cómodo que existan estas opciones de personalización, que por otra parte vienen en la mayoría de los plantillas, ya que indican los tamaños recomendados para las cabeceras y facilitan la instalación y la comparación rápida de vistas para poder elegir entre varios logos o fondos.

Quien esté seleccionando una plantilla puede comprobar si existen o no estas opciones en el menú Apariencia / Personalizar o dentro del menú theme options, si existe.

Pensando en la modificación mediante CSS, hay que tener en cuenta que el header es un espacio que puede tener diferentes elementos estructurales (branding, logo, header, header-container, header-full, linky, site-title, site-description…) y habrá que elegir bien sobre cuáles actuar para variar dimensiones o colores, incluir degradados o insertar imágenes (lo veremos también en un futuro post sobre elementos de la estructura de un website).

Por último, conviene destacar la opción de algunas plantillas de fijar la cabecera para que se mantenga visible al hacer scroll en la homepage o en cualquier otra sección del sitio. En ocasiones, ese bloque puede englobar también algunos menús (como el superior o el access).

Esta posibilidad reviste interés si se considera que los menús son muy importantes para la navegación o en sitios en los que el área de contenido puede extenderse verticalmente (por ejemplo, en blogs de tipo full content, o de tipo página única, sobre todo si no se pagina por bloques de un número de posts, con indicadores numéricos para pasar de uno a otro, sino que se opta por la página única infinita sin footer (el listado de entradas se abre siempre a las restantes al llegar al final del espacio, creándose más scroll). También puede convenir en algunos sitios de tipo one page con mucho contenido y un buen número de segmentos.

Respecto al background, hay otro ajuste que suele venir en la mayoría de plantillas, que es el que permite adherirlo al área de contenido para que fluya con este al hacer scroll o fijarlo para que no se mueva con este. Aunque es más que nada una preferencia, si el fondo es una imagen alusiva al sitio, el administrador puede determinar así que esta se mantenga siempre a la vista. (Si el fondo es solo una textura, esta opción tendrá poca importancia —solo producirá un ligero efecto—, mientras que si es únicamente un color, será irrelevante).

Widget areas, zonas de contenido o regiones (número y ubicación)

Es un aspecto que, en parte, ya he comentado respecto a los bloques de contenido de los temas business clásicos, pero que conviene examinar de manera global.

En herramientas como JOOMLA o DRUPAL, por su especial modo de funcionamiento, que permite (y exige) una mayor configuración de bloques o áreas de contenido y de los módulos o complementos, la existencia de un mayor o menor número de áreas o regiones y la ubicación de estas son datos de suma importancia que deberán conocerse al empezar a diseñar un website.

Por ello, en casi todos los templates de esos programas hay un botón que da paso a una página que indica los espacios o regiones numerados, que son los que luego deberán tenerse en cuenta para asociarles los bloques, páginas, menús…, según dónde queramos que aparezcan.

En WORDPRESS también hay áreas de contenido, obviamente, y, aunque hay algún tema que incluye una vista global de todos ellos (suelen ser los que incluyen muchas), es poco habitual (al menos en los gratuitos), en parte porque muchas de esas zonas ya se utilizan por defecto por la plantilla y porque la filosofía de esta herramienta es diferente, no tan abierta como las otras citadas.

Las áreas de WORDPRESS son los espacios en los que podremos exhibir contenido, sea completo o de referencia.

Los contenidos pueden ser páginas, entradas (posts), listados de páginas o entradas, extractos de páginas o entradas, imágenes, publicaciones de otros medios, bloques breves de contenido, listados de enlaces, calendarios, formularios…

En cuanto a las áreas principales, son las siguientes:

  • El área central de contenido de la página de inicio o principal.
  • Los bloques, ventanas o columnas (especialmente en los temas de tipo business y one page)
  • Otras áreas en el espacio central, en ciertos temas con múltiples zonas.
  • Las barras laterales.
  • El footer o bottom.
  • El header (en la parte que dejen libre el logo o el site title + site description, que generalmente es la derecha).
  • El espacio de contenido de las entradas o páginas (antes o después del contenido).
  • El espacio central de contenido de las páginas (widgetized pages).
  • Otros espacios que pueden crearse mediante plugins.

Algunas de esas áreas ya vienen establecidas por defecto en la plantilla, mientras que otras son opcionales (se pueden utilizar si, entre otras posibilidades, se inserta en ellas algún tipo de widget o shortcode) o son opciones no incluidas en un determinado theme.

En general, muchos temas de tipo magazine complejo, y especialmente los premium, suelen incluir múltiples zonas para widgets.

Ten en cuenta que no es preciso escoger un tema porque tenga más áreas para widgets: lo importante es elegir una plantilla que tenga al menos las que se necesiten y se vayan a utilizar, pensando, eso sí, como no podía ser de otra manera, con cierta perspectiva.

(También pueden crearse áreas para widgets donde no existen, con ciertos plugins o añadiendo y modificando códigos en algunos archivos, pero este es un aspecto en el que no entro en esta serie de posts).

Menús: número y posiciones

Otro elemento fundamental en un website son los menús. Mediante estos podemos acceder desde cualquier espacio del sitio a cualquiera de sus secciones o a listados de páginas y entradas asociados a categorías, etiquetas u otras taxonomías que podamos haber creado.

No es cierto que los menús de un sitio de WORDPRESS estén limitados. Mediante widgets como Menú personalizado (que viene incorporado por defecto en todas las instalaciones) o con plugins que permiten crear otros menús, podemos incluir todos los que queramos en las widget areas y en las sidebars.

Los espacios de serie para menús que suelen llevar algunas plantillas son los siguientes:

  • Menú superior (top menú). Generalmente se ubica en la parte superior, sobre el header.
  • Menú principal (main menú). Es el menú access, generalmente ubicado bajo el header.
  • Menú inferior (footer menú o bottom menú). Se ubica en la zona inferior del sitio.

Como variantes, podemos encontrar plantillas que solo admiten un menú (el principal) o que permiten dos menús o incluso uno en cada una de las tres ubicaciones citadas. También hay temas que, por su diseño, pueden incluir todos esos espacios para menús predeterminados en una misma sidebar, generalmente a la izquierda (en los templates que denominé de franjas verticales en el post 3 de la serie) o en algún otro espacio de contenidos.

Más allá de estas posibles ubicaciones, como he comentado, el diseñador o administrador puede incluir todos los menús que quiera, pero deberá hacerlo en alguno de los espacios preparados para widgets que permita la plantilla o que se hayan creado mediante algún plugin (en la barra lateral, en el header, en bloques de contenido, en el área de contenidos del footer…).

Cuantas más ubicaciones por defecto tenga la plantilla destinadas a menús, más flexibilidad tendremos para el diseño del sitio, al poder distribuir separadamente los dedicados a información del sitio, información legal, temáticos o de categorías, de etiquetas o de otras taxonomías, de formatos o enfoques de entradas…, sin necesidad de cargar todos en la sidebar o en otras widget areas.

Otros aspectos

Además de los puntos examinados, hay otros que, aunque revistan menor importancia, merecen ser destacados, aunque sea brevemente, porque también están ligados a la apariencia del sitio.

FUENTES INCLUIDAS

Aunque la fuente por defecto o las asociadas a títulos u otros niveles de contenido pueden modificarse mediante CSS (respecto a las determinadas por defecto en los archivos de la plantilla), algunos temas añaden al escritorio de WORDPRESS (en el menú theme options o en el menú Apariencia / Personalizar) opciones para que el administrador del sitio elija las fuentes directamente.

Según los temas, puede haber repertorios más o menos amplios de fuentes para seleccionar y puede existir la posibilidad de asociarlas a más o menos niveles del contenido (contenido base, títulos H1, H2, H3…, widget titles…). Incluso en algunos casos existe la opción de teclear directamente una fuente Google para que quede vinculada a un determinado nivel.

RETINA-READY

Es una configuración del sitio para que las fuentes se adapten correctamente a las pantallas cuando estas tengan la característica retina display (creada originalmente por Apple), mostrándose con mayor resolución.

Si la plantilla no lleva esta opción, existen plugins que pueden activarla.

ICONOS DE SOCIAL MEDIA EN PANTALLA

Aunque mediante plugins pueden insertarse accesos a medios sociales (o incluso visiones de lo que se publica regularmente en espacios y canales como TWITTER, FACEBOOK, LINKEDIN, INSTAGRAM, PINTEREST o TUMBLR, entre otros), hay plantillas de WORDPRESS que ya llevan incorporados iconos para acceder a estos medios (en la zona superior del sitio, en el header, en la barra lateral (o en el lateral de la homepage), en el footer…

También puede haber iconos para las suscripciones RSS de entradas y comentarios.

BOTÓN BACK TO TOP

Aunque no es más que un botón en la parte baja de la pantalla que activa el scroll inverso automático para ascender rápidamente hasta el header, puede ser útil en sitios que utilicen plantillas en formato blog full content, especialmente si no se pagina por bloques de entradas, en websites de tipo one page o en cualquier tipo de sitio en el que se prevean posts de cierta extensión.

Puedes ver un ejemplo aquí mismo, en la zona inferior derecha de este sitio (aparece una flecha en cualquier espacio en cuanto se avanza un poco el scroll directamente o mediante la rueda del mouse).



(Este examen de los principales aspectos de diseño y presentación de contenidos que conviene chequear en el proceso de selección de plantilla continúa en el siguiente post: el quinto).


Otros posts de la serie: