WordPress ha tardado en madurar, pero ha pasado de ser una simple plataforma de blogs a un robusto Sistema de Gestión de Contenidos (CMS) que casi domina la web. Los mayores avances se han producido en la creación de diseños de sitios. La edición completa de sitios (FSE, full site editing) de WordPress es una forma ambiciosa de poner herramientas complejas al alcance de todos.
Esta completa guía explorará la historia y la funcionalidad de la edición completa de sitios de WordPress. El objetivo final es mostrarte cómo funciona FSE y permitirte desarrollar tus propios diseños de sitio, como los profesionales.
Breve historia de la creación de diseños y maquetación en WordPress
Comprender la evolución del diseño de sitios y maquetación dentro de WordPress es una parte esencial para apreciar la importancia de FSE. La herramienta clave en la que nos encontramos ahora es el Editor Clásico.
Por supuesto, esto no siempre ha sido «clásico». Primero fue el editor TinyMCE, por defecto desde la primera versión de WordPress hasta 2018. Se trata de un sencillo editor de texto What You See Is What You Get (WYSIWYG, en español Lo Que Ves es lo Que Hay) que te permite introducir contenido y HTML básico, junto con algunos estilos de formato. De hecho, todavía puedes obtener el Editor TinyMCE, ya que es una herramienta comercial:
Los principales inconvenientes del Editor TinyMCE son la falta de opciones de previsualización front end y una menor flexibilidad de la que a veces te gustaría. Los frameworks de temas se convirtieron en una alternativa viable y potente. Por supuesto, Genesis Framework de StudioPress sigue con nosotros, pero había algunos otros, como Thesis.
Aquí puedes ver cómo pasamos de la edición de texto al diseño web visual. El framework te ofrece opciones en el back-end de WordPress, que te permiten cambiar aspectos del front end. Además, obtienes más funcionalidad a «nivel básico» para hacer más cambios, como hooks y filtros, soporte para plantillas y mucho más.
Sin embargo, esto seguía sin ser muy accesible para un usuario normal, por lo que se popularizaron los plugins constructores de páginas. Los utilizarías junto con el Editor TinyMCE/Clásico para disponer de un sistema de arrastrar y soltar para diseñar tu sitio. Estos plugins son en gran medida los mismos que en 2011. Divi y Beaver Builder siguen dominando, aunque Elementor también es un gigante:
Te conviene leer la siguiente sección para entender por qué hay alternativas al Editor TinyMCE y a un plugin constructor de páginas.
El Editor de bloques y la edición completa del sitio de WordPress
WordPress es el número uno en popularidad, pero para llegar ahí ha tenido que defender su título. A lo largo de los años, muchas otras plataformas han saturado el mercado.
Squarespace, Wix, Medium y muchas otras quieren el mismo público y la misma base de usuarios que WordPress, y hasta el Editor de Bloques, todas tenían una experiencia de edición mucho mejor.
Esta era una gran preocupación para la dirección de WordPress, ya que otras plataformas en ese momento estaban ganando una tracción más visible. La competencia también tenía interfaces modernas, visuales y eficaces, incluso para el simple control del diseño.
El Editor de Bloques es una forma modular de construir las entradas y páginas de tu sitio, aunque también tiene inconvenientes. Para empezar, su alcance limitado significa que usarlo probablemente requiera un plugin constructor de páginas si quieres hacer cambios «más profundos». También seguirías necesitando conocimientos de desarrollo para construir un sitio completo, lo cual es una barrera creativa para la que el equipo de WordPress tiene una solución.
Qué es la edición completa de tu sitio en WordPress: (FSE, full site editing)
La edición completa del sitio de WordPress representa la última y mejor forma de desarrollar tu sitio. Se basa en el uso de Bloques para componer tu diseño, y va más allá de las entradas y páginas individuales. En esencia, FSE te permite gestionar todos los aspectos del diseño de tu sitio web en WordPress mediante una interfaz unificada e intuitiva.
Esta es ahora la forma «oficial» de editar tu sitio. Abarca todos los aspectos de tu sitio:
- Edición de la navegación. El antiguo método que utilizaba la pantalla Apariencia > Constructor de Menús se incorpora ahora al Editor de Sitios.
- Estilos globales. Tienes un mayor control sobre el aspecto de todo tu sitio. Esto incluye colores, tipografía, espaciado y mucho más.
- Edición de plantillas. Esto solía requerir conocimientos de desarrollo y programación como PHP, HTML y CSS. Ahora, puedes utilizar el Editor de Sitios para crear y modificar plantillas para las distintas partes de tu sitio sin necesidad de código.
- Patrones de Bloques. Considéralos elementos de diseño reutilizables mediante colecciones de Bloques que puedes insertar en tus diseños.
Dada la evolución del editor, algunas funcionalidades también están desapareciendo. Por ejemplo, ya no necesitas áreas de widgets, aunque WordPress aún las utiliza como funcionalidad heredada para los temas que no son Bloques.
Volveremos sobre lo que la edición completa del sitio de WordPress puede ayudarte a conseguir más adelante. Antes de eso, profundicemos primero en por qué necesitamos FSE.
Por qué FSE está en WordPress
El equipo de WordPress tiene varias razones para introducir FSE. Algunas de ellas son consideraciones técnicas. Por ejemplo, el Editor de Bloques no nos permite editar todos los aspectos del sitio cuando la funcionalidad debería estar ahí en primer lugar.
Es difícil entender por qué se ha tardado tanto en dejarnos trabajar en los estilos de las plantillas sin necesidad de código. Entre el Editor Clásico, los frameworks, los plugins constructores de páginas y el Editor de Bloques, nunca hemos tenido la oportunidad. FSE soluciona esto de forma nativa para WordPress.
Esta simplificación unifica la experiencia de edición y la pone bajo el control del equipo central de WordPress en lugar de desarrolladores externos. También significa que la curva de aprendizaje es consistente. Entre el contenido, la maquetación y el diseño, tienes una experiencia familiar de una pantalla a otra.
Esta experiencia también aporta longevidad. La edición completa del sitio de WordPress no desaparecerá; simplemente evolucionará con el tiempo. Esto proporciona a la plataforma una base para adaptarse a lo que el equipo de desarrollo principal desee aportar a WordPress.
En general, este empoderamiento se extiende desde los desarrolladores hasta los usuarios finales. La edición completa del sitio de WordPress ofrece a todos un mayor control sobre los cambios de diseño que deseen realizar sin depender de desarrolladores, personalizaciones complejas o conocimientos de programación.
Las alternativas a FSE
Para el equipo de WordPress, FSE no es sólo el presente, sino el futuro de la plataforma. Sin embargo, necesitarás un tema compatible para utilizarlo (de lo que hablaremos más adelante). Es más, puede que otras empresas de WordPress no estén de acuerdo, especialmente las que tienen productos de la competencia.
Por ejemplo, los desarrolladores web de WordPress argumentarían que confiar el diseño de tu tema a alguien con experiencia es una buena idea. Estaríamos de acuerdo en muchos casos, especialmente si tienes necesidades complejas, el presupuesto adecuado y tiempo.
Por supuesto, el Editor de Bloques sigue siendo viable para la mayor parte de la creación y personalización de contenidos. El salto de esto a la edición completa del sitio será sólo un pequeño salto, y es probable que ya lo utilices:
Muchos usuarios recurrirán al Editor de Bloques en su mayor parte y luego incorporarán otra solución. Añadir un plugin constructor de páginas proporciona algunas de las funcionalidades de las que carece el Editor de Bloques. Divi, Elementor, Beaver Builder, Brizy y muchos más tienen grandes conjuntos de funcionalidades y permiten personalizaciones y desarrollos más profundos:
Para una experiencia diametralmente opuesta a la edición completa del sitio en WordPress y un regreso a donde todo esto empezó, podrías optar por un CMS completamente nuevo: ClassicPress.
La filosofía del proyecto es que la evolución de WordPress es una gran idea, aparte del Editor de Bloques y, por extensión, FSE. Como tal, el fork de ClassicPress no lo incluye. En su lugar, crearás sitios utilizando el Editor Clásico o TinyMCE, como en el pasado.
Es esencialmente una solución única a la inmadurez del Editor de Bloques en su primer lanzamiento. En su momento, el concepto tenía sentido teórico. Sin embargo, dada la experiencia de edición actual de WordPress, hay pocas razones para optar por ClassicPress.
Cómo funciona la edición completa de WordPress
En pocas palabras, la edición completa del sitio de WordPress extiende la funcionalidad del Editor de bloques a todo tu sitio. Para utilizar FSE, necesitas un «tema de bloques» o «tema FSE» que lo soporte. Hablaremos más sobre esto más adelante.
A grandes rasgos, el funcionamiento de FSE es sencillo:
- FSE utiliza Bloques. Al igual que la iteración actual del editor de WordPress, todo tu sitio utiliza Bloques para cada componente. Aquí, tanto los elementos de contenido individuales como los componentes estructurales más grandes (como encabezados y pies de página) utilizarán Bloques.
- Puedes editar plantillas de páginas dentro de WordPress. Ya no es necesario tener conocimientos de PHP para modificar los archivos de plantilla. En su lugar, puedes crearlas y editarlas desde el Editor del Sitio.
- Hay acceso a herramientas de diseño para todo el sitio. Veremos el panel Estilos globales más adelante, pero te permite controlar elementos de diseño que afectan a todo tu sitio. En muchos casos, no necesitarás CSS personalizado para implementar tu visión.
- Los Bloques Patrón te permiten construir rápidamente. Al igual que con el Editor de Bloques, hay diseños para secciones comunes del sitio que puedes insertar y personalizar sin restricciones.
- El archivo theme.json es fundamental para FSE. Este archivo de configuración definirá los estilos y ajustes fundamentales de tu tema. Es un punto de partida para seguir personalizando tu sitio, pero también puede ser el «centro» de tu desarrollo.
La mayoría de los usuarios no utilizarán una versión de WordPress anterior a la 5.9, pero si es así, tendrás que actualizarla para aprovechar FSE. Como hemos indicado, también necesitarás un tema compatible. Hablemos de esto rápidamente.
Elegir un tema de FSE adecuado
Afortunadamente, elegir un tema de bloque requiere el mismo nivel de cuidado que cualquier otro tipo de tema. Tendrás que fijarte en algunas facetas objetivas para asegurarte de que descargas una solución sólida:
- Comprueba si hay actualizaciones periódicas del código base del tema.
- Averigua qué opinan otros usuarios sobre el tema a través de valoraciones y reseñas.
- Asegúrate de que el desarrollador ofrece el nivel de soporte adecuado a tus necesidades.
Dado que la edición completa de sitios en WordPress es una novedad en la plataforma, tienes a tu disposición menos opciones de temas. Sin embargo, esto no significa que la calidad sea difícil de encontrar. Muchos grandes desarrolladores tienen su propia versión de un tema FSE/Bloque. Uno de los primeros fue la versión FSE de Neve de ThemeIsle:
La versión «tradicional» o «clásica» del tema utiliza el antiguo Personalizador de la pantalla Apariencia. Esta versión incorpora el Editor de Sitios en su totalidad y ofrece un mejor rendimiento subjetivo.
Hay otros temas en bloque a tener en cuenta, como Portfolio WP y Mugistore. Sin embargo, Ollie es probablemente el mejor de todos:
Se compromete con la edición completa del sitio de WordPress sin dudar. Dispone de un agradable asistente de incorporación, e incluso tiene una versión premium que incluye montones de elementos y plantillas de la Biblioteca de Patrones.
Incluso el tema predeterminado Twenty Twenty-Four es ahora una opción viable para tu sitio:
La capacidad y profundidad del Editor de Sitios nos permite construir sobre (y ampliar) temas que a menudo requieren mucho código y recursos. Democratiza la capacidad de construir y desarrollar temas, y la interfaz principal es el primer punto de contacto para ello.
Recorriendo la interfaz principal de FSE
Para encontrar el Editor de Sitios, ve a Apariencia > Editor dentro de WordPress:
Esta pantalla es bastante sencilla. En la parte derecha, verás la vista previa del diseño. Puedes hacer clic en ella para abrir la interfaz del Editor de Sitios para tu página de inicio. A la izquierda hay una serie de enlaces a otras páginas de edición para tareas específicas. En breve veremos en profundidad estas pantallas.
Antes de entrar en cada una de las cinco pantallas de FSE, ten en cuenta que puedes salir del Editor de Sitios mediante el logotipo de WordPress situado en la esquina superior izquierda de la pantalla. Como alternativa, puedes hacer clic en la flecha «atrás» de la página principal de Diseño :
Una vez aclarado esto, pasemos a utilizar FSE.
Los 5 pilares de la edición completa de sitios de WordPress
Ahora examinaremos cada pantalla del editor de sitios en el orden en que aparece en su navegación. De hecho, ¡esto nos lleva a hablar de esa pantalla!
1. Navegación
La página Navegación sustituye a la pantalla Apariencia > Menús. Una vez que entres en ella, verás una lista de entradas y páginas de tu sitio:
Si se trata de un sitio nuevo, aquí verás todas tus entradas y páginas. Esto puede resultar confuso porque representa tu menú de navegación principal. Cerca del encabezado Navegación, abre el menú Acciones. Esto te dará opciones para editar el menú, cambiarle el nombre, borrarlo o duplicarlo:
Si haces clic en Editar, se abrirá una versión del Editor de Bloques que contiene tu menú como Bloque de Navegación:
En la barra lateral, tienes opciones para mover cada entrada hacia arriba o hacia abajo, eliminarla del menú o crear un submenú a partir de ella:
Cada entrada del menú utiliza un Bloque de Enlace de Página, que tendrá sus propias opciones. Tienes ajustes de formato inline, junto con ajustes de estilo de la barra lateral:
Ten en cuenta que aquí puedes añadir imágenes inline, submenús y mucho más. Es más flexible que la forma clásica de crear navegación. Para añadir simplemente un elemento al menú, haz clic en el icono Más y selecciona tu entrada o página:
Una vez guardados los cambios, verás que la navegación refleja tus retoques. Para crear más menús, puedes utilizar el enlace Acciones > Duplicar en la página Navegación.
2. Estilos
La pantalla Estilos es la forma en que controlas el aspecto de tu sitio a nivel global. La barra lateral ofrece unas cuantas paletas diferentes y ajustes de tipografía para distintos diseños:
Si haces clic en cualquiera de ellas, verás el diseño en su lugar en tu sitio. Sin embargo, en la parte superior de la barra lateral hay un icono en forma de «lápiz» para realizar más cambios en el Editor de Sitios:
Cada una de las opciones de la barra lateral abarca colores, diseños, tipografía e incluso ajustes de sombra. Por ejemplo, puedes seleccionar fuentes para todo el sitio y aplicarlas a varios elementos de tu diseño:
Profundizar en los menús a menudo te dará más opciones con las que jugar, como espaciado, colores y más. La sección Diseño te permite personalizar las dimensiones de tu área de contenido principal, junto con el relleno y el espaciado entre bloques:
Si quieres ver cómo quedan estos cambios sin navegar por tu sitio, puedes utilizar el icono del «ojo» para abrir el Libro de Estilo. Es una práctica herramienta de visualización que encantará a los diseñadores:
Por último, aunque no nos centraremos en ello aquí, también puedes personalizar el aspecto de cada Bloque de tu sitio. Por ejemplo, puedes basarte en el estilo global de un Bloque de Párrafo. De nuevo, cuando termines, puedes guardar tus cambios, y éstos se aplicarán a tu sitio.
Utilizar el archivo theme.json con la edición completa del sitio de WordPress
Antes de pasar a la siguiente pantalla de FSE, debes conocer el archivo theme.json. Se trata esencialmente de la versión para desarrolladores de las pantallas de Estilos.
Te permite definir los estilos predeterminados para tu sitio y sus Bloques, y lo utilizarás como archivo de configuración. Además, utiliza el formato JSON, por lo que ofrece una experiencia menos pesada en cuanto a código que en el pasado.
En última instancia, debes saber que todo lo que puedas hacer en theme.json, también podrás hacerlo en el Editor de Sitios.
3. Páginas
La pantalla Páginas duplica la funcionalidad de las pantallas clásicas Entradas y Páginas del panel de control de WordPress. Por ejemplo, verás una lista de estados que filtran tus páginas en Publicado, Programado, Borradores y otros:
Cada página tiene acciones adicionales, como Editar, Ver, Renombrar y Borrar. También puedes editar una página utilizando el icono del «lápiz». En la parte superior de la lista, hay un botón Añadir nueva página que hace lo obvio.
Si ya utilizas el Editor de Bloques, estas pantallas te resultarán más familiares. Sin embargo, aunque aquí tienes la misma funcionalidad que habitualmente, el Editor de Sitios te ofrece algunos Bloques de Temas adicionales para ayudarte a construir tu sitio. Éstos incluyen casos de uso típicos como añadir un logotipo del sitio, navegación, autores, comentarios y mucho más:
Uno de ellos — el Bloque de Bucle de Consulta — puede ayudarte a realizar tareas para las que a menudo necesitarías PHP. Por ejemplo, como te permite mostrar entradas basándote en parámetros específicos, podrías mostrar tus últimas entradas o incluso crear un portfolio. Sin embargo, nada de esto puede suceder sin las dos últimas pantallas del Editor de Sitios.
4. Plantillas
Las plantillas son un elemento básico del desarrollo de WordPress. Son diseños reutilizables que te ayudan a definir la estructura de las distintas partes de tu sitio. Normalmente se necesitan conocimientos de PHP, pero puedes personalizarlas todas (y crear otras nuevas) sin código dentro del editor del sitio.
Trabajar con plantillas sigue el mismo enfoque que con las entradas y las páginas: utilizarás el Editor de Sitios para añadir Bloques a la plantilla y luego guardar los cambios. Por supuesto, éstos se aplicarán a todas las páginas que utilicen la plantilla en cuestión.
Para crear una nueva plantilla, haz clic en el botón Añadir nueva plantilla:
Esto te llevará a través de un asistente rápido para seleccionar el tipo de plantilla que deseas crear y un Patrón de Bloques adecuado para iniciar el diseño. Estos patrones son el tema central de nuestra última sección.
5. Patrones
Los Patrones de Bloques son colecciones relacionadas de Bloques que cumplen funciones específicas en tu sitio. Por ejemplo, puedes introducir un patrón de cabecera completo con logotipo, navegación y título del sitio:
Crearlos es sencillo, aunque, sin el editor del sitio, tendrías que registrar estos patrones utilizando PHP. Ahora, sin embargo, puedes utilizar la página Patrones:
En la parte izquierda, verás todos los patrones disponibles divididos en carpetas llamadas «tipos» Son una forma estupenda de construir rápidamente el diseño de un sitio, y a menudo tienen un aspecto fantástico.
El botón Añadir Nuevo Patrón abre el editor y te permite crear esas secciones tú mismo. Esto te permite crear elementos reutilizables para tu sitio, lo que representa una forma sostenible y autosuficiente de desarrollar sitios para ti y para cualquier otra persona con la que trabajes.
Consejos sobre cómo utilizar la edición completa del sitio de WordPress para crear diseños
Hay mucho en lo que sumergirse cuando se trata de la edición completa del sitio de WordPress, y no podemos abarcar todo lo que puedes hacer con él. Sin embargo, podemos darte algunos consejos para sacar el máximo partido a FSE.
Por ejemplo, puedes exportar tus plantillas y estilos para reutilizarlos en otros sitios. Para ello, entra en el editor del sitio para cualquier entrada o página y haz clic en el menú Opciones de la barra de herramientas superior. En el menú desplegable, elige Exportar:
Esto te dará un archivo ZIP de tu tema, y si necesitas importarlo, puedes hacerlo utilizando el plugin Importador de WordPress.
El icono Buscar de las pantallas del editor de sitios y la barra de búsqueda de la barra de herramientas del Editor de Bloques te dan acceso a la Paleta de Comandos o al Centro de Comandos de WordPress. Si utilizas editores de código, entenderás cómo funciona esto. Es una forma de llegar a casi cualquier lugar dentro del Editor de Sitios utilizando una consulta de búsqueda contextual e incluso ejecutar comandos:
Utilizarla puede acelerar tu desarrollo y reducir el número de acciones de teclado y ratón que necesitas realizar. Desde aquí puedes añadir, eliminar y editar todo tipo de elementos del sitio, además de alternar diferentes vistas y trabajar con patrones.
Resumen
La edición completa del sitio de WordPress representa la forma actual de diseñar tu sitio sin código. Es un avance significativo respecto a las iteraciones anteriores de edición de contenido, ya que te ofrece un amplio conjunto de opciones con las que jugar.
Nos gusta lo flexible que es: los propietarios de sitios típicos no tendrán que tocar ni una línea de código y podrán trabajar en las pantallas del Editor de Sitios. Los desarrolladores tienen acceso al archivo theme.json, del que hablaremos en un próximo artículo. En cualquier caso, ahora mismo tenemos la mejor herramienta para crear un sitio web de WordPress según tus especificaciones exactas.
¿Quieres empezar a utilizar la edición completa de sitios de WordPress para tus proyectos de WordPress? ¡Danos tu opinión en la sección de comentarios más abajo!
Deja una respuesta