Anteriomente ya te hemos hablado de qué a partir de la versión 5.8 de WordPress, tienes disponible un conjunto de funcionalidades que se llaman Full Site Editing (FSE) o Edición completa del sitio, en castellano, que básicamente te permiten cambiar partes de tu sitio web desde el Escritorio de WordPress que antes no podías cambiar sin usar código.
Hasta entonces, sólo podías modificar contenido, menús o widgets con las opciones que te permitía el tema que estuvieras usando. Con FSE ahora puedes mover el menú de navegación, añadir iconos sociales, añadir una imagen de cabecera, utilizar diferentes pies de página, crear tu propia paleta de colores, guardar estilos por defecto, etc., independientemente de lo que tenga previamente definido el tema que tengas instalado (con ciertas limitaciones).
La idea del Full Site Editing es que sin necesidad de codificar una línea de código, pases a tener un absoluto control del diseño de tu web. Y no sólo eso, también dispondrás de muchos diseños de patrones pre-definidos entre los que elegir para que la creación de tu web sea como quieras.
En esta entrada te explico a grosso modo los pasos principales a seguir para cambiar tu web a FSE.
Tabla de contenidos
Pasos previos
Realiza una copia de seguridad de tu web
Este es el único paso que puede requerir tener ciertos conocimientos técnicos. Antes que nada, asegúrate de que has hecho una copia de seguridad de tu WordPress. Si sigues nuestros consejos a la hora de elegir un proveedor de hosting, seguramente esta funcionalidad ya la tienes disponible como una funcionalidad básica de tu propio proveedor de hosting. Pero si no es el caso, en esta entrada David nos explica cómo realizar una copia de seguridad en tu web.
Evalúa qué implica cambiar a edición completa del sitio
Dependiendo de la complejidad de tu web actual y especialmente de los plugins que tengas instalados, cambiar a FSE puede ser bastante complejo. Y no me refiero tanto al volumen del contenido que tengas creado, sino a cómo y qué tengas instalado. Me sabe mal decirlo pero es que a veces hemos visto cada web que no sabemos ni cómo pueden estar funcionando…
Ten en cuenta que al cambiar a FSE, por un lado, es posible que te encuentres que algunos plugins dejen de ser necesarios y ya tengas la funcionalidad que te ofrecen en el nuevo editor de bloques. Y, por otro lado, todavía hay un gran conjunto de plugins (aunque cada vez, menos) que son incompatibles con FSE y no puedas mantenerlos.
La primera tarea que debes realizar es la de entender bien todas las funcionalidades que querrás que tenga tu «nueva» web y ver primero cuáles de ellas podrán ser proporcionadas por FSE. Y segundo, para aquellas que son proporcionadas por plugins, evalúa si son compatibles con FSE o qué alternativas tienes.
¿Cómo evalúo si mis plugins funcionarán con la edición completa de WordPress? En todos los plugins puedes ver hasta con qué versión se han probado. Si es igual o posterior a la 5.8, seguramente funcionan correctamente con la edición completa del sitio pero, si no es el caso, no te queda más remedido que probarlo tu directamente. Para ello:
- Crea un entorno de desarrollo en local donde realizar las pruebas.
- Instala (si no te viene por defecto) y activa un tema que soporte Full Site Editing como Twenty Twenty-Two.
- Instala y activa el plugin a probar.
- Prueba el plugin en el editor de bloques: si usa shortcodes, comprueba que funcionen, mira que funcionen las distintas opciones de configuración y que se visualizan bien los resultados.
En general, los plugins que pueden tener más problemas son los que no usan los nuevos bloques y usan widgets o los menús o plantillas clásicas o usan configuraciones de estilos incompatibles con FSE.
Copia el contenido que puedes perder
Cuando cambias de un tema clásico a un tema FSE, lo primero que observas es que has perdido un conjunto de opciones en tu Escritorio sobre la apariencia que antes tenías disponibles (Personalizar, Widgets, Menus, Cabecera y Fondo).
Los temas de bloques no usan ni menús, ni widgets, y la personalización es distinta. Al hacer el cambio, puedes perder cierta información. Haz captura de pantallas de los widgets y copia el texto de los mismos en cualquier editor para poderlo luego añadir con bloques de tema en el sitio. Lo mismo ocurre con la personalización del tema. Haz capturas de pantalla de la configuración de la apariencia que tienes y, si has añadido CSS adicional para personalizar el tema, copia dicho contenido en cualquier archivo de texto para tenerlo disponible cuando lo necesites.
Nelio Content
Estoy tan contento con Nelio Content que parece que me hayan pagado para hablar bién de él… pero es que también a ti te encantará: funciona como prometen, la programación automática de mensajes es increíble, la calidad/precio no tiene parangón y su equipo de soporte se siente como si fueran parte del tuyo.
Panozk
Instala un tema de edición completa del sitio
El siguiente paso es instalar en tu web un tema de edición completa. Para ello, al buscar un nuevo tema, tienes la opción de Filtrar por características. Para encontrar temas de este tipo, aplica el filtro de Edición completa del sitio.
Actualmente (principios de mayo de 2022) tienes más de 70 temas de edición completa del sitio entre los que elegir.
Una vez seleccionado el tema, instálalo y actívalo. Algún tema incluye instrucciones de configuración y/o añade plugins adicionales. Para simplificar, lo que te voy a mostrar a continuación lo he hecho seleccionando el tema Twenty Twenty-Two.
A partir de aquí, debes asegurarte de que tu tema mostrará todo el contenido original que tenías anteriormente. Para ello, primero debes entender cuál es la estructura y diseño del tema que acabas de instalar y así ver dónde deberás hacer las modificaciones pertinentes.
Familiarízate con la estructura y diseño del tema instalado
En FSE, al hacer clic en Editar la apariencia del tema, el editor del tema te muestra las plantillas y las partes de plantilla que tienes disponibles con el tema que tienes instalado. El editor de plantillas es muy parecido al editor de bloques con algunas pequeñas variaciones:
- en la barra lateral izquierda (te aparece si haces clic en el icono de WordPress) puedes ver la estructura de la plantilla o parte de plantilla que estás editando y la opción de volver al Escritorio,
- en la parte superior, a la izquierda tienes los iconos del editor, en el centro puedes ver qué plantilla o parte de plantilla estás editando, y a la derecha las opciones globales, y
- en la barra lateral derecha, las propiedades globales o de los distintos elementos que estás editando.
Sabrás que estás editando una plantilla o una parte de plantilla, en vez de una página o entrada, al ver el icono de estilos globales (con una media luna) que encuentras en la parte superior derecha de la misma.
Las plantillas que vienen con el tema se usan para mostrar las distintas páginas que tenemos en cualquier web incluyendo la plantilla de la home, de una página, de una entrada, de la página de búsqueda o de la página 404 (cuando no encuentra el contenido), entre otras.
Puedes hacer clic en cualquiera de las plantillas y verás la estructura de la misma. Así, por ejemplo, si seleccionas la edición de la plantilla Pagina y haces clic en el icono Vista de Lista que encuentras en la parte superior del editor puedes ver el conjunto de bloques que conforman la estructura de la plantilla. Además, en la parte superior y en la barra lateral derecha también puedes ver las áreas que incluyen partes de plantilla (la cabecera y pie de página, en este caso).
Las partes de plantilla sirven para organizar y estructurar el tema sin necesidad de repetir código, son un conjunto de bloques que muestran cierto contenido en aquellas plantillas en que los incluyes. Por ejemplo, en el tema Twenty Twenty Two, tienes las partes de plantilla de cabecera y pie de página que se incluyen en todas las plantillas excepto en la que está en blanco.
Antes, por ejemplo, cuando querías eliminar una barra lateral de ciertas páginas de tu tema, no te quedaba más remedio que tocar código. Ahora, con FSE, puedes crear y editar las plantillas y cualquiera de las partes de plantilla para la visualización que más te guste de todas tus páginas directamente en el editor. De la misma forma que hemos visto con las plantillas, puedes editar cualquier parte de plantilla y hacer clic en el icono Ver lista del editor para ver la estructura de la misma.
Como puedes ver en la imagen, en la cabecera, el tema ya no usa menús, en su lugar usa un bloque de navegación que incluye la lista de páginas que tuvieras creadas en el sitio.
Añade el contenido de los menús
Supongamos, por ejemplo, que con tu antiguo tema tenías un par de menús definidos (uno principal y otro de pie de página). ¿Cómo los convierto a FSE?
Tranquila, los menús que tenías no te han desaparecido totalmente. Sólo debes asegurarte de que las partes de la plantilla donde se muestra el menú añadas aquellos menús que tenías creados anteriormente en bloques de navegación. En este caso, ve a la cabecera, haz clic en el bloque de navegación y selecciona el menú clásico que tenías creado anteriormente.
De forma automática ya tendrás el menú que tenías en tu web en el nuevo tema.
Haz el mismo proceso para todas aquellas partes de plantilla en las que necesitas añadir los menús que previamente tenías creados.
Añade el contenido de los widgets
En el caso del contenido de los widgets o cualquier otro contenido personalizado que no venga en un plugin compatible con la edición completa del sitio, no te queda más remedio que crearlo tu directamente en aquella plantilla o parte de plantilla que te interese.
Por ejemplo, el pie de página del tema TT1, en el pie de página muestra en tres columnas la información para contactarte y visitar tus redes sociales.
Ya no necesitas un widget para añadir redes sociales. Ahora lo haces mediante bloques. De la misma forma, si antes tenías un widget que mostraba las últimas entradas, ahora dispones del bloque Lista de entradas que puedes añadir como más te interese en el pie de página o en cualquier otro sitio.
Personaliza los estilos globales
Una vez incluido el contenido de los menús y widgets, te queda el trabajo de personalizar los estilos del sitio de forma global: tipo, tamaño y apariencia de textos, colores, otros aspectos de diseño. Dependiendo del tema que tengas instalado, este incluirá más o menos opciones de estilos.
Si quieres más opciones personalizadas de las que dispones con la versión actual de WordPress, te recomiendo que te instales el plugin de Gutenberg que incluye funcionalidades adicionales de FSE que nos llegarán con las próximas versiones.
Resumiendo
Con estos pasos básicos, creo que te puedes hacer una idea del trabajo que implica cambiar una web a FSE.
Ten en cuenta que la edición completa del sitio todavía se encuentra en fase beta y aún quedan bastantes flecos por pulir y funcionalidades por llegar. Si tienes una web sencilla, te gusta experimentar y estar a la última, te animo a que la cambies a un tema de edición completa y te familiarices con todas las funcionalidades nuevas que incluye.
Si, por el contrario, tienes una web compleja, con mucho contenido, y no te gustan demasiado los riesgos, te recomiendo que no te precipites. Haz copia de seguridad y ve experimentando en local con todos aquellos cambios que te gustaría realizar hasta que le cojas el truquillo al editor de plantillas y tengas claro que el resultado y el funcionamiento final es exactamente el mismo que tenías.
Imagen destacada de Kenny Eliason en Unsplash.
Deja una respuesta