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

En este post se realiza una introducción a la función Edición del Sitio Completo utilizando Blogpocket Twenty 2.0 que es plenamente un theme orientado a la FSE.

Mi pequeña contribución para que entiendas la diferencia entre un theme tradicional de WordPress y uno orientado a la Edición del Sitio Completo (FSE, por sus siglas en inglés) es Blogpocket Twenty 2.0.

En este post se realiza una introducción a la función Edición del Sitio Completo utilizando Blogpocket Twenty 2.0 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 se instala y se configura Blogpocket Twenty 2.0, mediante la función beta Edición del Sitio.

Descarga Blogpocket Twenty 2.0

BLOGPOCKET-TWENTY-2-0-1024x768 Blogpocket Twenty 2.0: cómo probar la Edición del Sitio Completo (FSE, por sus siglas en inglés)

Entra en Lanzatu.blog y descarga el theme Blogopcket Twenty 2.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].

Instala Blogpocket Twenty 2.0

BLOGPOCKET-20-1-1024x568 Blogpocket Twenty 2.0: cómo probar la Edición del Sitio Completo (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 2.0 es un theme de WordPress orientado a la FSE.

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 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 2.0: cómo probar la Edición del Sitio Completo (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 2.0.

El archivo json

Hay un elemento nuevo en los themes orientados a la FSE y es el archivo experimental-theme.json.

El archivo json de Blogpocket Twenty es muy básico. Si quieres explorar las posibilidades de este archivo para aplicar un estilo un poco más aparente, cámbialo por el json del theme Q.

Explora la función Edición del Sitio

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

Una vez que tengas instalado y activo el theme Blogpocket Twenty 2.0, lo primero que debes hacer es entrar en la función (beta) de Edición del Sitio.

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 2.0

Blogpocket Twenty 2.0 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 2.0

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 2.0: cómo probar la Edición del Sitio Completo (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 2.0 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 2.0: cómo probar la Edición del Sitio Completo (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 2.0: cómo probar la Edición del Sitio Completo (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 2.0: cómo probar la Edición del Sitio Completo (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 2.0, una vez que modifiques plantillas y partes de plantillas.

Estilos globales

BLOGPOCKET-20-8-1024x541 Blogpocket Twenty 2.0: cómo probar la Edición del Sitio Completo (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”.

Conclusiones

Hemos visto una introducción general a la Edición del Sitio Completo (FSE por sus siglas en inglés) empleando el theme Blogpocket Twenty 2.0.

Blogpocket Twenty 2.0 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 json muy básico pero que puedes cambiar por el del theme Q 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

¿Estás buscando hosting?

Aloja tu web en SiteGround

BIG-SHOES-PODCAST Blogpocket Twenty 2.0: cómo probar la Edición del Sitio Completo (FSE, por sus siglas en inglés)

Deja un comentario

Información básica sobre protección de datos Ver más

  • Responsable Antonio Cambronero.
  • Finalidad  Moderar los comentarios.
  • Legitimación Tu consentimiento.
  • Destinatarios  SiteGround.
  • Derechos Acceder, rectificar y suprimir los datos.
  • Información Adicional Puedes 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