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

Hemos visto en el post anterior varios puntos que tienen que ver con el diseño del sitio y el modo de presentar contenidos, tanto en lo que respecta a la página de inicio como, en general, para cualquier espacio. Continúo en esta entrada el chequeo de las prestaciones que aportan las plantillas respecto a esos aspectos, fijándome ahora:

• En las páginas y en las entradas, que son los dos espacios por excelencia para la publicación de contenidos en un sitio WORDPRESS (lo demás son muestras vinculadas de contenido —extractos, listados, enlaces, menús…—, que, salvo en el caso de que apunten a los incluidos fuera del sitio —en medios sociales, en otros websites…—, siempre acaban llevando a las páginas o los posts).
• En tres aspectos relacionados con el escritorio de administración de WORDPRESS.

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

Diseño y presentación en las áreas de contenido

Ignoramos  aquí, como en anteriores posts de la serie, la alternativa entre el modo de escritorio Gutenberg por bloques y el modo de escritorio clásico que puede mantenerse mediante un plugin, ya que se trata de opciones comunes a cualquier plantilla.

11. Diseño de entradas y páginas

Layouts específicos para páginas

Existe un layout (forma, diseño, espacio) del sitio y también existe uno de la página, que puede coincidir con el general o configurarse con un esquema diferente en algunas plantillas de WORDPRESS.

Si, por ejemplo, el sitio es un blog que en su homepage muestra un listado de posts, cada uno con una imagen y un extracto de texto, y en dos columnas (área de contenido + sidebar), podríamos determinar que al entrar en una página el esquema fuera el mismo: idéntica dimensión del área de contenido y de sidebar. De hecho, si no hacemos nada, generalmente las páginas mantendrán el layout que hayamos predeterminado para el sitio o que esté establecido por defecto.

Pero algunos themes de WORDPRESS incluyen la posibilidad de variar el esquema de las páginas, eligiendo para algunas, por ejemplo, una presentación full template (sin barra lateral), o con la barra lateral en el lado contrario, o con más barras laterales que las establecidas por defecto.

Las siguientes capturas del theme COLORMAG muestran, a modo de ejemplo, cuatro plantillas de página. Clica sobre las imágenes para verlas más grandes, o sobre la denominación de la plantilla en este mismo párrafo para acceder a la demo del tema.

Concretando, las templates para páginas (generalmente no aplicables a las entradas) pueden ser, entre otras, del siguiente tipo:

• Full template (sin barras laterales, con toda el área de contenido dedicada a lo que se haya publicado, sea texto, imágenes, galerías, vídeo, formularios, mapas del sitio…)
• En una columna centrada (más estrecha), sin barras laterales
• Con una barra lateral a la derecha.
• Con una barra lateral a la izquierda.
• Con dos barras laterales a la derecha.
• Con dos barras laterales a la izquierda.
• Con una barra a cada lado del área de contenido.

Algunos temas incorporan, además, otros formatos para páginas (no para entradas) que permiten, en la práctica, convertirlas en secciones de contenido. Yo destacaría los tres siguientes:

• Página en formato blog. La página se convierte en un blog que lista con extractos todos los posts del sitio. Puede haber variantes para que la página se vea en forma de listado de entradas extractadas, de magazine con más o menos columnas, de portfolio….
• Página en formato category page. La página se convierte en un blog que lista todos los posts del sitio asociados a una categoría (o a varias), con lo que se convierte en un blog selectivo. También puede mostrarse con formatos diferentes.
• Página sitemap. La página incluye automáticamente un mapa del sitio con enlaces a todas las páginas y entradas.

El BLOG de este sitio que estás visitando es precisamente una página en formato category page que me permite presentar un blog selectivo (asociado a una categoría que precisamente he denominado blog). Este formato es muy útil cuando se prevé la publicación de entradas con otros enfoques (por ejemplo, noticias profesionales, avisos del sitio, citas de eventos…) y se prefiere no mezclarlos con las publicaciones temáticas, o para crear varios blogs diferenciados dentro de un mismo sitio.

