Temas de WordPress: cómo personalizar el front-end de un sitio web

En este post se resume todo lo que hay alrededor de los temas de WordPress. Primero veremos qué es el front-end de un sitio web.

¿Qué es el front-end de un sitio web?

El front-end de un sitio web es la parte visible, lo que ve el usuario cuando accede a él mediante un navegador web. Tradicionalmente, en WordPress solo se podía personalizar el front-end a través de las áreas de widgets que programaba el desarrollador del tema. Y con código, por supuesto. En la era post-Gutenberg y pre-FSE, se puede hacer usando bloques del editor, tanto en la home como en cualquier página. Para alcanzar con bloques las áreas de widgets (sidebar, footers, etc.), se puede utilizar un plugin del estilo Reusable Blocks Extended. Excepto la cabecera, cualquier área del sitio web es rellenable con bloques del editor. En la era post-FSE, todo el sitio -incluida la cabecera- se puede diseñar con bloques.

Tal vez necesites repasar qué son los themes de WordPress, dentro de este curso Cómo iniciar un blog en WordPress. O, incluso, esta introducción a WordPress.

¿Qué es la era pre-FSE?

La Edición completa del sitio (FSE, por sus siglas en inglés, de Full Site Editing) es la fase 2 del proyecto Gutenberg. Una vez superada la fase 1 que solo contemplaba la implementación de un nuevo editor de contenidos (editor de bloques) como sustituto del editor clásico. La FSE se comienza a implantar con WordPress 5.9 (enero de 2022).

Desde la aparición del editor de bloques de Gutenberg hasta la instauración de WordPress 5.9 se considera una era pre-FSE.

En la era pre-FSE el front-end de un sitio web se puede personalizar de varias maneras diferentes, pero -en ningún caso- es posible, directamente y sin código, personalizar ni la cabecera ni el footer general (otra cosa bien distinta son el resto de áreas de las páginas).

• De la manera clásica. Dependiendo de lo que el desarrollador del tema haya preparado con las áreas de widgets. Las áreas de widgets se personalizan arrastrando los widgets disponibles (los nativos y aquellos que se incorporen al instalar determinados plugins).
• Mediante bloques. Para ello hay que poder llevar diseños hechos con bloques a las áreas de widgets, ya que las distintas páginas que conforman el front-end son editables con bloques. Aunque el tema tenga preparadas áreas de widgets para la home, ésta se puede dejar en blanco y rellenarse con bloques.

En la era pre-FSE los temas, compatibles con Gutenberg, son temas «orientados» a bloques. En la era post-Gutenberg pero pre-FSE, funcionan los temas clásicos y los temas «orientados a bloques». Estos son temas que admiten su diseño mediante bloques del editor de WordPress.

¿Qué es Genesis Pro?

Genesis Pro es el producto de StudioPress que sustituye al antiguo Genesis Framework, pero adaptado a Gutenberg. Los temas de Genesis Pro son temas orientados a bloques.

Genesis Pro es una de las soluciones más recomendable para personalizar el font-end de un sitio web en la era pre-FSE. Aunque orientado al antiguo Genesis Framework, este artículo puede darte una idea de cómo funciona Genesis Pro: Cómo configurar un theme de StudioPress con bloques de Gutenberg.

El tema básico de Genesis Pro es Genesis Sample que es gratuito y es un tema secundario de Genesis Framework que también es gratuito. Puedes probar a personalizar el front-end de tu sitio web instalando Genesis Framework y Genesis Sample; y utilizando los bloques nativos y los que se incluyen en la colección gratuita de Genesis Blocks.

¿Qué es Blocksy?

Blocksy es un tema orientado a bloques y también es una especie de framework.

Con Blocksy puedes personalizar el front-end de un sitio web con bloques de Gutenberg y utilizando su personalizador avanzado. Este personalizador permite modificar la cabecera y el footer general.

Blocksy es gratuito pero tiene también un plan de pago. En el apartado siguiente podrás acceder a un videotutorial donde se explica el funcionamiento de Blocksy.

¿Cómo se crea una web con Gutenberg en la era pre-FSE?

A nivel de contenidos y front-end puedes hacerlo, en la era pre-FSE, con Genesis Pro o Blocksy; o simplemente con un tema orientado a bloques cualquiera (un tema clásico compatible con Gutenberg). O, incluso, de la manera tradicional con el plugin Classic Editor y un tema clásico incompatible con Gutenberg. Classic Editor es un plugin que te permite la convivencia del editor clásico con el editor de bloques, utilizando indistintamente uno de los dos a conveniencia.

