Uso del nuevo complemento de WordPress Gatsby Source

En mi artículo anterior, hablé de cómo aprender a crear un sitio Gatsby desacoplado con WordPress utilizando el complemento Gatsby Source WPGraphQL. El proyecto se realizó siguiendo la versión en desarrollo de WPGraphQL y un excelente tutorial de Henrik Wirth. Aunque WPGraphQL se usó en algunos sitios de producción en ese momento, hubo muchas iteraciones que introdujeron cambios importantes. Desde el lanzamiento de WPGraphQL v1.0 en noviembre pasado, el complemento es estable y está disponible a través del directorio de complementos de WordPress.

El complemento WPGraphQL se puede usar para crear un sitio que use WordPress para la administración de contenido, pero con una interfaz impulsada por Gatsby. A esto lo llamamos un CMS “desacoplado” o “sin cabeza” porque el back-end y el front-end del sitio son entidades separadas que aún se comunican entre sí a través de API donde los componentes del front-end consumen datos del CMS .

El sitio del complemento WPGraphQL tiene documentación sólida paso a paso para comenzar, y la publicación del anuncio de lanzamiento enumera nueve ejemplos de sitios de nivel de producción que utilizan el complemento.

En el verdadero sentido de un sitio “desacoplado” o “sin cabeza”, WPGraphQL se puede utilizar para portar datos de WordPress a otros marcos, como Next.js, Vue.js, entre otros. Para el marco de Gatsby, se recomienda el complemento Gatsby Source WordPress, que utiliza WPGraphQL para obtener datos de WordPress.

Configuremos todo juntos y recorramos el complemento.

Requisitos previos

En mi artículo anterior, cubrimos los requisitos previos necesarios para configurar sitios de WordPress y Gatsby, y para transferir datos de back-end de WordPress a un sitio de front-end con tecnología de Gatsby con implementación del sitio. Me estoy saltando muchos de esos detalles aquí porque los conceptos fundamentales son los mismos para este artículo, excepto que esta vez los datos de WordPress se obtienen mediante el complemento Gatsby Source de WordPress.

Si es nuevo en Gatsby y acaba de subirse al tren del generador de sitios estáticos generados por Gatsby, le sugerimos leer “Una revisión honesta de Gatsby” del experto en React David Cramer y “Gatsby vs Next.js” de Jared Palmer. Lo que vamos a cubrir no es para todos y estos artículos pueden resultarle útiles para evaluar usted mismo si es la tecnología adecuada para usted y su proyecto.

WPGraphQL, o GraphQL, es la API de lenguaje de consulta principal utilizada en el marco de Gatsby. Hay actualizaciones frecuentes en GraphQL y eso a menudo requiere conocimiento experto y estar atento a los cambios importantes. Después de todo, GraphQL está diseñado por expertos de React para otros expertos de React. Dicho esto, hay algunas instrucciones para la solución de problemas y un WPGraphQL Slack donde los autores del complemento de WordPress WPGraphQL y Gatsby Source participan activamente y ayudan a responder preguntas.

Este artículo no es una guía paso a paso sobre cómo utilizar el complemento de WordPress Gatsby Source. Nuevamente, esto ya está disponible en la documentación de Gatsby. Por el contrario, si eres un experto en React, JavaScript, Node.js o GraphQL, entonces lo que cubrimos aquí probablemente sea algo que ya sabes. Este artículo es un artículo de opinión basado en mi experiencia personal, que espero sea útil para el usuario promedio de WordPress con conocimientos básicos sobre el tema.

Y, antes de comenzar, vale la pena mencionar que el complemento Gatsby Source WordPress fue completamente reescrito en la versión 4 y utiliza WPGraphQL como fuente de datos. La versión anterior, la versión 3, se creó con la API REST como fuente de datos. Dado que la versión estable del complemento se lanzó recientemente, la cantidad de temas iniciales y demostraciones que lo permiten es limitada.

Primero, necesitamos WordPress

Para este proyecto, configure un nuevo sitio de WordPress con Local by Flywheel que usa el tema predeterminado Twenty Twenty. Importé datos de prueba de unidades temáticas para páginas y publicaciones, como se describe en el Códice de WordPress. Si bien esta era la línea de base con la que estaba trabajando, podría haber sido fácilmente un sitio de WordPress existente que se encuentra en un servidor remoto o en una instalación local.

