\u00bfQu\u00e9 es WordPress sin cabeza?<\/h2>\n\n\n\n
\u201cWordPress sin cabeza<\/a>\u201d se refiere a usar el CMS de WordPress con una arquitectura sin cabeza en lugar de una monol\u00edtica tradicional. Los sitios tradicionales de WordPress combinan el backend y el frontend de manera inseparable en un \u00fanico software. El backend gestiona el contenido del sitio, incluidas las bases de datos y servidores, mientras que el frontend es lo que los usuarios ven e interact\u00faan.<\/p>\n\n\n\n En un WordPress sin cabeza, el backend y el frontend est\u00e1n separados. WordPress act\u00faa como el backend, mientras que una plataforma diferente muestra interfaces y contenido amigables para el usuario en el frontend. Los desarrolladores pueden usar cualquier tecnolog\u00eda moderna de frontend para sus sitios de WordPress sin cabeza, como React, Angular, Next y Gatsby.<\/p>\n\n\n\n Bajo este modelo, WordPress es un centro de contenido. Expone una API que permite a cualquier tecnolog\u00eda de frontend acceder y mostrar el contenido. WordPress sin cabeza proporciona a los desarrolladores flexibilidad al elegir sus tecnolog\u00edas de frontend y escalabilidad para gestionar m\u00faltiples canales desde un \u00fanico backend.<\/p>\n\n\n\n Como sab\u00e9s, Gravity Forms<\/a> es uno de los plugins premium m\u00e1s populares para crear y a\u00f1adir formularios a los sitios de WordPress. Los propietarios de sitios, administradores y desarrolladores pueden elegir entre una colecci\u00f3n de plantillas predise\u00f1adas para personalizar.<\/p>\n\n\n\n Tambi\u00e9n ofrece m\u00faltiples complementos oficiales para integrar servicios externos, como pasarelas de pago, una API completa, hooks de WordPress y m\u00e1s.<\/p>\n\n\n\n Pero a pesar de sus muchos beneficios, el plugin de Gravity Forms no fue desarrollado para implementaciones sin cabeza\u2014una mala noticia para los desarrolladores de WordPress sin cabeza que planean usarlo en su pr\u00f3ximo proyecto.<\/p>\n\n\n\n Afortunadamente, hay formas de superar esta limitaci\u00f3n de dise\u00f1o e implementar Gravity Forms en tu sitio de WordPress sin cabeza.<\/p>\n\n\n\n Veamos c\u00f3mo hacerlo.<\/p>\n\n\n\n Hay algunas formas de usar Gravity Forms en un sitio de WordPress sin cabeza, pero en este caso, usaremos un backend de WordPress conectado a un frontend de Next.js mediante una API de GraphQL. Para que este proceso funcione, necesit\u00e1s los siguientes componentes de software:<\/p>\n\n\n\n Para instalar el complemento WPGraphQL para Gravity Forms, descarg\u00e1 el repositorio con los datos del plugin y arrastralo a tu entorno local. Mir\u00e1 c\u00f3mo hacerlo en el siguiente paso.<\/p>\n\n\n\n Configur\u00e1 un entorno local de WordPress usando Local, el software m\u00e1s popular para este prop\u00f3sito. Una vez que tu sitio est\u00e9 configurado, and\u00e1 a Plugins<\/strong> > Add New<\/strong> para instalar y activar el plugin WPGraphQL.<\/p>\n\n\n\n Para a\u00f1adir el complemento WPGraphQL para Gravity Forms, and\u00e1 al repositorio<\/a> y descarg\u00e1 la \u00faltima versi\u00f3n<\/a> en formato .zip. Luego, and\u00e1 a Plugins<\/strong> > Add New<\/strong> y hac\u00e9 clic en Upload Plugin<\/strong>.<\/p>\n\n\n\n Arrastr\u00e1 el archivo Todos los plugins necesarios est\u00e1n configurados ahora. Es hora de importar el formulario del cuestionario. And\u00e1 a Forms<\/strong> > Import\/Export<\/strong> > Import Forms<\/strong> desde la barra lateral de administraci\u00f3n de WordPress. Seleccion\u00e1 el archivo Con eso hecho, pasemos a preparar tu sitio frontend de Next.js.<\/p>\n\n\n\n Para este proyecto, vamos a usar un proyecto de Next.js<\/a> creado por el desarrollador de WP Engine, Kellen Mace. El proyecto proporciona una serie de componentes de React, un hook de React y funciones auxiliares para asegurar que Gravity Forms funcione en tu sitio sin cabeza. Estas funciones auxiliares renderizan formularios de Gravity Forms y realizan solicitudes al backend de WordPress.<\/p>\n\n\n\n Para preparar el sitio frontend, tenemos que:<\/p>\n\n\n\n Vamos a empezar.<\/p>\n\n\n\n Clon\u00e1 el repositorio desde la l\u00ednea de comandos:<\/p>\n\n\n\n O si prefer\u00eds usar Github Desktop, and\u00e1 a Add\u2026<\/strong> > Clone Repository<\/strong>. Luego peg\u00e1 la URL del repositorio en la secci\u00f3n URL<\/strong>.<\/p>\n\n\n\n Abr\u00ed la carpeta del proyecto en Visual Studio Code o en tu editor de c\u00f3digo preferido. Cre\u00e1 un nuevo archivo llamado Ahora ten\u00e9s que a\u00f1adir el endpoint de GraphQL que tu frontend consumir\u00e1 para mostrar tus formularios. A\u00f1ad\u00ed el siguiente c\u00f3digo al archivo Sustitu\u00ed Ejecut\u00e1 Ahora pod\u00e9s usar Ahora que tu backend de WordPress y frontend de Next.js est\u00e1n activos, necesit\u00e1s importar el formulario de Gravity Forms incluido en el repositorio que clonamos. Desde la barra lateral del tablero, and\u00e1 a Forms<\/strong> > Import\/Export<\/strong>. Hac\u00e9 clic en Import Forms.<\/p>\n\n\n\n En la pantalla siguiente, hac\u00e9 clic en Choose File<\/strong> y naveg\u00e1 hasta tu repositorio. Seleccion\u00e1 el archivo Ahora and\u00e1 a Forms<\/strong> en el men\u00fa desplegable de Gravity Forms en la barra lateral para verificar que el formulario se import\u00f3 correctamente. Tom\u00e1 nota del campo Para renderizar el formulario en tu sitio frontend de Next.js, deber\u00e1s ingresar el ID del formulario en una funci\u00f3n del archivo Sustitu\u00ed Esta funci\u00f3n obtiene los datos del formulario y los devuelve como un prop, que se pasa al componente Questionnaire<\/strong> de este archivo para renderizar este formulario de Gravity Forms. Una vez que configures el ID correcto, deber\u00edas poder visitar http:\/\/localhost:3000\/questionare<\/a> y ver el formulario que acab\u00e1s de importar.<\/p>\n\n\n\n Ahora que importaste y renderizaste el formulario, es hora de completarlo. Simplemente complet\u00e1 los campos del formulario. No necesit\u00e1s llenar todos, solo algunos, y presion\u00e1 Submit Questionnaire<\/strong> al final.<\/p>\n\n\n\n Vas a recibir el siguiente mensaje de confirmaci\u00f3n.<\/p>\n\n\n\n Ahora pod\u00e9s ir a Forms<\/strong> > Entries<\/strong> desde el tablero y revisar cada env\u00edo que recibiste. Ahora tu frontend de Next.js est\u00e1 equipado para recibir y mostrar nuevos formularios para obtener informaci\u00f3n de tus usuarios.<\/p>\n\n\n\n Tu implementaci\u00f3n de Gravity Forms en un sitio de WordPress sin cabeza est\u00e1 completa, pero es importante entender c\u00f3mo el complemento WPGraphQL para Gravity Forms ayuda a WPGraphQL a consultar formularios. Si explor\u00e1s la documentaci\u00f3n del plugin, vas a encontrar la entrada para consultar formularios<\/a>.<\/p>\n\n\n\n Para consultar un formulario espec\u00edfico, pod\u00e9s usar gfForm<\/strong> para componer una consulta yendo a GraphQL<\/strong> > GraphiQL<\/strong>. Aqu\u00ed ten\u00e9s una consulta de ejemplo para obtener un formulario individual y sus El input Si quer\u00e9s profundizar en todo lo que WPGraphQL para Gravity Forms tiene para ofrecer, le\u00e9 la documentaci\u00f3n completa<\/a>.<\/p>\n\n\n\n Aunque los modelos de WordPress sin cabeza a veces limitan los plugins que podemos usar debido a problemas de compatibilidad, Gravity Forms es totalmente funcional si sab\u00e9s c\u00f3mo configurarlo correctamente utilizando WPGraphQL, WPGraphQL para Gravity Forms y una aplicaci\u00f3n Next.js.<\/p>\n\n\n\n\u00bfQu\u00e9 es Gravity Forms para WordPress sin cabeza?<\/h2>\n\n\n\n
C\u00f3mo usar Gravity Forms con WordPress sin cabeza, GraphQL y un frontend basado en React<\/h2>\n\n\n\n
Paso 1: La configuraci\u00f3n<\/h3>\n\n\n\n
\n
Paso 2: Configur\u00e1 tu sitio local<\/h3>\n\n\n\n
![\"Plugin](\"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/10\/gravity-forms-in-headless-wordpress-1-1024x623.jpg\")
<\/figure>\n\n\n\n![\"resaltado](\"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/10\/gravity-forms-in-headless-wordpress-2-1024x623.jpg\")
<\/figure>\n\n\n\n.zip<\/code> o hac\u00e9 clic en Choose File<\/strong> para buscar en tu gestor de archivos. Hac\u00e9 clic en Install Now<\/strong> y luego hac\u00e9 clic en Activate Plugin<\/strong> en la pantalla siguiente.<\/p>\n\n\n\n![\"resaltado](\"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/10\/gravity-forms-in-headless-wordpress-3-1-1024x623.jpg\")
<\/figure>\n\n\n\n![\"resaltado](\"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/10\/gravity-forms-in-headless-wordpress-4-1024x623.jpg\")
<\/figure>\n\n\n\ngravityforms-questionnaire-form.json<\/code> dentro de la carpeta de la aplicaci\u00f3n Next.js y hac\u00e9 clic en el bot\u00f3n para importarlo.<\/p>\n\n\n\nPaso 3: Prepar\u00e1 tu sitio frontend<\/h3>\n\n\n\n
\n
Clonar el repositorio<\/h4>\n\n\n\n
git clone https:\/\/github.com\/kellenmace\/headless-wordpress-with-gravity-forms<\/code><\/pre>\n\n\n\n![\"resaltado](\"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/10\/gravity-forms-in-headless-wordpress-5-1024x623.jpg\")
<\/figure>\n\n\n\n![\"resaltado](\"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/10\/gravity-forms-in-headless-wordpress-6-1024x623.jpg\")
<\/figure>\n\n\n\nA\u00f1adir la variable de entorno<\/h4>\n\n\n\n
.env.local<\/code> en la ra\u00edz del proyecto.<\/p>\n\n\n\n![\"resaltado](\"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/10\/gravity-forms-in-headless-wordpress-7-1024x623.jpg\")
<\/figure>\n\n\n\n.env.local<\/code>:<\/p>\n\n\n\nNEXT_PUBLIC_WORDPRESS_API_URL=http:\/\/mi-sitio-wordpress.local\/graphql<\/code><\/pre>\n\n\n\nmi-sitio-wordpress<\/code> con el dominio de tu sitio local.<\/p>\n\n\n\nInstalar dependencias<\/h4>\n\n\n\n
npm install<\/code> desde la consola para instalar las dependencias del proyecto.<\/p>\n\n\n\nnpm run dev<\/code> desde el terminal para iniciar un servidor de desarrollo. Si visit\u00e1s \u201chttp:\/\/localhost:3000\/<\/a>\u201d en tu navegador, deber\u00edas obtener la siguiente pantalla de bienvenida que confirma que tu sitio frontend del proyecto Next.js est\u00e1 en funcionamiento.<\/p>\n\n\n\n![\"captura](\"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/10\/gravity-forms-in-headless-wordpress-8-1024x623.jpg\")
<\/figure>\n\n\n\nPaso 4: Importar un formulario de Gravity Forms<\/h3>\n\n\n\n
![\"resaltado](\"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/10\/gravity-forms-in-headless-wordpress-9-1024x623.jpg\")
<\/figure>\n\n\n\ngravityforms-questionnaire-form.json<\/code>.<\/p>\n\n\n\n![\"resaltado](\"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/10\/gravity-forms-in-headless-wordpress-10-1-1024x623.jpg\")
<\/figure>\n\n\n\nID<\/code> porque lo usaremos en el siguiente paso.<\/p>\n\n\n\n![\"resaltado](\"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/10\/gravity-forms-in-headless-wordpress-11-1024x623.jpg\")
<\/figure>\n\n\n\nPaso 5: Renderizar el formulario de Gravity Forms<\/h3>\n\n\n\n
questionnaire.tsx<\/code>. Para hacerlo, and\u00e1 a pages\/questionnaire.tsx<\/code> en tu proyecto y busc\u00e1 la siguiente funci\u00f3n:<\/p>\n\n\n\nexport async function getStaticProps() {\n const form = await getGravityForm(gravity_forms_ID);\n return {\n props: { form },\n};<\/code><\/pre>\n\n\n\ngravity_forms_ID<\/code> por el ID de tu formulario.<\/p>\n\n\n\n![\"captura](\"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/10\/gravity-forms-in-headless-wordpress-12-1024x623.jpg\")
<\/figure>\n\n\n\nPaso 6: Enviar el formulario<\/h3>\n\n\n\n
![\"captura](\"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/10\/gravity-forms-in-headless-wordpress-13-1024x623.jpg\")
<\/figure>\n\n\n\n\u00bfC\u00f3mo WPGraphQL para Gravity Forms consulta un formulario?<\/h2>\n\n\n\n
formFields<\/code> asociados:<\/p>\n\n\n\n{\n gfForm(id: 50, idType: DATABASE_ID) {\n cssClass\n databaseId\n dateCreated\n formFields {\n nodes {\n databaseId\n type\n ... on TextField {\n label\n description\n }\n }\n }\n pagination{\n lastPageButton {\n text\n type\n }\n }\n title\n }\n}<\/code><\/pre>\n\n\n\nid<\/code> acepta ya sea el ID del formulario de Gravity Forms (idType: DATABASE_ID<\/code>) asignado a la base de datos de tu sitio de WordPress o un ID global codificado en base-64 (idType: ID<\/code>).<\/p>\n\n\n\nEs posible usar Gravity Forms en WordPress sin cabeza<\/h2>\n\n\n\n