En este post vamos a ver qué es y cómo crear una web de WordPress sin código, antes de que se pueda realizar la edición del sitio completo (FSE, por sus siglas en inglés); es decir, antes de que la función FSE se integre en el core de WordPress.
Dentro de eso, te invito a visualizar un par de vídeos donde se explica -según mi perspectiva- el concepto general (qué es y cómo crear una web de WordPress sin código). Al ser importante la manera de alinear elementos, nos fijaremos especialmente en cómo hacerlo sin la función FSE activa. Y también, al final, cómo se realiza dicho control del alineamiento en la FSE y con un theme orientado a la FSE.
La edición del sitio completo (FSE, por sus siglas en inglés) es una función que se integrará probablemente en la versión 5.9 de WordPress y que antes de esa fecha se puede probar instalando el plugin Gutenberg y un theme orientado a la FSE. En Blogpocket se ha desarrollado Blogpocket Twenty, un theme orientado a la FSE sencillo. Se recomienda testear todo esto haciendo uso de una herramienta como Local (antes denominada «Local by Flywheel»). Denominamos «era pre-FSE» al tiempo previo a la incorporación de la edición del sitio completo en el core de WordPress (previsto para la versión 5.9 de WordPress).
Qué es y cómo crear una web de WordPress sin código en la era pre-FSE
La creación de una web de WordPress sin código implica tener un theme orientado a bloques.
Blogpocket Sustie o Blogpocket Nineteen 1 (Genesis) son themes orientados a bloques (de la era pre-FSE) que se han desarrollado pensando en proporcionar un folio en blanco para rellenarse con bloques de Gutenberg.
1 En realidad, Blogpocket Nineteen ya no es estrictamente un theme, ya que lo hemos convertido en un add-on aplicable sobre Genesis Sample. El motivo es independizar las funciones del add-on de la evolución del theme Genesis Sample. En lo que sigue, nos referiremos al «theme» Blogpocket Nineteen aunque sea Genesis Sample más la aplicación del add-on.
Instala uno de esos dos «themes» en Local y explora las distintas posibilidades con objeto de crear una web de WordPress sin código.
Qué es crear una web de WordPress sin código
Crear una web de WordPress sin código es construirla exclusivamente con bloques del editor Gutenberg sin modificar ningún archivo de la aplicación. Para ello es necesario poder llevar bloques de Gutenberg a cualquier lugar del sitio web, excepto a la cabecera y el footer general.
Cómo crear una web de WordPress sin código
Crear una web de wordPress sin código significa:
- Poder entrar a la página home para editarla con bloques de Gutenberg.
- Crear y editar las páginas nuevas con bloques de Gutenberg.
- Llevar bloques de Gutenberg a cualquiera de las áreas de widgets preparadas en el theme. Para esto usaremos el plugin Reusable Blocks Extended.
- Aplicar estilos CSS a los bloques sin código. Para ello usaremos el plugin Editor Plus.
A fecha de publicación de este post, la versión de WordPress es la 5.7 que no tiene todavía integrado en el core la función FSE. Pero puedes editar el sitio completo, a excepción de cabecera y footer general, mediante la instalación de algunos plugins adicionales.
Diseño de una web con bloques de Gutenberg
Se podría decir (¡y a mí me gusta repetirlo!) que crear una web de WordPress, hoy día, se reduce a aprender Gutenberg 😉
La Zona Gutenberg de Blogpocket es un buen punto de partida para aprender a diseñar páginas con bloques del editor de WordPress. Y si te suscribes a mi newsletter, tendrás en tu bandeja de entrada información actualizada sobre WordPress y Gutenberg todos los lunes a las 8:45AM.
El alineamiento de grupos de bloques como fundamento del diseño sin código
El alineamiento de grupos de bloques, es un problema básico a la hora de crear una web de WordPress sin código, mediante Gutenberg, y se resuelve dentro de la función FSE cuando ésta se integre en el core (ver al final de este post). Pero hasta ese momento, es también muy fácil hacerlo. En este apartado se explica el control del alineamiento en un theme orientado a bloques de la era pre-FSE.
Para el control del alineamiento en un theme orientado a bloques, sin la función FSE activa, nos apoyaremos en los plugins Editor Plus y Fullwidth Page Templates.
Página home
La página home, en Blogpocket Sustie y Blogpocket Nineteen, tiene definido el ancho completo por defecto.
Agrupa los bloques que se quieren alinear y elige uno de los siguientes métodos:
- Utilizando Editor Plus y ajustando los parámetros width y margin-left en % del grupo.
- Configurando una columna centrada y con un ancho determinado en %; ajustar el margin-left en % (Editor Plus) y mover el grupo dentro de la columna.
Página ordinaria
En Blogpocket Nineteen, elige el layout sin barra lateral (Fullwidth Content) desde Apariencia > Personalizar > Opciones del tema.
Las páginas ordinarias vienen en Blogpocket Sustie y Blogpocket Nineteen con un ancho de columna predeterminado, aunque puedes insertar a ancho completo patrones de bloques y bloques reutilizables que vayan preparados así.
Para cambiar el ancho de columna predeterminado de un contenido, instala el plugin Fullwidth Page Template y elige el atributo de página «FW Fullwidth» (que, además, elimina el título de la página) para pasar a ancho completo.
Utiiza, entonces, uno de los dos métodos descritos en el apartado de Página Home.
Página individual de un post
Las páginas individuales de los posts vienen en Blogpocket Nineteen y Blogpocket Sustie con un ancho de columna predeterminado.
El ancho de la columna correspondiente al contenido de las páginas individuales de los posts no se puede personalizar. Pero se puede cambiar utilizando Apariencia > Personalizar > CSS Adicional.
En Blogpocket Sustie, añade el siguiente código en Apariencia > Personalizar > CSS Adicional (cambia el valor de max-width a tu gusto).
#content {
max-width: 60em;
margin: 0 auto;
padding: 0 1em;
}En Blogpocket Nineteen, añade el siguiente código en Apariencia > Personalizar > CSS Adicional (cambia el valor de width a tu gusto).
.content {
float: left;
width: 70%;
}Ambos códigos a insertar en Apariencia > Personalizar > CSS Adicional se obtuvieron mediante la opción de «Inspeccionar elementos» dentro de «Ver > Opciones para desarrolladores» del navegador Google Chrome.
Página del blog
El caso de la página del blog es similar al de la página individual de un post. También se puede cambiar utilizando Apariencia > Personalizar > CSS Adicional con el mismo código visto en el apartado «Página individual de un post».
Cómo hacerlo sin código
La única manera de personalizar completamente un theme en la era pre-FSE es utilizar un theme del estilo de Blocksy.
Es muy fácil convertir un sitio web implementado con Blogpocket Nineteen o Blogpocket Sustie en un theme con Blocksy.
Control del alineamiento en la era post-FSE
El propósito de la Full Site Editing (Edición del sitio completo) es proporcionar al usuario final (cualquier persona que no posea conocimientos técnicos, por ejemplo de código CSS) una herramienta sencilla y directa desde el Administrador de WordPress para construir su sitio web.
Eso evitará el artificio de Apariencia > Personalizar > CSS Adicional y de plugins del estilo de Editor Plus.
En este videotutorial se explica cómo realizar el control del alineamiento con la función FSE activada.
Para más información sobre el funcionamiento de un theme orientado a la FSE, revisa el post Blogpocket Twenty 2.0: cómo probar la Edición del Sitio Completo (FSE, por sus siglas en inglés)que se utilizan.
Conclusiones
La FSE es un nuevo paradigma en la creación de sitios web de WordPress donde la habilidad de desarrollar themes está al alcance de cualquier persona. En realidad, el concepto de theme se diluye y surge el sitio web implementado con bloques del editor Gutenberg en todo su esplendor.
Pero mientras el 40% de la web se adapta a ese nuevo paradigma, en la era pre-FSE ya puedes también editar el sitio completo, excepto la cabecera y el footer general. En este post hemos visto qué es y cómo crear una web de WordPress sin código, sin la función FSE activa. Y cómo se soluciona el problema del control del alineamiento en un theme orientado a bloques de la era pre-FSE, como fundamento del diseño con bloques.
¿Estás preparado ya para crear tu propia web de WordPress sin código?
Dame feedback, por favor.
Deja una respuesta