Ahora que tenemos una línea de base establecida, podemos iniciar sesión en el administrador de WordPress e instalar los complementos WPGraphQL y WPGatsby que necesitamos y activarlos.

Como cubrimos en el artículo anterior, lo que esto hace es exponer GraphQL y WPGraphiQL API en el administrador de WordPress, lo que permite que GraphiQL API cree un “patio de juegos” para probar consultas GraphQL basadas en datos de WordPress.

Ahora necesitamos una interfaz Gatsby

Gatsby es bien conocido por su buena documentación y sólidas plantillas iniciales. Para crear un nuevo sitio con WordPress, los tutoriales de Gatsby sugieren que usar un iniciador o comenzar desde cero está bien para lo que estamos haciendo.

Gatsby también ofrece una biblioteca de sitios web de ejemplo para casos de uso básicos creados en torno a una tecnología específica. Actualmente hay uno que usa WordPress y otro que usa WordPress con el complemento Campos personalizados avanzados. Tenga en cuenta que los sitios de ejemplo en la biblioteca todavía usan el complemento gatsby-source-wordpress 3 y aún no se han actualizado a la versión 4, al momento de escribir este artículo.

Según los tutoriales de Gatsby, hay tres opciones para crear un sitio Gatsby con WordPress. Miremos cada uno.

Opción 1: usar el motor de arranque Gatsby

Los documentos tienen una guía paso a paso sobre cómo configurar un sitio WordPress-Gatsby, pero aquí está la esencia.

Ejecute lo siguiente en la línea de comando para recuperar el iniciador del repositorio de GitHub y clonarlo en una my-wpstartercarpeta de proyecto:

#! clone starter repogatsby new my-wpstarter https://github.com/gatsbyjs/gatsby-starter-wordpress-blog 

Luego, instale los paquetes npm

#! npmnpm install#! or yarnyarn install 

Ahora que el iniciador está clonado, abramos el gatsby-config.jsarchivo en nuestro editor de código y actualicemos su opción de URL para obtener datos de nuestro punto final de WordPress (ver arriba).

// gatsby-config.js{  resolve: gatsby-source-wordpress,    options: {     // WordPress is the GraphQL url.     url: process.env.WPGRAPHQL_URL || https://wpgatsbydemo.wpengine.com/graphql,  },},

Ahora, reemplazaremos la URL del punto final de la fuente de datos del inicio con la URL de nuestro propio sitio de WordPress:

// gatsby-config.js file{  resolve: `gatsby-source-wordpress`,  options: {    url: `http://gatsbywpv4.local/graphql`,  },},

Asegurémonos de estar en el my-wpstarterdirectorio del proyecto. Desde la carpeta del proyecto, ejecutaremos el gatsby developcomando para construir nuestro nuevo sitio Gatsby desde nuestro punto final de fuente de datos de WordPress. En la terminal deberíamos poder ver el gatsby-source-wordpresscomplemento obteniendo datos, incluidos errores y procesos exitosos del sitio a lo largo del camino.

Si vemos un success Building development bundlemensaje al final, eso significa que el proceso de creación del sitio de Gatsby se completó y el sitio se puede ver en http://localhost:8000.

Este es un blog inicial básico con archivos básicos y algunos componentes. Su estructura de archivos es muy similar a la del gatsby-starter-blog, excepto que este tiene una carpeta de plantillas que incluye blog-post.jsarchivos blog-post-achive.jsde plantilla.

Cuando vemos el explorador de API GraphiQL en http://localhost:8000/___graphqlpodemos ver todos los datos de WordPress expuestos por WPGraphQL, así como consultar y recuperar datos específicos directamente desde la interfaz de usuario.

¡Lo entendiste! Gatsby asume que el resto depende de nosotros, utilizando componentes de Gatsby que extraen datos de WordPress para la presentación.

Opción 2: construir desde cero

La documentación de Gatsby ofrece una guía detallada paso a paso sobre cómo crear un nuevo sitio WordPress-Gatsby desde cero utilizando el tema inicial predeterminado de Gatsby.

Lanzaremos un nuevo proyecto desde la línea de comando:

#! create a new Gatsby sitegatsby new wpgatsby-from-scratch-demo

Esto nos da una wpgatsby-from-scratch-democarpeta que incluye el tema de inicio. Desde aquí, entraremos cden esa carpeta y comenzaremos a desarrollar:

cd wpgatsby-from-scratch-demogatsby develop

Ahora podemos abrir http://localhost:8000en el navegador y obtener la página de bienvenida.

Ahora estamos listos para comenzar a recopilar datos de nuestro sitio de WordPress. Instalemos el complemento fuente de Gatsby:

#! install with rpmnpm install gatsby-source-wordpress#! install with yarnyarn add Gatsby-source-wordpress

Si revisamos nuestro navegador ahora, notarás que no sucede nada: seguimos recibiendo la misma bienvenida de Gatsby. Para recuperar los datos de nuestro sitio de WordPress, debemos agregar el complemento al gatsby-config.jsarchivo. Abra el archivo e inserte lo siguiente:

// gatsby-config.jsmodule.exports = {  siteMetadata: {    // ...  },  plugins: [  // Add Gatsby-source-wordpress plugin  {      resolve: `gatsby-source-wordpress`,      options: {        /*         * The full URL of the WordPress site's GraphQL API.         * Example : 'https://www.example-site.com/graphql'         */        url: `http://gatsbywpv4.local/graphql`,       },     },    // The following plugins are not required for gatsby-source-wordpress ....  ],}

Al igual que la última vez, necesitamos cambiar la fuente del punto final de datos de WordPress a la URL de nuestro sitio de WordPress. Ejecutemos gatsby developen nuestra terminal para iniciar todo.

Sin embargo, cuando abrimos http://localhost:8000en nuestro navegador, parece que no sucede nada. Seguimos viendo la misma pantalla de bienvenida. Pero si examinamos GraphiQL en nuestro navegador (en http://localhost:8000/___graphql), veremos todos los datos de WordPress expuestos en nuestro sitio Gatsby que podemos consultar y mostrar como queramos.

Probemos la siguiente consulta que saqué directamente del tutorial de Gatsby, en el explorador GraphiQL:

query {  allWpPost {    nodes {      id      title      excerpt      slug      date(formatString: "MMMM DD, YYYY")    }  }}

Cuando ejecutamos la consulta anterior, veremos el valor de la allWpPost.nodespropiedad, con subpropiedades para id,, y otras.titleexcerpt

Ahora, abramos nuestro src/components/pages/index.jsarchivo componente y reemplacemos el código con esto:

// src/components/pages/index.jsimport  React from "react"import { graphql } from "gatsby"import Layout from "../components/layout"import SEO from "../components/seo"export default function Home({ data }) {  return (    Layout      SEO /      h1My WordPress Blog/h1      h4Posts/h4      {data.allWpPost.nodes.map(node = (        div          p{node.title}/p          div dangerouslySetInnerHTML={{ __html: node.excerpt }} /        /div      ))}    /Layout  )}export const pageQuery = graphql`  query {    allWpPost(sort: { fields: [date] }) {      nodes {        title        excerpt        slug      }    }  }`

Guárdelo, reinicie el servidor con gatsby developy actualice la página. Si la compilación fue exitosa, entonces la página de inicio de nuestro sitio debería mostrar una lista de publicaciones de blog ordenadas de WordPress.

Siguiendo el tutorial, creemos páginas para cada publicación de blog y vinculemos el título de la publicación de la lista a la página de la publicación. El proceso de creación de páginas utilizando datos de Markdown se describe en detalle en la Parte 7 del tutorial básico de Gatsby, que también seguiremos aquí.

Como se describe en el tutorial, Gatsby utiliza createPagesAPI, o lo que llama su API "caballo de batalla", para crear páginas mediante programación a partir de datos (de Markdown o WordPress). A diferencia de los datos de Markdown, no necesitamos crear un slug aquí porque cada publicación de WordPress tiene su propio slug único que se puede obtener desde el punto final de datos de WordPress.

Creando páginas para cada publicación.

Gatsby usa el gatsby-node.jsarchivo, ubicado en la raíz de nuestro proyecto, para crear publicaciones de blog mediante programación. Abramos el gatsby-node.jsarchivo en nuestro editor de texto y agreguemos el siguiente código del tutorial.

