Mi experiencia construyendo el front-end de este blog personal

El primer objetivo, a la hora de crear el front-end de este blog personal, era conseguir un estilo lo más simple posible.

Me inspiré en el sitio de Matias Ventura y aún le aplicaré más cambios al diseño pero no en funcionalidades: un blog y nada más. Ni siquiera vas a ver categorías ni nada de eso. Es un sitio experimental, aunque el contenido espero que resulte interesante.

El punto de partida es WordPress 5.8 y el plugin Gutenberg activo. Eso quiere decir que tengo posibilidad de acceder a la función de edición del sitio (FSE) siempre y cuando instale y active un theme FSE. En el directorio oficial de WordPress hay un manojo de themes FSE que encontrarás si filtras la búsqueda por “Edición completa del sitio”. Hice pruebas con varios de ellos y opté por Rick de WPEntire. No encontré fallos, salvo algunos pequeñísimos detalles irrelevantes (para el propósito que nos ocupa) y era lo más parecido al diseño que quería conseguir: blog con contenido de una columna.

Lo primero que quería conseguir era el cambio de color de los enlaces mediante la configuración de los estilos globales. Por supuesto, se trataba de construir el front-end sin tocar el CSS, ni siquiera en Apariencia > Personalizar. No todos los themes FSE del directorio oficial funcionan bien en eso. Pero hay que tener en cuenta que todos esos themes no son más que experimentos. Ciertamente, los desarrolladores de themes tienen mucho trabajo por hacer.

Después jugué con el alineamiento y ancho del contenido principal para lo que yo llamo “romper la restricción impuesta por el theme“. Hay dos maneras de hacer esto: con un bloque de columnas o convirtiendo el bloque de la lista de contenidos en un grupo y luego modificando el ancho del contenido sin heredar los valores del theme dentro del apartado “Disposición” del grupo. Preferí ensayar con el método de las tres columnas, llevando el bloque de la lista de contenidos a la del centro. En Estilo globales se puede alterar más valores de la configuración del bloque de párrafo para tener otra altura de línea, tamaño de fuente o, incluso, otro tipo de letra. Para cambiar el tipo de letra hay que ceñirse a lo que se ha previsto en el archivo theme.json. En WordPress 5.9 se prevé una interfaz en el editor para hacer modificaciones en theme.json y, mientras tanto, nos conformaremos con la tipografía que nos trae Rick.

El bloque de paginación me enredó más de la cuenta, porque “Next page” y “Previous page” no se traducen, a menos que lo hagas tú manualmente. Sin embargo, hay que tener cuidado de dejar un espacio en blanco antes del literal de la traducción ya que, en caso contrario, aparece un símbolo extraño en su lugar. Tampoco me dejó mover el bloque de paginación a una columna central de tres, por lo que opté por utilizar el método de conversión a grupo y asignar un ancho del contenido. Pero el resultado no se refleja en móvil porque las dimensiones son distintas. Mi amado plugin Editor Plus era muy útil en esto pero no sé si Extendify tiene previsto una versión FSE del plugin, lo cual sería maravilloso.

Cambiar las partes de plantilla header y footer es muy fácil. Cambié el bloque de título en formato texto por un bloque de logo del sito, subiendo una imagen y ajustándola al centro mediante el método de conversión a grupo. Eliminé la descripción y añadí una imagen y una especie de biografía al final del header. Esto tiene el problema de que también aparecerá en las páginas por lo que habrá que crear una nueva plantilla con otra nueva parte de plantilla header y asignársela a las páginas. En el footer, cambios de texto, configuración del bloque de iconos sociales y añadir un bloque de búsqueda.

Salvo depuración en el diseño, el front-end del sitio está listo y se cumplió el objetivo: crearlo (a partir de un theme FSE) modificando plantillas y partes de plantillas mediante la función beta de Edición del sitio y haciendo uso solo de bloques nativos del editor.

La interfaz de Edición del sitio todavía es muy mejorable y es verdad que cualquier usuario final principiante deberá pasar primero por el editor de bloques. Pero estamos solo al principio de un WordPress generador de sitios web. Una nueva era apasionante que devuelve la flexibilidad perdida y que empoderará a mucha gente.

Comentarios

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.