Blogpocket Twenty: cómo probar la Edición Completa del Sitio (FSE, por sus siglas en inglés)

En este artículo se explica cómo probar la Edición Completa del Sitio (FSE) con el theme Blogpocket Twenty.

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.

Para una introducción a la FSE, accede al post de Blogpocket Creación de un theme de WordPress orientado a bloques y uso de la opción experimental FSE (edición completa del sitio).

Si deseas mantenerte actualizado, en la newsletter estoy publicando todos los lunes las últimas noticias sobre WordPress, Gutenberg y la FSE. Suscríbete ahora.

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

blogpocket-twenty-3-1024x768 Blogpocket Twenty: cómo probar la Edición Completa del Sitio (FSE, por sus siglas en inglés)

Entra en Lanzatu.blog y descarga el theme Blogopcket Twenty 3.0.

Te recomiendo que instales un WordPress nuevo en tu ordenador, utilizando la aplicación Local (antes «Local by Flywheel»). La Edición del Sitio es una función beta y lógicamente no es conveniente ejecutarla en entornos reales o de producción.

Para aprender el funcionamiento de Local, te invito a leer Los 5 mejores minutos que pasarás hoy: mi truco para crear una web de pruebas en local (Mac, PC o Linux).

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).

Una de las formas más rápidas de comenzar a realizar pruebas alfa / beta es instalar el complemento Gutenberg Nightly, que incorpora la última compilación del proyecto Gutenberg. Por lo general, para obtener la última compilación, uno tendría que instalar NodeJS y npm y usar la línea de comando para configurarlo. Este proceso puede resultar prohibitivo, junto con el vertiginoso ritmo de desarrollo de Gutenberg, para los usuarios menos técnicos que quieran empezar a realizar pruebas. [Extraído de Set Up a Gutenberg Test Site in 2 Minutes with the Gutenberg Nightly Plugin].

BLOGPOCKET-20-1-1024x568 Blogpocket Twenty: cómo probar la Edición Completa del Sitio (FSE, por sus siglas en inglés)

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)

blogpocket-20-2 Blogpocket Twenty: cómo probar la Edición Completa del Sitio (FSE, por sus siglas en inglés)

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

BLOGPOCKET-20-3-1024x646 Blogpocket Twenty: cómo probar la Edición Completa del Sitio (FSE, por sus siglas en inglés)

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?

BLOGPOCKET-20-4-1024x715 Blogpocket Twenty: cómo probar la Edición Completa del Sitio (FSE, por sus siglas en inglés)

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?

BLOGPOCKET-20-5-1024x499 Blogpocket Twenty: cómo probar la Edición Completa del Sitio (FSE, por sus siglas en inglés)

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.

BLOGPOCKET-20-6-1024x563 Blogpocket Twenty: cómo probar la Edición Completa del Sitio (FSE, por sus siglas en inglés)

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?

BLOGPOCKET-20-7-1024x560 Blogpocket Twenty: cómo probar la Edición Completa del Sitio (FSE, por sus siglas en inglés)

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

BLOGPOCKET-20-8-1024x541 Blogpocket Twenty: cómo probar la Edición Completa del Sitio (FSE, por sus siglas en inglés)

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».

6 de agosto de 2021
Aviso: hay un error conocido con los estilos globales cuando se usa WordPress 5.8 y Gutenberg. Falta la actualización CSS en la parte frontal del sitio web. El error se ha encontrado y se solucionará en Gutenberg 11.3 .

La versión 3.0 de Blogpocket Twenty adopta los archivos theme.json y functions.php de este ejercicio de Carolina Nymark. Más información: FullSiteEditing.com

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 un comentario

Ver más

  • Responsable: Antonio Cambronero.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento:  No se ceden o comunican datos a terceros para prestar este servicio. El Titular ha contratado los servicios de alojamiento web a SiteGround que actúa como encargado de tratamiento.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.

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

Ir al contenido