// gatsby-node.js const path = require(`path`)exports.createPages = ({ graphql, actions }) = {  const { createPage } = actions  return graphql(`    {      allWpPost(sort: { fields: [date] }) {        nodes {          title          excerpt          content          slug        }      }    }  `).then(result = {    console.log(JSON.stringify(result, null, 4))    process.exit()  })}

Como se indica en el tutorial de Gatsby Parte 7, el código anterior es la primera parte de la creación de nuestras páginas de publicaciones a partir de la fuente de datos de WordPress. Siguiendo la guía, reiniciemos nuestro servidor y desarrollemos nuestro sitio con gatsby develop.

Deberíamos ver console.logresultados en nuestra terminal a medida que se crean las páginas). Sin embargo, nuestra página de inicio sigue teniendo el mismo aspecto. Para crear publicaciones individuales, Gatsby requiere plantillas para crear páginas, que crearemos en el siguiente paso. Eso es lo que haremos a continuación.

Crear plantillas de publicaciones de blog

Creemos una src/components/templatescarpeta en el src/directorio y creemos un blog-post.jsarchivo pegando los siguientes fragmentos de código del tutorial:

// src/templates/blog-post.jsimport React from "react"import Layout from "../components/layout"import { graphql } from "gatsby"export default function BlogPost({ data }) {  const post = data.allWpPost.nodes[0]  console.log(post)  return (    Layout      div        h1{post.title}/h1        div dangerouslySetInnerHTML={{ __html: post.content }} /      /div    /Layout  )}export const query = graphql`  query($slug: String!) {    allWpPost(filter: { slug: { eq: $slug } }) {      nodes {        title        content      }    }  }`

Como se explica en el tutorial, los fragmentos de código anteriores crean una única publicación con React JSX y envuelven post.titley post.content(líneas 12-13) alrededor de los src/components/layout.jscomponentes. En la sección inferior del archivo, se agrega una consulta GraphQL y llama a una publicación específica según la variable post slug $slug. Esta variable se pasa a la blog-post.jsplantilla cuando se crea la página en formato gatsby-node.js.

A continuación también deberíamos actualizar las líneas 12-13 de nuestro gatsby-node.jsarchivo con el siguiente código del tutorial.

// gatsby-node.jsconst path = require(`path`) exports.createPages = ({ graphql, actions }) = {   const { createPage } = actions   return graphql(`     {       allWpPost(sort: { fields: [date], order:DEC }) {         nodes {           title           excerpt           content           slug         }       }     }   `).then(result = {    result.data.allWpPost.nodes.forEach(node = {        createPage({          path: node.slug,          component: path.resolve(`./src/templates/blog-post.js`),          context: {            // This is the $slug variable passed to blog-post.js            slug: node.slug,          },        })      })   }) }

Detengamos y reiniciemos nuestro servidor local gatsby developy veamos el sitio. No veremos nuestra página de inicio con una lista de enlaces a publicaciones de blog. Sin embargo, si verificamos, http://localhost:8000/abcdfdeberíamos ver la siguiente página 404 con una lista de páginas individuales y enlaces de publicaciones.

Si marcamos http://localhost:8000/hello-gatsby-world, deberíamos publicar nuestra publicación “Hello Gatsby WordPress World” en todo su esplendor.

El siguiente paso es vincular los títulos de las publicaciones desde la página de inicio a las publicaciones reales.

Vincular a publicaciones desde la página de inicio

Vincular el trabajo desde la página de inicio a las páginas de publicaciones se realiza envolviendo los títulos de las publicaciones en el index.jsarchivo con el componente de Gatsby Link. Abramos el index.jsarchivo que creamos anteriormente y agreguemos el Linkcomponente:

// src/components/pages/index.jsimport React from "react"import { Link, graphql } from "gatsby"import Layout from "../components/layout"import SEO from "../components/seo"export default function Home({ data }) {  return (    Layout      SEO /     {/* h1My WordPress Blog/h1      h4Posts/h4 */}      {data.allWpPost.nodes.map(node = (        div key={node.slug}          Link to={node.slug}            h2{node.title}/h2          /Link          div dangerouslySetInnerHTML={{ __html: node.excerpt }} /        /div      ))}    /Layout  )}export const pageQuery = graphql`  query {    allWpPost(sort: { fields: [date], order: DEC  }) {      nodes {        title        excerpt        slug      }    }  }`