Conviene decir que no todas las plantillas incluyen estos layouts alternativos o estos formatos creadores de secciones para páginas, y que los que sí llevan incorporadas estas posibilidades, pueden ser más o menos generosos en cuanto a opciones.

Formatos de post

Se trata de una posibilidad de configuración que en este caso afecta no a las páginas, sino a las entradas, y que permite que estas tengan una cierta apariencia, idónea para albergar un tipo de contenido específico.

Aunque hay plantillas que no incluyen esta posibilidad y otras con apenas dos o tres variantes de formatos, hay temas que sí aportan al administrador o editor un repertorio de formatos con los que puede configurar separadamente cada entrada.

Algunos formatos destacables son los siguientes:

• Post estándar
• Minipost
• Imagen
• Galería (de imágenes)
• Vídeo
• Audio
• Quote (cita)
• Link (enlace)
• Estado
• Chat

A pesar de que pueda parecer algo relevante, los formatos de entrada apenas tienen otro efecto que modificar el aspecto del post en la vista de blog (sea extractado, de magazine…): por ejemplo, eliminando el título, sustituyendo la imagen por otra más pequeña o más grande (o por varias seguidas), incluyendo algún icono que indique que se trata de un post especial, poniendo el extracto en negrita o cursiva (o en otro tamaño de fuente), eliminando el extracto, incluyendo unas comillas de cita, sustituyendo el thumbnail por el avatar del autor, haciendo que el thumbnail sea una pantalla con el vídeo insertado o enlazado (o la imagen de un podcast), poniendo la imagen y el extracto sobre un fondo de color diferente…

El formato elegido apenas se hace notar dentro del área de contenido de la entrada (como mucho, puede que condicione alguna fuente por defecto o incluya algún icono), ya que con un post estándar puede hacerse de todo —insertar vídeo, poner galerías, poner citas, incluir enlaces…—sin necesidad de variar el formato de la entrada.

Los formatos de post son más relevantes en una herramienta como TUMBLR, pensada para publicaciones más concisas, limitadas a un solo elemento, con una única intención comunicativa por entrada: un texto breve, una cita con mención del autor, un link a otra web brevemente comentado, un vídeo insertado o vinculado, un enlace podcast, una imagen insertada… En este canal de microblog cada entrada extractada suele revelar claramente de qué tipo se trata de un modo muy peculiar, lo que proporciona su vista típica, claramente reconocible como estilo TUMBLR, sea cual sea su plantilla (la captura de la derecha es un ejemplo de este tipo de tema).

En WORDPRESS, una misma entrada suele contener texto, imagen, citas y enlaces, y en ocasiones vídeo, por lo que no tiene tanto sentido asignar a cada post un único formato. Por ello, considero que es una opción de configuración de relevancia relativa, que yo no tengo en cuenta para seleccionar una plantilla. No obstante, para quienes busquen un theme WORDPRESS de estilo tumblog (ver post anterior) o pretendan utilizar esta herramienta para publicar entradas cortas con una única idea e intención en cada una (algo que, obviamente, es posible) y/o vayan a crear sobre un espacio blog en una columna, con un timeline a dos columnas o en estilo grid masonry un repertorio muy variado de entradas para las que desean una vistas que las diferencien claramente por tipos (artículo, vídeo, audio, cita, texto breve, noticia, imagen grande, galería, enlace…), estos formatos sí pueden revestir interés.

(El theme NOTES de la imagen adjunta es un ejemplo de tipo tumblog en una columna; otro ejemplo, en este caso en un formato grid muy bien aprovechado, sería el theme GRIDO, también de Themify; en ambas muestras, el marcado de los formatos de posts es característico).

Sticky post (entrada destacada)

La posibilidad de establecer una o varias entradas como destacadas (sticky posts) permite que en el listado cronológico de estas  —ya se trate de vistas de tipo blog extractado o full content, magazine, portfolio…— las destacadas se sitúen al comienzo, sea cual sea su fecha.

En algunas plantillas darles este carácter también implica que los posts seleccionados se presenten en un tamaño mayor, o en una zona especial más llamativa en la parte superior del sitio (por ejemplo, en un marco de foto, si solo hay una entrada destacada, o en un slider, si hay varias).