Para crear una web con Gutenberg en la era pre-FSE, en las páginas vacías -incluida la home-, simplemente rellena éstas de diseños con bloques.

Para mover bloques a las áreas de widgets, preestablecidas por el desarrollador del tema, hay que usar un plugin como Reusable Blocks Extended, que añade un widget con el que es posible elegir un bloque reutilizable. Si previamente has creado ese bloque reutilizable podrás llevar el diseño que contenga a cualquier área de widgets.

Hay dos plugins más para conformar un pequeño kit de desarrollo con bloques:

• Fullwidth Page Templates. Para poder ampliar el ancho de las páginas preestablecido.
• Editor Plus. Para aplicar estilos CSS a los diseños con bloques sin saber CSS.

Dirígete al curso Cómo crear un sitio web con Gutenberg para todos los detalles sobre el procedimiento completo, incluyendo:

1. Introducción. Cómo convertir a Gutenberg en un generador de webs.
2. El editor de bloques. Las claves del funcionamiento de Gutenberg.
3. Componentes básicos. Sustie, patrones de bloques y plugins requeridos.
4. Editor Plus. Funcionamiento básico de este plugin.
5. Gutenberg Hub y Blocksy. Recursos recomendados.
6. Ejercicio práctico. Creación de páginas de destino rápidas basadas en bloques.

¿Cómo se puede probar la FSE en la era pre-FSE? Accede a este post donde se explica la manera de probar la FSE antes de WordPress 5.9: Blogpocket Twenty: cómo probar la Edición Completa del Sitio (FSE, por sus siglas en inglés)

¿Qué es la Edición completa del sitio?

A partir de la versión 5.9, el panel de administración de WordPress incorpora -además del editor de bloques para los contenidos- un editor del sitio. Este editor del sitio funciona también con bloques -de manera semejante a la del editor de bloques para los contenidos- y permite modificar todo el front-end de una web, incluyendo la cabecera y el footer general.

Con la Edición completa del sitio (Full Site Editing o FSE, en inglés) se cede a los usuarios finales y creadores de contenidos todo el control para que se pueda personalizar sin código el front-end completo de un sitio web.

La FSE contempla plantillas y partes de plantilla. Una plantilla, por ejemplo, sería la página con las entradas del blog. Y una parte de plantilla podría ser el típico sidebar o la cabecera de la web.

Además, se puede utilizar la función de «estilos globales» con la que es posible modificar los tipos de letra y los colores.

Con la FSE se puede realizar la personalización de un tema de bloques y obtener un front-end distinto al modelo previsto por dicho tema.

Para aprender el funcionamiento de la FSE, dirígete a nuestro curso de Full Site editing.

¿Qué es un tema de bloques?

Un tema de bloques (plenamente de bloques) requiere la edición completa del sitio (FSE, en inglés) para funcionar. Posee una estructura interna que difiere un poco de la que poseen los temas clásicos y «orientados a bloques». La idea es que temas clásicos, «orientados a bloques» y «de bloques» convivan una vez implantada la FSE.

Con los temas de bloques se introduce en WordPress una nueva manera de crear el front-end de un sitio web. Aunque sistemas como Genesis Pro y Blocksy tendrían que adaptarse de alguna manera a la FSE, cualquier usuario final o creador de contenidos tendrá la posibilidad de partir de un tema de bloques y crear su propio tema secundario con un diseño personalizado con el editor del sitio. Aquí hemos publicado un caso experimental: Cómo crear un tema secundario de Blockbase.

Blockbase es un tema de bloques universal de Automattic para proporcionar un mecanismo de creación de temas secundarios fácilmente utlizando el editor del sitio.

En la era pre-FSE, solo puedes probar los temas de bloques, instalando el plugin Gutenberg.

¿Qué es un tema de bloques universal?

Un tema de bloques universal es un tema post FSE que se puede personalizar mediante el método clásico (Apariencia > Personalizar o similar) y con el Editor del Sitio. Blockbase es, como ya se visto, un tema de bloques universal creado por Automattic cuyo propósito es proporcionar un lienzo en blanco y un punto de partida para crear el front-end de un sitio web de WordPress.

Resumen

Hemos visto cómo personalizar el front-end de un sitio web con los temas de WordPress según se esté antes de WordPress 5.9 (era pre-FSE) o después (era post-FSE).

En cualquier caso, se prevé que los temas orientados a bloques (de la era pre-FSE) y los temas de bloques (post-FSE) convivan una vez que se actualice a WordPress 5.9.