Importamos el Linkcomponente de Gatsby y luego ajustamos el título de la publicación con el Linkcomponente y hacemos referencia al slug de la publicación. Limpiemos el código comentando el título de la página, cambiando el elemento del título a h2y agregando el orden de las publicaciones ordenadas DECen nuestra graphqlconsulta y en el gatsby-node.jsarchivo.

Como hicimos antes, detengamos y reiniciemos el servidor de desarrollo con gatsby developy veamos nuestra página de inicio en http://localhost:8000. El título de la publicación debe vincular a una sola página de publicación.

Hasta aquí llegaremos con este segundo método. El resto de lo que cubrimos describirá cómo recuperar elementos del menú y consultar otros tipos de datos, como tipos de publicaciones personalizadas  , y configurar compilaciones incrementales y vistas previas , etc.

Puede aplicar el mismo procedimiento para llamar y crear páginas, tipos de publicaciones personalizadas, campos personalizados, taxonomías y todo el contenido divertido y flexible por el que se conoce a WordPress. Esto puede ser tan simple o tan complejo como quieras, ¡así que explóralo y diviértete!

- Documento tutorial de Gatsby

Opción 3: usar WordPress Twenty Twenty Starter de Gatsby

La plantilla inicial de Gatsby para el tema predeterminado de WordPress Twenty Twenty es creada y mantenida por Henrik Wirth, quien también tiene una guía paso a paso extremadamente detallada y exhaustiva que quizás recuerdes de mi artículo anterior. Este iniciador, a diferencia de los demás, en realidad está actualizado a la versión 4 del complemento Gatsby Source y funciona de inmediato después de la configuración inicial de WordPress descrita en la documentación. Mantiene el mismo estilo Twenty Twenty en el sitio front-end de Gatsby, pero tiene pocas limitaciones (incluidos comentarios, páginas de archivo mensuales y etiquetas) que no son compatibles.

Primero clonemos el iniciador en nuestra twenty-twenty-startercarpeta.

#! clone gatsby-starter-wordpress-twenty-twenty gatsby new twenty-twenty-starter https://github.com/henrikwirth/gatsby-starter-wordpress-twenty-twenty

Entremos cden esa carpeta y luego ejecutemos gatsby developpara activar el sitio. No funcionará correctamente la primera vez porque WPGRAPHQL_URLaún no hemos cambiado nuestro valor en el env.examplearchivo. Necesitamos cambiar el nombre del archivo .env.examplea simplemente .env, como se sugiere en la documentación.

Después de eso, reinicie el servidor de desarrollo con gatsby develop. Debería construir el sitio con éxito.

El menú puede aparecer o no dependiendo de cómo se nombre el menú de WordPress. El slug del menú de inicio para consultar los elementos del menú se encuentra primaryen Menu.js(línea 8). Como había configurado mi sitio con WordPress main-menu, tuve que actualizar el Menu.jsarchivo en consecuencia.

Debido a que el iniciador se probó con versiones anteriores de nuestras herramientas, decidí actualizar los complementos a las últimas versiones (WPGraphQL 1.2.6, WPGatsby 1.0.6 y Gatsby Source WordPress 4.0.1) y funcionó bien sin ningún error.

El iniciador Twenty Twenty sigue la estructura de archivos del tema Twenty Nineteen Gatsby, así como Gatsby Starter WordPress Advanced. Henrik Wirth describe cómo se transfieren los datos de WordPress a Gatsby en su guía paso a paso, al igual que Muhammad Muhsin en un tutorial. De lo contrario, crear páginas, plantillas de páginas y transferir elementos del menú es exactamente lo mismo.

Este iniciador utiliza el mismo CSS que el tema predeterminado de WordPress Twenty Twenty y la misma carpeta de recursos, incluidas fuentes, imágenes, archivos SVG y otros archivos que se incluyen en el tema predeterminado.

Si está satisfecho con el estilo de WordPress Twenty Twenty, entonces eso es todo. ¡Disfruta de tu nuevo sitio Gatsby desacoplado!