La utilidad de destacar entradas puede ser diversa:

• Mantener algún post al inicio durante más tiempo por considerarlo más relevante o actual que los publicados con posterioridad.
• Dar visibilidad temporalmente a una entrada antigua actualizada en su contenido que no aparecería al inicio salvo que expresamente se le alterara la fecha original de publicación (algo que generalmente no suele hacerse: es más habitual mantener la fecha original, salvo que se trate de una remodelación completa).
• Asociar la entradas nuevas a un slider mediante el sticky, cuando la plantilla solo permite esta posibilidad (en algunos temas el slider no muestra los posts por ser nuevos, sino solo por haber sido destacados o asociados expresamente).

Aunque la posibilidad de destacar entradas se incluye actualmente en casi todas las plantillas, conviene siempre confirmar que el theme la incluye (ya que aún hay algunos que no incorporan esta opción) y que la vista de la entrada destacada nos satisface, ya que hay presentaciones muy diversas:

• En un marco de foto centrado al inicio del sitio, con una imagen más grande.
• En un slider, también en la parte superior, con una imagen más grande.
• En una zona lateral separada (normalmente a la izquierda), con una imagen mediana (algo mayor que la del resto de entradas).
• Simplemente al inicio de la lista de posts extractados, con la misma presentación que el resto.
• Al inicio de la lista de posts extractados, con una imagen muy grande que cubre todo el área de contenido (bajo la que suele haber un magazine simple a dos columnas o un blog extractado a una columna, como en la captura adjunta del theme ORIGIN).
• Al inicio de una galería (magazine o portfolio), con una imagen algo mayor.
• En un sitio con formato magazine o portfolio de tipo grid masonry, con el mismo tamaño que el resto de posts, pero con un fondo de color diferente (situando las entradas destacadas al inicio o dejándolas en su ubicación normal por fecha de publicación, destacadas solo por el color y quizá por algún icono).

Elegir un tema que tenga un formato de presentación de los sticky post que nos agrade es importante, ya que de otro modo deberemos modificarlo mediante CSS o con otro tipo de códigos más complejos.

Breadcrumbs

Cuando se activa, esta indicación, que en algunos temas aparece traducido como rastro de migas de pan —o sea, que mejor no traducirlo, aunque signifique literalmente eso mismo—, aparece en la parte superior de las páginas y entradas y nos informa de la ruta en la que se encuentra esa publicación:

Indicará primero el home (o un icono alusivo) y luego destacará (según como esté configurado):

• La categoría que la engloba (con prioridad para la primera, si hay varias asociadas).
• La subcategoría, si existe, que esté asociada.
• El título de la entrada o página que estamos visitando.
• El titulo de la subpágina, si existe y es la que estamos visitando.

En sitios en los que no se utilicen subcategorías ni subpáginas, el breadcrumb tiene poco sentido, ya que, tras la categoría, solo repetirá el título de la publicación que en esos momentos estemos leyendo (como en la imagen).

Cuando la estructura de ordenación de los contenidos es más compleja (con diversos niveles de categorías, subcategorías, subpáginas u otros niveles de ordenación que puedan reflejarse en ese rastro), puede resultar útil, ya que además de informar de la ubicación, suele incluir links que permiten acceder directamente a los niveles anteriores a la página o entrada en la que estamos sin tener que recurrir al menú de categorías ubicado en alguna zona del sitio.

En todo caso, es un elemento de escasa relevancia que, de considerarlo conveniente, también puede activarse con algún plugin si no va incorporado en la plantilla.

Comentarios por niveles

Todos los temas de WORDPRESS permiten abrir las entradas a la inserción de comentarios de los usuarios (algo que no sucede, por ejemplo, en la herramienta TUMBLR), pero conviene confirmar que esos comentarios admiten la presentación por niveles, acercando su funcionamiento al de un foro.

Aunque se trata de una prestación habitual, puede haber algún tema de diseño simple, antiguo o no actualizado que no incluya esta presentación.

