Versión en EspañolES

Masterclass: Mezclando Contenido, Comercio y SEO con Headless WordPress

Recording and certification are available to Multipass and Full ticket holders only

Please login if you have one.

Get Multipass

Bookmark

Cuando trabajas con Headless WordPress puede resultar desafiante configurar un sitio de comercio electrónico. Esta masterclass te guiará a través de la conexión de una aplicación de Shopify con tu sitio de WordPress, vinculando el contenido de WordPress con tus productos de Shopify, construyendo un frontend con React y NextJS para mostrar tus productos y publicaciones, utilizando Yoast SEO y desplegando tu sitio en la plataforma Atlas de WP Engine.

This workshop has been presented at React Summit Remote Edition 2021, check out the latest edition of this React Conference.

FAQ

Headless WordPress se refiere a una configuración en la que se utiliza WordPress solo como sistema de gestión de contenido (CMS) sin que se encargue del renderizado del front-end. Esto permite usar tecnologías modernas de desarrollo front-end, como React, para construir la interfaz de usuario.

Para comenzar con headless WordPress, primero debes clonar el repositorio de GitHub proporcionado en la sesión, luego cambiar a la rama de inicio y finalmente configurar tu propio Git. Puedes seguir las instrucciones y utilizar herramientas como WP GraphQL para interactuar con tu contenido de WordPress de manera más eficiente.

WP Engine es un proveedor de alojamiento gestionado para sitios de WordPress. Recientemente lanzaron una plataforma llamada Atlas que está diseñada específicamente para alojar sitios headless de WordPress, proporcionando las herramientas y el soporte necesarios para optimizar el rendimiento y la seguridad de estos sitios.

Durante la construcción de tu sitio, puedes obtener ayuda y soporte uniéndote a la comunidad en Slack de WP Engine, participando en los chats de Zoom o Discord mencionados durante las sesiones, o siguiendo las sesiones de programación en vivo que se organizan regularmente.

Algunos plugins recomendados incluyen WP GraphQL, que facilita la interacción con tu contenido a través de consultas optimizadas; Custom Post Type UI y Advanced Custom Fields para crear y gestionar tipos de contenido personalizados; y Yoast SEO con su extensión para WPGraphQL para gestionar aspectos SEO.

Usar WordPress en configuración headless permite mayor flexibilidad en el desarrollo del front-end, mejor rendimiento y seguridad al reducir la superficie de ataque expuesta. Además, facilita la integración con modernas tecnologías de desarrollo y otras plataformas o servicios mediante APIs.

wordpress

Matt Landers

Will Johnston

114 min

10 Jun, 2021

Comments

Video Summary and Transcription

Headless WordPress permite a los desarrolladores construir el frontend utilizando frameworks de React como Gatsby o Next, llevando a WordPress a la era del desarrollo moderno. La integración de APIs externas con Headless WordPress permite un enfoque de mezcla y combinación, utilizando APIs directamente o extrayendo datos a través de WordPress. El proyecto demuestra el uso de Reactaits para la gestión del estado y la implementación de SEO utilizando Yoast. La masterclass también cubre el proceso de recuperación de datos de publicaciones, construcción de tarjetas de productos y agregado de productos al carrito en una integración de Headless WordPress y Shopify. La sesión concluye con recursos para seguir aprendiendo y participar en la comunidad.

Available in English: Workshop: Mixing Content, Commerce, and SEO with Headless WordPress

Video transcription and chapters available for users with access.

Available in other languages:

Watch more workshops on topic

Construye una aplicación WordPress sin cabeza con Next.js y WPGraphQL

React Summit 2022

173 min

Construye una aplicación WordPress sin cabeza con Next.js y WPGraphQL

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Remixando WordPress: Construyendo un Sitio Headless con Remix, WPGraphQL y Fundamentos Web

React Summit 2022

21 min

Remixando WordPress: Construyendo un Sitio Headless con Remix, WPGraphQL y Fundamentos Web

Jeff Everhart

Senior Developer Advocate @ WP Engine

In this Talk, the concept of headless WordPress and its benefits for developers are discussed. The use of front-end frameworks like Remix, Nuxt, Next, or SvelteKit to interact with WordPress through REST or GraphQL APIs is highlighted. The process of creating content models, adding data, and querying the GraphQL schema is explained. The setup of a basic Remix app with Apollo Client and the loading of data into route components using Remix are covered. The handling of dynamic routing with Remix and WordPress is also explored.

remix wordpress headless cms

Escalando WordPress con Next.js

React Summit Remote Edition 2021

9 min

Escalando WordPress con Next.js

Colby Fayock

Helping others learn about Javascript, React, and the static web.

WordPress is still widely used, with over 800 million installs. The Jamstack is a modern approach to building static HTML websites that utilize JavaScript and APIs for dynamic content. Serving static HTML files is faster than server-based solutions like WordPress. Serving static files from storage or a CDN allows for infinite scalability. WordPress is a compelling option for nontechnical users due to its familiarity and thriving ecosystem.

next.js headless wordpress

Explorando el Gráfico de WordPress con Next.js y WPGraphQL

GraphQL Galaxy 2021

23 min

Explorando el Gráfico de WordPress con Next.js y WPGraphQL

Colby Fayock

Helping others learn about Javascript, React, and the static web.

WordPress is widely used, and it now supports a REST API for headless usage. Serving static HTML files allows for infinite scaling and surviving viral traffic. GraphQL can be used to interface with WordPress data, reducing complexity. WordPress can be coupled with plugins like Yoast and ACF, and WPGraphQL works seamlessly with these plugins. GraphQL allows for selecting only necessary data and has performance advantages over REST APIs.

headless wordpress graphql headless cms

Usando GraphQL en WordPress

GraphQL Galaxy 2020

26 min

Usando GraphQL en WordPress

Sid Chatterjee

Senior Systems Engineer at Cloudflare

WordPress, powering 30% of all websites, faces issues with overfetching and underfetching when using its REST API. WPGraphQL, a plugin for WordPress, solves this problem by using GraphQL, reducing API calls and improving scalability. By installing WPGraphQL and writing queries, developers can easily fetch data and transform it for rendering. WPGraphQL has been used by popular websites like qz.com and apollographql.com, and it recently hit 1.0. Gatsby Source WordPress is a faster version of Gatsby that works well with WPGraphQL, and Gatsby can handle building large sites. WPGraphQL does not currently support data subscriptions, but community contributions are welcome. The new Gatsby-sourced WordPress plugin offers benefits like real-time preview and incremental builds.

wordpress graphql

Construyendo frontends de React para WordPress

JSNation Live 2020

8 min

Construyendo frontends de React para WordPress

Pablo Postigo

Frontity

Frontity is a framework that combines WordPress and React to create modern user experiences. It is easy to use, SEO-friendly, and extensible. The framework has achieved great results for publishers, increasing page views, organic traffic, and user acquisition. Frontity Pro has served millions of page views worldwide and provides a seamless content management experience. Visit frontity.org to learn more and join the community.

react headless wordpress