Las emisiones digitales de esta publicación se estiman entre 0,010 gr. y 0,179 gr. de CO2 por página vista.
[Post actualizado el 10/08/23] Este post se publicó en agosto de 2021, cuando la fase 2 del proyecto Gutenberg era todavía casi un prototipo. La edición del sitio es, una vez transcurridos un par de años, una característica de WordPress consolida. Nuestro tema Blogpocket Twenty es ahora testimonial, ya que la edición del sitio ya viene de serie con el tema de bloques predeterminado Twenty-Twenty Three. Para estar al día sobre WordPress y Gutenberg, te remito a la etiqueta Gutenberg.
Mi pequeña contribución para que puedas probar la Edición Completa del Sitio (FSE), y entiendas la diferencia entre un theme tradicional de WordPress y uno orientado a bloques, es el tema Blogpocket Twenty.
En este post se realiza una introducción a la función Edición Completa del sitio utilizando Blogpocket Twenty que es plenamente un theme orientado a la FSE.
Vídeotutorial
En este vídeo puedes ver de manera práctica cómo probar la edición completa del sitio (FSE) con el theme Blogpocket Twenty. El vídeo corresponde a la versión 2.0 pero en general todo el proceso sirve también para posteriores versiones.
Descarga e instala la última versión: Blogpocket Twenty 3.0
Descarga el theme Blogopcket Twenty 3.0.
Instala el plugin Gutenberg
La función Edición del sitio no está integrada en el core de WordPress (a fecha 15 de abril de 2021). Solo puedes probarlo si instalas el plugin Gutenberg (o alternativamente, Gutenberg Nightly).
Para activar la función (beta) de Edición del Sitio es obligatorio activar un theme orientado a la FSE. Blogpocket Twenty es un theme de WordPress orientado a la FSE (y solo funciona si tienes activado el plugin Gutenberg).
Inmediatamente después de activar un theme orientado a la FSE verás la sección «Site Editor (beta)» en el menú lateral del Administrador de WordPress.
Todo eso no funciona, y no podrás probar la edición completa del sitio (FSE), si no has instalado previamente el plugin Gutenberg (o Gutenberg – Nichtly).
Diferencia fundamental con un theme tradicional: las plantillas (templates) y las partes de una plantilla (template parts)
No confundamos los themes con las plantillas (templates).
Un theme orientado a la FSE se compone de:
- Plantillas (templates).
- Contenido.
Las plantillas ya existían en los themes tradicionales pero su concepto era un poco difuso. En la era pre-FSE, eran más bien programas (código PHP) que le indicaban a WordPress qué mostrar en cada caso. El cómo mostrarlo se determinaba en la hoja de estilo. En algunos casos, podías establecer el diseño, mediante funciones de WordPress pero siempre con código.
Por ejemplo, podías tener un archivo page.php con el código necesario para mostrar una página de WordPress solicitada pero el estilo (cómo mostrarlo) estaba en sytle.css, probablemente mezclado con el de todas las plantillas.
En la FSE, las plantillas están hechas con bloques de Gutenberg y son diseño exclusivamente. Se adhieren a publicaciones (posts, páginas, etc.) de manera que puedes asociar contenido a plantillas. Por ejemplo, las páginas de los posts de un autor y las de los posts de una categoría podrían estar asociadas a la misma plantilla. Pero la página de inicio (home) no debería estar asociada a la plantillas por defecto «page», sino tener un diseño «vacío».
Las partes de una plantilla se pueden insertar dentro las plantillas. Poseen la misma naturaleza y funcionamiento. Pero las encontrarás aparte, tanto dentro de la función Edición del Sitio como dentro de las carpetas y archivos que conforman el software del theme orientado a la FSE. Por ejemplo, la mayoría de las plantillas llevarán la cabecera y el footer. Éstas serán parte de plantilla.
En la figura que abre este apartado vemos las carpetas y archivos de plantillas y partes de plantillas correspondientes a Blogpocket Twenty.
El archivo theme.json
Hay un elemento nuevo en los themes orientados a la FSE y es el archivo theme.json.
El archivo theme.json de Blogpocket Twenty es muy básico pero plenamente funcional. Si quieres explorar las posibilidades de este archivo para aplicar un estilo un poco más aparente, cámbialo por el theme .son de cualquier theme orientado a bloques FSE.
Explora la función Edición del Sitio
Una vez que tengas instalado y activo el theme Blogpocket Twenty, lo primero que debes hacer es entrar en la función (beta) de Edición del Sitio. Así podrás probar la edición completa del sitio (FSE).
Navega por las plantillas y partes de plantilla con objeto de ver el contenido en bloques de cada una de ellas.
Si te atreves a modificarlas, usa el insertador de bloques para ver todos los bloques nuevos que puedes emplear.
Plantillas de Blogpocket Twenty
Blogpocket Twenty lleva una serie de plantillas pero puedes modificarlas.
- wp-custom-template-inicio. Para asignar a la página de inicio de tu sitio web. Esta operación se explica un poco más adelante y es necesaria si quieres tener un folio en blanco en la home para rellenarla con bloques.
- Home. Es la plantilla que permite mostrar los posts. Debes asociarla a la página del blog si quieres tener las páginas de inicio y del blog separada.
- Singular. Plantilla para mostrar el contenido de un post. Por defecto se asigna a cada post.
- Page. Plantilla para mostrar el contenido de una página. Por defecto se asigna a cada página.
- Index. Es obligatorio que exista y es la plantilla que funciona si no existe otra. En nuestro caso, su contenido es indiferente.
- Archive. Para mostrar las páginas de archivo (author, categorías, etc.)
- Search. Para mostrar la página de resultados de una búsqueda.
- 404. Para mostrar la página de contenido no encontrado.
Partes de plantilla de Blogpocket Twenty
Las parte de plantilla de Blogpocket Twenty 2.0 son las siguientes. Siéntete libre de modificarlas a tu gusto.
- Header. La cabecera compuesta del título del sitio y un menú de navegación. El menú de navegación tendrás que crearlo primero y, luego, entrar en esta plantilla para configurarlo simplemente eligiendo el nombre del menú.
- Footer. El pie de página.
¿Dónde está Apariencia > Personalizar?
Simplemente ha desaparecido.
Entonces, ¿dónde se crean los menús y dónde se realizan los ajustes de la página de inicio?
Entra en Apariencia y haz clic en el botón «Personalizar» dentro del cover del theme activo. Ahí encontrarás la creación de los menús y los ajustes de la página de inicio.
¿Qué página de inicio muestra Blogpocket Twenty por defecto?
La página de inicio por defecto es la del blog.
Si deseas tener página de inicio y página del blog separadas, debes entrar en «Personalizar > Ajustes de página de inicio».
¿Cómo construir una página de inicio en Blogpocket Twenty distinta a la del blog?
En primer lugar, debes crear las dos páginas en blanco y asociarlas a las siguientes plantillas.
- Página «Inicio» asociada a la plantilla «wp-custom-template-inicio«.
- Página «Blog» asociada a la plantilla «home«.
En la figura que abre este apartado, se ve dónde se asignan las plantillas a las páginas: seleccionando, dentro de «Atributos de página», en el desplegable «Template» la plantilla correspondiente.
Después acude a «Apariencia > Ajustes de página de inicio» y establece la opción «Una página estática» vinculando la página «Inicio» como página de inicio y «Blog» como página de entradas.
Cómo crear nuevas plantillas
No tienes por qué ceñirte a las plantillas que presente el theme activo. Puedes añadir plantillas predefinidas desde la función de Edición del Sitio, siempre y cuando no estén establecidas.
Pero también puedes crear nuevas plantillas y partes de plantillas. Simplemente, acude a la opción «Apariencia > Templates» o «Apariencia > Template Parts».
En esas secciones las nuevas plantillas se gestionan como cualquier otra publicación de WordPress: con bloques de Gutenberg. Incluso puedes acceder al código.
¿Cómo descargar el conjunto de plantillas y partes de plantilla?
Entrando en la Edición del Sitio y dentro de cualquier plantilla o parte de plantila, yendo a los tres puntos suspensivos en vertical, accederás a la opción «Export» con la que obtendrás en tu equipo local una copia en zip de todas las plantillas y partes de plantillas.
Esa es la manea de que pudieses lograr una nueva versión de Blogpocket Twenty, una vez que modifiques plantillas y partes de plantillas.
Estilos globales
Una de las opciones interesantes de la nueva Edición del Sitio es «Estilos globales» que te permitirán cambiar la tipografía y los colores, no solo a nivel general sino por tipo de bloque.
Simplemente acude a los tres puntos suspensivos verticales, dentro de cualquier plantilla o parte de plantilla, y elige la opción «Global Styles».
Más información
Cómo deshabilitar las funciones del tema y Bloquear plantillas de bloque para la edición completa del sitio en WordPress.
Conclusiones
Hemos visto cómo probar la edición completa del sitio (FSE) empleando el theme Blogpocket Twenty.
Blogpocket Twenty es un theme experimental orientado a la FSE. Es muy simple pero se ha construido con todas las plantillas predeterminadas para que puedas explorar las posibilidades de un theme orientado a la FSE y aprender las diferencias con un theme tradicional.
También provee dos partes de plantilla (header y footer), junto con un archivo theme.json básico pero que puedes sustituir por cualquier otro para que veas las disparidades.
El objetivo es que instales el theme y compruebes el funcionamiento de la función Edición del Sitio. Trata de modificar las plantillas y obtener una nueva versión del theme.
Dame feedback, por favor
Deja una respuesta