De existir la opción de los comentarios por niveles, el visitante que quiera publicar un comentario, si ya hay otros anteriores, podrá elegir entre añadirlo en un primer nivel o contestar a otros comentaristas anteriores. En este último caso el párrafo insertado (o la caja que lo contiene) aparecerá sangrado para que se sepa que contesta a otro comentario.

La plantilla suele permitir que se indiquen el número de niveles que se mostrarán como texto dependiente de otro anterior de nivel superior. (La captura muestra un formato con tres niveles, simulado en este mismo sitio).

La existencia de esta presentación en árbol hace mucho más dinámico el funcionamiento del sistema de comentarios, ya que incita a que se generen debates no solo sobre el contenido del post, sino también sobre las interpretaciones, reflexiones o derivadas que hacen otros lectores. En todo caso, mediante códigos CSS también puede modificarse la apariencia de los niveles para ajustarla a nuestra preferencias.

Featured image

Muchas plantillas llevan incorporada esta opción, pero aún existen themes que no la permiten. Consiste en que desde el escritorio de edición de una entrada pueda asignarse una imagen para que sea la que aparezca en las visiones de referencia del post (listado tipo blog, magazine, portfolio…).

La instalación de la imagen destacada es inmediata una vez asignada, sin necesidad de actualizar la publicación de la entrada. Algunos temas incluyen además menús para fijar tamaños fijos o máximos de anchura y altura para las propias imágenes destacadas.

La imagen destacada no aparece dentro del contenido de las páginas, porque para insertarla dentro es preciso utilizar el botón Añadir objeto, que hay sobre el espacio de comandos del editor de WORDPRESS (sea el que viene por defecto u otro añadido mediante plugins, como, por ejemplo, TinyMCE Advanced o WP Editor).

En cuanto a las plantillas que no llevan la opción de descatar una imagen para los blogs, pueden incluir opciones para que se considere imagen destacada la primera insertada dentro de la entrada (posibilidad que a veces también viene incorporada como alternativa en temas con featured image).

(La posibilidad de configuración de las imágenes insertadas dentro de las páginas y entradas viene de serie en todas las instalaciones de WORDPRESS, en el editor multimedia, accesible en el menú del escritorio, y en el editor. Además, actualmente es posible redimensionar las imágenes actuando con el cursor sobre estas en el área de escritura del editor de texto).

12. Opciones del tema en cuanto a administración

Todos los puntos examinados en este post y en el anterior relativos al modo de presentación de los contenidos en el sitio son posibilidades para el diseñador y administrador que deben gobernarse a través del escritorio de WORDPRESS, que puede variar en algunos de sus menús según la plantilla que hayamos instalado.

En este apartado comento brevemente tres puntos que son relevantes en el modo en que estas opciones pueden aparecer en ese escritorio, ya que según cuál sea el criterio será más o menos fácil configurar cómo aparecerán los contenidos en el sitio.

Este apartado tiene, por tanto, un carácter más formal y operativo que de fondo.

Theme options

Es una sección que algunas plantillas añaden en el escritorio de WORDPRESS y que incluye ciertas opciones de configuración directa del sitio y del modo de presentación de los contenidos.

Este menú puede denominarse de diversas maneras: theme options (menú de opciones del tema), theme settings (menú para configurar el tema)…

Funciona como complemento del menú Apariencia / Personalizar, pero en ocasiones es muy diferente en cuanto a prestaciones, ya que puede incluir una mayor o menor variedad de opciones de configuración (en algunos temas aporta poco, mientras que en otros contiene un completo cuadro de mandos de control para modificar muchos elementos del diseño del sitio y la presentación de contenidos).

Son solo las opciones más habituales que he detectado tras revisar muchas plantillas. Algunas incluyen uno o dos de los aspectos citados, otras engloban varios de estos y, como he comentado, hay plantillas con un amplísimo repertorio de configuración directa que incluso puede ir más allá de las posibilidades que yo acabo de mencionar.

Los menús más completos abundan en los temas premium, pero no son exclusivos de estos; hay también themes gratuitos que presentan un repertorio de opciones de configuración que no tienen nada que envidiar a algunos de pago.

