Cómo hacer con Gutenberg un sitio web en forma de agregador de feeds

En este artículo te enseñaremos cómo hacer con Gutenberg un sitio web en forma de agregador de feeds. Desgraciadamente, los agregadores de feeds (al estilo de Feedly) están en desuso. Pero con la nueva función de Edición completa del sitio (FSE, por sus sigla en inglés) de WordPress, los usuarios finales tienen la oportunidad de crear ellos mismos cualquier tipo de sitio, incluso un agregador de feeds. En realidad, la Edición completa del sito viene para devolver la flexibilidad perdida a una plataforma (WordPress) con la que están hechas más de una tercera parte de las webs en el mundo.

¿Qué es la Edición completa del sitio?

En el vlog de Blogpocket (canal de YouTube) puedes acceder a un curso de la Edición completa del sitio (FSE) en entregas semanales.

También desarrollamos un theme orientado a la FSE para que puedas probar la función de Edición completa del sitio y entender el concepto.

Pero, en pocas palabras, se trata de poder editar y modificar todas las plantillas (páginas, posts, index, etc.) y partes de plantilla (header, footter, sidebar, etc.) desde un editor (parecido al editor de bloques) al que se accede desde el Administrador de WordPress.

Eso es fantástico porque cualquiera, aún sin conocimientos técnicos, puede construir el front-end de su sitio web. Algo que antes era solo para desarrolladores y usuarios finales técnicos, ahora está al alcance de cualquiera.

Ejemplo: Cómo hacer con Gutenberg un sitio web y en forma de agregador de feeds

Blogpocket.app es la versión PWA de Blogpocket.com. Una aplicación web progresiva (PWA; por sus siglas en inglés) funciona perfectamente desde un navegador (Chrome recomendado) como si fuese un sitio web normal y corriente. Sin embargo, también puedes ponerla en funcionamiento en tu dispositivo móvil con una experiencia similar a cualquiera de las apps que descargas de Google Play o App Store, pero con la salvedad de que no es necesario pasar por una tienda de apps para descargarla e instalarla.

A continuación, puedes acceder a una master class en vídeo donde se explica cómo se construyó blogpocket.app con Gutenberg y la FSE.

Comentarios a la implementación

Para aprender cómo hacer con Gutenberg un sitio web, debes prestar atención a los siguientes puntos importantes:

• FSE. Para que puedas utilizar la función del Edición completa del sitio debes tener activo el plugin Gutenberg y un tema orientado a la FSE. Rick (de WPentire) es un tema sencillo orientado a la FSE y que hemos utilizado como base de este experimento.
• PWA. Construye primero el sitio usando la FSE y Gutenberg. Cuando esté todo funcionando correctamente, instala y activa el plugin SuperPWA para convertir el sitio de WordPress en una PWA. Aquí tienes información acerca de la instalación y puesta en funcionamiento de una aplicación web progresiva. En el vídeo, no hemos entrado en detalles sobre este apartado porque será objeto de un artículo aprte.
• Bloque RSS. El bloque RSS es un bloque nativo de configuración muy sencilla que apenas requiere indicar la URL del archivo feed y cuántos artículos se mostrarán. Lo que se visualiza es una lista de elementos y dependiendo del tema que se esté utilizando, la lista se puede mostrar de diferentes maneras. Por ejemplo, en Rick no aparece el circulito propio de las listas no numeradas. Si sabes un poquito de CSS solamente hay que añadir el siguiente código en Apariencia > Personalizar > CSS adicional.

ul.wp-block-rss {
    list-style: circle;
}

• Home. Crea las páginas Home y Blog; y define en Apariencia > Personalizar > Ajustes de la página de inicio que la página de inicio estática sea Home y la de las páginas de entradas Blog. Para que la página de inicio muestre solo la cabecera y el footer, edita la plantilla Page con la Edición del sitio y elimina todos los bloques que hay entre la cabecera y el footer, excepto el de contenido de la página. Ten en cuenta que este cambio afectará a todas las páginas, no solo a la home. Si quieres diferenciar tendrás que crear una nueva plantilla en la que hagas esos cambios y asignarla a la página home en la configuración de ésta.
• Configuración del bloque RSS. La página Home solo llevará un título y el bloque RSS. En realidad, piensa en ella como el contenido. La plantilla Home es la que lleva el cómo se visualizará. Por ejemplo, puedes hacer que la página Home no muestre el ancho de contenido por defecto (el que está predefinido para el tema) alterando la configuración del bloque de contenido en la plantilla Page. Para alterar el ancho de la columna de contenido, selecciona el bloque de grupo contenedor, deshabilita el switch «Heredar la disposición por defecto» y toca los valores del apartado Disposición (admite píxeles y tanto. por ciento o rem).
• Para que el bloque RSS se vea bien en móvil. Toca también el valor de Relleno (padding) para que el bloque RSS no se pegue a los extremos de la pantalla en dispositivos móviles y se lleguen a ver los circulitos.
• Estilos globales. Utiliza los estilos globales para cambiar la altura de las líneas, el color del fondo y cualquier otro parámetro.
• Partes de plantilla. Altera la cabecera y el footer que trae el tema Rick de origen y diséñalo a tu gusto con los bloques nativos del editor. Es muy fácil tal y como se explica en el vídeo.

Conclusiones

En este artículo has aprendido cómo hacer con Gutenberg un sitio web en forma de agregador de feeds, al estilo de Blogpocket.app.

El sitio resultante es también una PWA que se puede utilizar en un dispositivo móvil como cualquier otra app nativa.

Para implementar el sitio de WordPress solo se han empleado bloques nativos de Gutenberg y todo se hizo editando con la función de Edición completa del sitio (FSE) las plantillas y partes de plantilla del tema Rick de WPEntire. Todo ello se puede ver en el vídeo que se incluye.

Comparte en Mastodon:

Y aún hay más…

Suscríbete a la newsletter

En la newsletter «WP al día» recopilamos las ideas, trucos y noticias de actualidad acerca de WordPress, Gutenberg y la Edición completa del sitio. Recíbela todos los lunes a primera hora.

Suscríbete ahora y descarga, entre otros, nuestro último ebook «Un blog de 21 años (la historia jamás contada)!.

¡Quiero suscribirme!