Pero digamos que queremos trabajar con estilos personalizados. Los archivos CSS se importan desde la assetscarpeta a través del gatsby-browser.jsarchivo.

Modifiquemos los estilos del encabezado, pie de página, publicaciones y páginas del sitio. Gatsby ofrece diferentes opciones para diseñar sus componentes y, en este proyecto, seguí el módulo CSS para diseñar y modifiqué el marcado CSS de los componentes iniciales Twenty Twenty en consecuencia.

Podemos empezar creando una carpeta de estilos src/components/stylesy, dentro de ella, una basecarpeta. Esta es la estructura de archivos general que buscamos:

#! partial structure of /style foldersrc |--/components   |--/styles     |--main.css               |--/base       |--reset.css       |--variables.css     |--/scss       |--header.module.css       |--mainNav.module.css       |--footer.module.css       |--elements.module.css       // and so on...

Queremos diseñar el encabezado y pie de página del sitio, así que abramos los componentes Header.jsy Footer.jsen el inicio y reemplacemos el código con lo siguiente:

// src/components/Header.jsimport React from "react"import { graphql, Link, useStaticQuery } from "gatsby"import Menu from "./menu"import style from "../styles/scss/header.module.css"import logo from '../images/gatsby-icon.png'const Header = ( ) = {  const { wp } = useStaticQuery(graphql`    {      wp {        generalSettings {          title          description        }      }    }  `)  return (    header className={style.masthead}      div className={style.masthead_info}      Link to="/"        img src={logo} alt="logo" display="inline-block" marginBottom= "0"  className={style.site_logo} /      /Link      div className={style.site_header}         div className={style.site_title}          Link            to="/"            dangerouslySetInnerHTML={{ __html: wp.generalSettings.title }} /        /div        div className={style.site_description} dangerouslySetInnerHTML={{ __html: wp.generalSettings.description }} //div      /div      Menu /    /header  )}export default Header

De igual forma, el Footer.jscomponente fue modificado de la siguiente manera:

// src/components/Footer.jsimport React from "react"import style from "../styles/scss/footer.module.css"export default () = (  footer className={style.colophon}    p© {new Date().getFullYear()} | This site is Powered by {'   ' } a href="https://www.gatsbyjs.org"GatsbyJS/a {'   and  '} a href="https://www.wordpress.org"WordPress/a/p  /footer)

Ahora, reiniciemos nuestro servidor de desarrollo. Deberíamos ver lo siguiente, incluido un nuevo encabezado y pie de página personalizados. Utilicé el mismo estilo de Learning Gatsby, que es un curso en línea de Morten Rand-Hendriksen (¡soy un fan!).

Puedes obtener todo el código que utilicé en GitHub.

Qué significa todo esto para los entusiastas de WordPress

Hay muchas publicaciones que comparan las ventajas y desventajas de un sitio desacoplado de WordPress y Jamstack como los ejemplos de Gatsby que hemos cubierto. En mi investigación, me di cuenta de que ninguno de ellos es tan exhaustivo como lo que Chris ya escribió en "WordPress y Jamstack", donde compara todo, desde el rendimiento y las características, hasta la experiencia del desarrollador y los procesos de compilación, y más.

Encontré que los siguientes artículos sacan algunas conclusiones útiles sobre una variedad de temas, que incluyen:

¿Cuál es el costo?

La suposición general es que el alojamiento Jamstack es económico y más económico que el alojamiento tradicional de pila LAMP. Pero en realidad hay mucho que considerar y sus costos reales pueden variar.

• "¡Cómo ejecutar su sitio de WordPress en local, Gatsby y Netlify GRATIS!" (Nate Fitch): La opinión de Nate es que una configuración de WordPress sin cabeza como esta podría ser una buena opción si el proyecto es un blog estático o un sitio que no requiere ninguna interacción. Por ejemplo, no requeriría demasiado trabajo alojar imágenes en Cloudinary u otra CDN, pero sí para sitios grandes e interactivos.
• “WordPress y Jamstack” (Chris Coyier): hay una sección específica aquí donde Chris desglosa los precios de los diferentes tipos de alojamiento para sitios Jamstack y por qué una afirmación general como “Jamstack es más barato” no funciona porque el costo real depende sobre el sitio y su uso.
• “Elegir entre Netlify, Vercel y Digital Ocean” por (Zell Liew): Zell analiza su experiencia al elegir un plan de alojamiento. Su opinión: si tienes un proyecto pequeño, elige Netlify; Si tiene un proyecto más grande, utilice Digital Ocean.