Conviene hacer una puntualización: casi todo lo que permiten estos menús adicionales propios de cada theme puede hacerse sin ellos, realizando modificaciones en el menú Apariencia / Personalizar, en algunos archivos CSS, en algunos archivos PHP o mediante plugins).

La relevancia de los menús theme options, especialmente cuando son muy completos, estriba, por consiguiente, no tanto en que sean imprescindibles para activar ciertas variantes de diseño y presentación, sino en que facilitan la configuración de toda una variedad de aspectos de modo centralizado, muchos de ellos sin necesidad de tocar códigos, lo que es muy recomendable para quienes no tienen conocimientos de HTML y de CSS.

A los espacios específicos que incluyen algunos menús theme options para insertar códigos CSS me refiero precisamente en el siguiente punto.

Personalización CSS

Para realizar modificaciones en una plantilla de WORDPRESS mediante códigos CSS sin que se borren con cada actualización del tema no es preciso que haya un espacio específico en los menús para introducirlos. Puede hacerse utilizando un archivo CSS para el estilo del usuario, que en ocasiones ya existe (viene vacío, preparado para introducir los cambios), pero que, en caso contrario, puede crearse.

La existencia en el menú theme options de un espacio para lo que se denomina Custom CSS (CSS personal, del editor o del usuario) facilita al diseñador o administrador introducir las modificaciones sin necesidad de crear o abrir el archivo CSS específico para los códigos personalizados, ya que, al actualizar los cambios en el menú, ya se guardarán directamente en el archivo que corresponda.

Por este motivo, resulta práctico elegir una plantilla que incluya este espacio, aunque no sea más que un atajo para que el diseñador o administrador del sitio ahorre tiempo y trabaje con mayor comodidad, con el espacio de las modificaciones siempre a mano.

El todo caso, en temas que no incluyan este espacio Custom CSS, también podremos activarlo mediante plugins específicos (como Simple Custom CSS o WP Add Custom CSS, por ejemplo), por lo que, si una plantilla nos resulta adecuada, no deberíamos desecharla solo por carecer de esta opción integrada en los menús.

Theme builder

El último punto que voy a examinar en esta lista de aspectos a chequear relativos a las prestaciones de las plantillas (en cuanto a diseño y presentación de contenidos) es propio, sobre todo, de algunos themes premium (aunque puede haber alguno gratuito que también incorpore alguna prestación parecida).

Suele denominarse también drag and drop themes a las plantillas que incorporan este modo de configuración, que normalmente incluye el arrastre de elementos a espacios (aunque sus posibilidades pueden exceder en mucho de esta posibilidad).

Los theme builders vienen a ser una versión más avanzada del menú theme options. Consisten en un sistema de configuración, que puede ser más o menos rico en posibilidades, preparado para que el diseñador pueda construir el sitio arrastrando módulos a determinados espacios o eligiendo dentro de un repertorio amplio de opciones y elementos presentados en diferentes menús, todo en un formato visualmente cómodo y atractivo.

• En algunas plantillas de este tipo los cambios se realizan con todas las áreas de contenido posibles a la vista, en un área de escritorio que simula el sitio y al que se pueden arrastrar los elementos. Señalando estos también se pueden hacer modificaciones de forma y aspecto.
• Otros temas cuentan además con una vista real del sitio que refleja las modificaciones según se van haciendo desde una zona del escritorio, de manera que controlamos los cambios sin necesidad de ir guardándolos ni de ir actualizando continuamente la página en curso.
• Algunos temas están vinculados a frameworks (paquetes de software vinculados a plantillas y a plugins, con unidad estructural y operativa) que incluyen múltiples prestaciones, incluyendo estos constructores de sitios.

En estos dos enlaces puedes examinar, a título de ejemplo, algunas explicaciones sobre este tipo de opciones de diseño y configuración.

---

Theme DIVI, de Elegant Themes

Theme ULTIMATUM, de Wonder Foundry

---

También existen plugins y frameworks que pueden incorporar a la plantilla un sistema de diseño de este tipo, por lo que son una posibilidad a tener en cuenta si el tema que hemos elegido no lo lleva incorporado.

