Una impresionante lista de recursos para WordPress-Gatsby.

Aquí hay una lista que he creado en un intento de reunir todos los recursos útiles que hay sobre cómo trabajar con Gatsby en combinación con WordPress. Feliz de añadir nuevos recursos, si alguien tiene algunas sugerencias impresionantes. Por favor, siéntase libre de contribuir 🙂



henrikwirth
/
awesome-wordpress-gatsby

Una impresionante lista de recursos sobre WordPress como CMS sin cabeza con Gatsby

<artículo class=”markdown-body entry-content container-lg”>



Una lista curada de recursos sobre WordPress como CMS sin cabeza con Gatsby como generador de sitios estáticos (SSG)

Un CMS sin cabeza es un sistema de gestión de contenidos (CMS) sólo de back-end. Su propósito es servir contenido y hacerlo accesible a través de una API (por ejemplo, REST o GraphQL).

Un Generador de sitios estáticos (SSG) es un marco o configuración, que le ayuda a generar sitios web estáticos (HTML/CSS/JS). La fuente de sus datos puede ser cualquier cosa, desde archivos locales (por ejemplo, archivos de texto o markdown) hasta APIs (por ejemplo, REST, GraphQL).

Por qué Gatsby y WordPress?

WordPress es uno de los CMS más utilizados del mundo y por tanto mucha gente ya sabe cómo trabajar con él. El enfoque típico de front-end con plantillas basadas en PHP es cada vez más problemático en un entorno donde el rendimiento es clave. El enfoque de utilizar WordPress como un CMS headless con llamadas normales a la API a través de JavaScript ya existe, pero…



La lista

Fecha: 07.03.21

Un CMS sin cabeza es un sistema de gestión de contenidos (CMS) sólo de back-end. Su propósito es servir contenido y hacerlo accesible a través de una API (por ejemplo, REST o GraphQL).

Un Generador de sitios estáticos (SSG) es un framework o configuración, que le ayuda a generar sitios web estáticos (HTML/CSS/JS). La fuente de sus datos puede ser cualquier cosa, desde archivos locales (por ejemplo, archivos de texto o markdown) hasta APIs (por ejemplo, REST, GraphQL).

¿Por qué Gatsby y WordPress?

WordPress es uno de los CMS más utilizados del mundo y por tanto mucha gente ya sabe cómo trabajar con él. El enfoque típico de front-end con plantillas basadas en PHP es cada vez más problemático en un entorno donde el rendimiento es clave. El enfoque de usar WordPress como un CMS sin cabeza con llamadas normales a la API a través de JavaScript ya existe, pero también tiene el inconveniente de tener que hacer peticiones al servidor y renderizar en función de la respuesta. Esto añade tiempo de carga. Gatsby en cambio, pre-renderiza todo el sitio en tiempo de compilación y por tanto el usuario obtiene un sitio estático completamente preparado en su primera petición, lo que lo convierte en uno de los mejores enfoques para el rendimiento. Otra gran ventaja es la seguridad, ya que tu instancia de WordPress puede estar en cualquier lugar, incluso localmente y no necesitas exponer nada de ella al usuario. El sitio estático de Gatsby por lo tanto, no es hackeable. Encuentra más argumentos para los pros y los contras en los recursos de abajo.



Contents



Comunidades

Si necesitas ayuda con algo, hay algunas comunidades muy activas.

WPGraphQL

Gatsby



Artículos y charlas

Lista de artículos y charlas que profundizan en el stack tecnológico en general.

.



Plugins

Lista de plugins útiles para que WordPress y Gatsby funcionen juntos. Ordenados alfabéticamente.



WordPress



Plugins esenciales

    • WPGraphQLDocumentación – WPGraphQL lleva el poder de GraphQL a tu sitio de WordPress.
    • WPGatsby – Este plugin configura tu sitio de WordPress para que sea una fuente optimizada para Gatsby.