¿Por qué volverse estático?

Teniendo en cuenta todas las cosas que obtienes "gratis" en WordPress (piensa en comentarios, complementos, integraciones, etc.), quizás te preguntes si vale la pena cambiar una configuración del lado del servidor por una solución del lado del cliente. En su “¿Estático o no?” publicación, Chris analiza las razones por las que querrías elegir uno sobre el otro.

¿Cómo obtenemos la funcionalidad de comentarios?

Obtenemos comentarios nativos desde el primer momento con WordPress. Sin embargo, la compatibilidad con comentarios en un sitio estático es un poco gigantesca. En "Comentarios de JAMstack" aquí en CSS-Tricks, el autor explica cómo se pueden implementar comentarios dinámicos en un sitio estático, como Gatsby, utilizando los servicios de Netlify. Mencioné brevemente esto en mi artículo anterior.

¿Qué pasa con el SEO?

• “Gatsby SEO para WpGraphQL y Yoast” (complemento de la comunidad Gatsby): el complemento Yoast SEO ampliamente utilizado para WordPress se puede integrar en una interfaz de Gatsby utilizando este complemento.
• “Introducción a JavaScript SEO para WordPress” (Jono Alderson): esta guía exhaustiva incluye una sección sobre cómo integrar Yoast SEO en una arquitectura sin cabeza y las implicaciones de confiar en JavaScript para SEO. La conclusión es que los desarrolladores de temas y complementos no deberían preocuparse mucho por el panorama cambiante de JavaScript y SEO siempre que continúen siguiendo las mejores prácticas. Al mismo tiempo, deben ser conscientes de los cambios y adaptarse en consecuencia.

¿Cómo funcionan las cosas juntas?

• “Gutenberg y aplicaciones desacopladas” (Jason Bahl): Jason es el creador y mantenedor de WPGraphQL, y profundiza en el uso del nuevo editor de bloques de WordPress en una aplicación desacoplada.
• “Jason Bahl del papel de WPGraphQL en el sistema operativo para la web” (YouTube): Aquí está Jason nuevamente, esta vez hablando sobre plantillas. Cubre el papel de WPGraphQL en el ecosistema de WordPress y los sitios Gatsby sin cabeza, enfatizando que WPGraphQL tiene que ver con la exposición de datos, al igual que la API REST de WordPress. La forma en que WPGraphQL expone los datos de WordPress en Gatsby y los muestra en los componentes front-end de React depende de los desarrolladores.

Actualmente no existen plantillas de Gatsby React dirigidas a no desarrolladores, pero algunas agencias, como Gatsby WP Themes y el mercado Themeforest, están comenzando a llenar el vacío. Por ejemplo, Gatsby WP Themes cubre complementos para contenidos dinámicos como la integración de MailChimp, el uso del complemento Contact Form 7 para formularios, Yoast SEO y más. Themeforest enumera más de 30 plantillas de Gatsby, incluido el tema Gatsby – WordPress + comercio electrónico, que le da una idea de hasta dónde podemos llegar con este tipo de configuración. Sólo recuerde: estos son sitios comerciales y mucho de lo que encontrará tiene un costo asociado.

Mi visión personal en evolución

Si recuerdas, terminé mi último artículo con una reflexión personal sobre mi viaje para crear un sitio WordPress sin cabeza que utilice Gatsby como interfaz. Mi opinión inicial fue menos que una reseña entusiasta:

Según mi experiencia muy limitada, creo que los temas de Gatsby WordPress disponibles actualmente no están listos para su uso en horario de máxima audiencia para usuarios como yo. Sí, es emocionante probar algo de vanguardia que está claramente en la mente de muchos usuarios y desarrolladores de WordPress. Al mismo tiempo, el trabajo en constante evolución que se realiza en el editor de bloques de WordPress, los complementos WPGraphQL y Gatsby Source de WordPress hace que sea difícil predecir hacia dónde van las cosas y cuándo llegará a un estado en el que sea