En todo caso, estos sistemas aportan muchas opciones, pero precisamente por ello también conllevan una cierta complejidad en su manejo y en ocasiones un conjunto de archivos con bastante peso en megabytes, por lo que no son recomendables para quienes tienen poca experiencia en la puesta en marcha de sitios en WORDPRESS, están instalando o haciendo rodar su primer website o no necesitan exprimir tan a fondo las posibilidades del diseño de su plantilla. (Ello no obsta a decir que son perfectamente adecuados para quienes no tienen muchos concimientos de HTML y CSS, porque, pese a su complejidad, están preparados precisamente para facilitar el diseño y la configuración del sitio sin que se precisen para ello especiales conocimientos tecnológicos.

Sobre la posibilidad de contar con themes muy avanzados volveré a realizar un comentario en el próximo post, el último de la serie, al hablar de los frameworks.

Recapitulación

Estos son los puntos a tener en cuenta a la hora de chequear las posibilidades de una plantilla de WORDPRESS en cuanto a diseño, prestaciones y formatos de presentación de los contenidos (a modo de resumen de lo visto en este post y en el anterior):

• Selecciona algunas plantillas para examinar internamente sus prestaciones . Una vez instaladas las primeras, crea algunos contenidos de prueba: dos o tres entradas con imágenes destacadas, dos o tres páginas, dos o tres categorías (para asociarlas a las entradas) y dos menús, uno de categorías y otro con las páginas.
• Tras crear esos contenidos de prueba, puedes ya ir alternando las plantillas (instalando unas y otras) para visualizar como van quedando.
• En el chequeo, comprueba:
  • Los tipos posibles de homepage que permite cada plantilla, y que pueden responder a algunos de los vistos en el post 3 de la serie.
  • Si la homepage tipo corporate, de existir, permite un blog simultáneo en la parte inferior.
  • Si es posible presentar en la homepage areas categorizadas o solo se muestran entradas ordenadas cronológicamente (o si son posibles ambas presentaciones).
  • La existencia de un slider frontal de serie, y si es de tipo fijo o dinámico.
  • Las widget areas existentes o posibles en el centro de la pantalla, además de las habituales del sidebar y del footer, y si permiten enlaces, tienen número máximo, admiten imágenes, son flexibles a diferentes formatos…
  • Qué flexibilidad tiene la plantilla en cuanto a dimensiones (layout de la homepage y, en general, del sitio, y también layout de las páginas).
  • De cuántos sidebars dispone (número posible de columnas) y con qué posible ubicación, y si son flexibles en cuanto a anchura.
  • Que formatos existen para las entradas.
  • Si las entradas permiten imágenes destacadas (featured images).
  • Si existe la posibilidad de entradas destacadas (sticky posts) y con qué presentación aparecerán.
  • Si pueden modificarse el fondo de la aplicación y la cabecera.
  • Qué flexibilidad existe en cuanto a menús (cuántos pueden activarse en la zona superior o central del sitio, al margen de los que puedan crearse en el sidebar o el footer).
  • Si las entradas permiten comentarios presentados con varios niveles (para permitir respuestas a comentarios o a otras respuestas).
  • Si el tema incluye un variado menú de opciones para personalizar la plantilla (theme options o theme setting) o incluso algún sistema especial de diseño más moderno (theme builder) .
  • Si dentro del menú de opciones hay una sección para personalizar el CSS del tema.
• Si te parece de interés, puedes fijarte también en otros aspectos: opciones para modificar directamente fuentes, formatos retina, botones para regresar rápido a la zona superior, opciones para iconos de social media, breadcrumbs…

---

Otros posts de la serie:

• Cómo elegir un theme de WORDPRESS (1/6): 15 criterios relevantes
• Cómo elegir un theme de WORDPRESS (2/6): aspectos generales
• Cómo elegir un theme de WORDPRESS (3/6): tipo de plantilla
• Cómo elegir un theme de WORDPRESS (4/6): diseño y prestaciones (1)
• Cómo elegir un theme de WORDPRESS (6/6): aspectos colaterales