WPGraphQL Extensions

  • WPGraphQL Cors – Este plugin GRATUITO de @kidunot89
    y @byfunkhaus afirma que permite la autenticación con WPGraphQL para que “simplemente funcione” permitiendo establecer cabeceras CORS que GraphQL aceptará, lo que significa que las cookies de autenticación por defecto de WordPress pueden ser aceptadas.
  • Cuentas totales para WPGraphQL – Este plugin GRATUITO de @builtbycactus expone las cuentas totales a las conexiones en el esquema WPGraphQL.
  • WPGraphQL Gutenberg – Expone los bloques de Gutenberg a la API de WPGraphQL.
  • WPGraphQL JWT Authentication – Extiende el plugin WPGraphQL para proporcionar autenticación usando JWT (JSON Web Tokens).
  • WPGraphQL Lock – Permite el bloqueo de consultas para WPGraphQL mediante la implementación de consultas GraphQL persistentes.
  • WPGraphQL Meta – Este plugin GRATUITO de @robertorourke expone la meta registrada a través de la API register_meta de WordPress a WPGraphQL.
  • WPGraphQL Meta Query – Añade soporte de Meta_Query al plugin WPGraphQL para argumentos de consulta postObject.
  • WPGraphQL Persisted Queries – Este plugin GRATUITO de @qz añade la capacidad de utilizar Persisted Queries con WPGraphQL.
  • WPGraphQL Offset Pagination – Este plugin GRATUITO de @enshrined añade la paginación offset básica en contraposición a la paginación estándar basada en el Cursor que viene con WPGraphQL.
  • WPGraphQL Send Email – Este plugin GRATUITO de @Ash_Hitchcock permite enviar correos electrónicos mediante una simple mutación. Incluye la capacidad de restringir el envío a orígenes de confianza.

Extensiones para que usar otros plugins con WPGraphQL

    • BúsquedaQL – Una extensión que integra SearchWP en WPGraphQL.
    • Bloques de contenido de WPGraphQL – Este plugin GRATUITO de la gente de QZ.com expone una forma de consultar el contenido HTML de las Entradas y Páginas de WordPress como “Bloques” (no relacionados con Gutenberg) para aportar más estructura a tu contenido consultado.
    • WPGraphQL Enable All Post Types (DalkMania) – Este plugin GRATUITO de @DalkMania añade automáticamente TODOS los tipos de post registrados al esquema WPGraphQL.
    • WPGraphQL Enable All Post Types (TylerBarnes) – Este plugin GRATUITO de @tylbar añade automáticamente TODOS los tipos de post registrados al esquema WPGraphQL.
    • WPGraphQL Google Schema – Este plugin GRATUITO de @izzygld261 añade el soporte de Google Schema a WPGraphQL.
    • WPGraphQL MB (MetaBox) – Este plugin GRATUITO de @DalkMania añade todos los metaboxes registrados usando metabox.io al esquema WPGraphQL.
    • WPGraphQL MetaBox Relationships – Este plugin GRATUITO de @hsimah
      añade soporte para el campo metabox.io Relationships a WPGraphQL (cuando también se utiliza su plugin wp-graphql-metabox).
    • WPGraphQL Polls – Este plugin GRATUITO de @andrenosouza permite interactuar con los datos del plugin WP-Polls a través de Consultas y Mutaciones GraphQL.
    • WPGraphQL Polylang Extension – Extiende el esquema de WPGraphQL con datos de idiomas del plugin Polylang.
    • WPGraphQL Tax Query – Añade soporte de Tax_Query al plugin WPGraphQL para argumentos de consulta postObject (WP_Query).
    • WPGraphQL WPML – Este plugin GRATUITO de @rburgst amplía el esquema WPGraphQL con los datos del idioma del plugin WPML. Además desactiva los filtros por defecto de WPML para poder iterar sobre todos los posts sin importar el idioma.
    • WPGraphQL para campos personalizados avanzados – Expone los campos personalizados avanzados al esquema WPGraphQL.
    • WPGraphQL para BuddyPress – Este plugin GRATUITO de @RenatoNascAlves expone los datos de BuddyPress a WPGraphQL.
    • WPGraphQL for Carbon Fields – Este plugin GRATUITO de @matepaiva
      expone los campos registrados mediante Carbon Fields al esquema WPGraphQL.
    • WPGraphQL for Custom Post Type UI – Este plugin GRATUITO añade ajustes a Custom Post Type UI permitiendo establecer qué Post Types y Taxonomías registradas por CPTUI deben mostrarse en el esquema WPGraphQL.
    • WPGraphQL for FacetWP – Este plugin GRATUITO de @hsimah
      expone filtros en las consultas WPGraphQL para permitir la búsqueda facetada con FacetWP.
    • WPGraphQL para Gravity Forms – Este plugin GRATUITO de @kellenmace
      de @harness_up expone los datos de @gravityforms a WPGraphQL, permitiéndole consultar formularios, campos, entradas y mucho más.
    • WPGraphQL para Metabox – Este plugin GRATUITO de @hsimah
      expone los campos registrados mediante el popular http://MetaBox.io al esquema WPGraphQL.
    • WPGraphQL para Ninja Forms – Este plugin gratuito expone los formularios creados por el plugin Ninja Forms al esquema WPGraphQL y permite que los formularios se envíen a través de mutaciones GraphQL.
    • WPGraphQL for Posts 2 Posts – Este plugin GRATUITO de @kellenmace
      de @harness_up crea automáticamente conexiones GraphQL para todas tus conexiones de Posts 2 Posts.

.

  • WPGraphQL para SEOPress – Este plugin GRATUITO de @moon_meister expone los datos gestionados por SEOPress al esquema WPGraphQL, permitiendo utilizar los datos SEO en tus aplicaciones headless.
  • WPGraphQL for WooCommerce – Este plugin GRATUITO expone los datos de WooCommerce a WPGraphQL permitiendo interactuar con los datos de tu tienda a través de consultas y mutaciones GraphQL.
  • WPGraphQl Yoast SEO Plugin – Expone los datos de Yoast SEO al plugin WPGraphQL.



Otros plugins útiles

  • Campos personalizados avanzadosACF PRO
  • Modo sin cabeza – El modo sin cabeza establece una redirección para todos los usuarios que intentan acceder al sitio. Las únicas solicitudes a las que se les permite la admisión son las que intentan acceder a la API REST, a la API GraphQL de WP o a cualquier usuario conectado que busque acceder a la instalación sin cabeza para editar o crear publicaciones.
  • Polylang
  • WP JAMstack Deployments – Plugin de WordPress para los despliegues de JAMstack en Netlify (y otras plataformas).



Gatsby Plugins



Tutoriales / cursos gratuitos

Nota: Desde el lanzamiento de gatsby-source-wordpress V4, es el preferido sobre gatsby-source-graphql y por lo tanto sólo listaré tutoriales relacionados con ese enfoque.



Tutoriales escritos



Tutoriales en vídeo

  • 2019.11: 25+ Vídeos – Curso completo de Gatsby + WordPress (2019) – La serie se centra en cómo podemos utilizar WordPress como un CMS headless con un esquema GraphQL con el que interactuar. Después de configurar nuestro sitio y tema de WordPress, pasaremos a Gatsby y cómo podemos usar nuestro nuevo esquema para generar contenido para nuestro sitio de Gatsby, generando páginas mediante programación, convirtiendo bloques de Gutenberg en componentes de React y terminando el capítulo con un enfoque en el SEO en Gatsby.
  • 2019.07: Gatsby + WordPress con WPGraphQL (con Jason Bahl) – Learn With Jason – En este stream, Jason Bahl enseña cómo usar WordPress con Advanced Custom Fields y WPGraphQL para crear un potente y flexible panel de administración, y luego consultar y mostrar esos datos en un sitio Gatsby.
  • 2019.07: Curso de choque: Headless WordPress con WPGraphQL, ACF y React – En este vídeo, Alex Young (WPCasts) repasa cómo conseguir una sencilla configuración de WordPress sin cabeza con WPGraphQL y React.
  • 2019.06: Usando WordPress con WPGraphQL – En este vídeo aprenderás a usar GraphQL con WordPress usando un impresionante plugin llamado WPGraphQL y algunas cosas extra interesantes como GraphQL + Advanced Custom Fields.
  • 2019.04: WPGraphQL para ACF – Jason Bahl muestra cómo utilizar WPGraphQL para Advanced Custom Fields.
  • 2018.07: GraphQL con WordPress y Gutenberg – Jason Bahl – 2018 JavaScript for WordPress Conference
    – En esta charla de la 2018 JavaScript for WordPress Conference, el desarrollador del plugin WP GraphQL, Jason Bahl, da ejemplos actualizados de cómo se puede utilizar GraphQL con WordPress y Gutenberg.



Tutoriales / cursos de pago

Lista de cursos de pago.

  • Por favor, aporten recursos conocidos que utilicen el stack actual con versiones más nuevas.



Starters

Lista de starters de proyectos, que puedes clonar y empezar a construir sobre ellos.

Categorías : # wordpress

Deja una respuesta

Tu dirección de correo electrónico no será publicada.