Cómo construir su primer proyecto de WordPress sin cabeza con ACF + WPGraphQL

Todo el mundo tiene sus herramientas favoritas cuando se trata del desarrollo de WordPress, y la idea de crear un sitio sin cabeza y sin esas herramientas puede ser desalentadora. Afortunadamente, dos herramientas favoritas de los desarrolladores de WordPress, ACF y WPGraphQL, pueden ayudarlo a sumergirse en el desarrollo sin cabeza.

En esta sesión, el desarrollador sénior de WP Engine, Jeff Everhart, muestra los entresijos de la infraestructura mediante la creación de un sitio de demostración en solo minutos con Atlas.

Diapositivas de la sesión:

Transcripción:

JEFF EVERHART: ¿Qué pasa, todos? Mi nombre es Jeff Everhart, un defensor sénior de desarrolladores aquí en WP Engine. Muchas gracias por unirse a mi charla de hoy sobre la creación de su primer proyecto de WordPress sin cabeza con ACF y WP GraphQL. Antes de saltar a la construcción, siempre me gusta dar un poco de contexto sobre lo que es WordPress sin cabeza. Parece que sin cabeza se está volviendo menos un término de nicho y más convencional, por lo que intentaré mantener la explicación breve.

WordPress sin cabeza en esencia se trata de usar el CMS de WordPress a través de una API para impulsar algún otro tipo de aplicación. Si observamos el diagrama de esta diapositiva, cuando un usuario solicita site.com/page, en lugar de que WordPress maneje esa solicitud, una aplicación de JavaScript responde a esa ruta. Mira la ruta, determina qué datos necesita de WordPress u otras fuentes, realiza esas llamadas a las API y genera una respuesta para el usuario.

Es importante tener en cuenta que lo que hay en esa ranura de tiempo de ejecución de Node.js podría ser realmente cualquier número de diferentes tipos de aplicaciones o clientes. Hemos visto varios ejemplos de aplicaciones móviles o sitios web creados con todos los marcos de trabajo más populares que usan este patrón con gran éxito. Ahora que tiene una buena idea de lo que es WordPress sin cabeza, repasemos la pila de tecnología que vamos a usar para el proyecto de hoy.

En nuestra última capa, usaremos WP GraphQL como nuestra API. WP GraphQL convierte su backend de WordPress en una poderosa API GraphQL. Hace cumplir todos los mismos controles de seguridad de función y capacidad que hacen WordPress nativo y la API REST central. WP GraphQL es una excelente opción para desarrollar aplicaciones autónomas porque al usar su lenguaje de consulta declarativo, podemos consultar diferentes tipos de contenido en todo ese contenido. Entonces, obtener publicaciones, páginas con sus categorías, todo en la misma solicitud.

Ahora, veamos cómo podemos estructurar y modelar algunos datos más complejos utilizando el CMS de WordPress. Muchos desarrolladores que se acercan a proyectos sin cabeza necesitan modelar y almacenar datos que son diferentes, ¿verdad? Se extiende más allá de las publicaciones o páginas típicas de WordPress. ACF o campos personalizados avanzados es una gran herramienta para modelar esos campos personalizados. En una próxima versión, será aún más potente al permitirle registrar tipos de publicaciones y taxonomías directamente en la interfaz de usuario en la versión gratuita de este complemento.

Hace que todos los datos estén disponibles a través de la API REST fácilmente, pero necesitará instalar una extensión WP GraphQL para agregar algunos de esos datos de campo a nuestro esquema GraphQL. Personalmente, estoy muy emocionado de ver evolucionar este complemento a medida que se vuelve más poderoso para los desarrolladores sin cabeza.

Ahora que podemos modelar datos complejos y consultarlos a través de WP GraphQL, necesitamos alguna forma de crear esas experiencias web modernas para nuestros usuarios y, al mismo tiempo, respaldar a los editores de contenido que ya conocen y aman WordPress. Ahí es donde entra en juego Faust. Faust es un marco de dos partes que consta de un complemento de WordPress y un marco de JavaScript basado en Next.js. Trabajan juntos para hacer que la creación de sitios de WordPress sin cabeza sea fácil e intuitiva.

Agrega soporte para cosas como vistas previas de publicaciones y autenticación lista para usar, y puede apoyarse en una experiencia de jerarquía de plantillas de WP reimaginada en JavaScript moderno. Faust.js pretende ser una plataforma muy extensible y viene con un sistema de complementos y una barra de administración que puede usar para personalizar y crear experiencias que respalden su caso de uso particular.

Por último, pero no menos importante, necesitaremos algunas formas de trabajar con estas herramientas localmente y en producción. Usando la migración local y WP, extraje todos los recursos de WordPress que necesitará para este proyecto en un solo archivo zip que puede arrastrar y soltar en local para comenzar. Una vez que hayamos terminado de construir nuestro sitio, podemos enviar nuestro trabajo a la plataforma Atlas. Atlas WP Engine es la solución de alojamiento sin cabeza todo en uno que combina su backend de WordPress y un contenedor Node.js, todos ajustados para trabajar juntos, disponibles a través de un panel de control integrado.

Entonces, ahora que tiene una buena comprensión de todas las herramientas que usaremos en la presentación de hoy, entremos de inmediato y comencemos a construir. Abra la URL en esta diapositiva para acceder al código de demostración en el navegador. He tratado de hacer que esta experiencia sea lo más fácil posible de seguir, pero cubriremos mucho terreno en los próximos 25 minutos, así que siéntete libre de mirar ahora y consultar este repositorio de GitHub y el grabación de esta sesión más tarde para seguir trabajando después de la conferencia. Si el resto de la decodificación es una exhibición de autos, entonces esta sesión es sobre la construcción de motores. Juego de palabras totalmente intencionado.

Ahora que tenemos el repositorio de GitHub abierto, comencemos. Lo primero que te recomiendo hacer es hacer un fork de este repositorio en tu propia cuenta. Si observa el contenido de este repositorio, verá un montón de código de muestra, así como algunas instrucciones paso a paso en el archivo Léame para todo lo que haremos en esta presentación. De hecho, copiaremos y pegaremos mucho directamente desde este repositorio en su proyecto. Para clonar esto localmente, avancemos y ejecutemos el comando de clonación de Git dentro de su terminal.

Eso tomará solo un segundo para descargar, y luego, una vez que hayamos descargado el proyecto, avancemos y cambiemos nuestro directorio a ese directorio del proyecto. A partir de ahí, voy a ejecutar un comando para abrir este proyecto en VS Code, pero no dude en usar el editor de código que desee. Dado que VS Code ya tiene una terminal integrada, puedo limpiar esto y luego seguir adelante y cerrar iTerm. Y ahora, podemos hacer la transición para ubicar nuestro sitio local de WordPress. Para hacer eso, vamos a abrir este proyecto en Finder y luego ubicar el archivo zip de demostración de WP sin encabezado que he preparado para usted.

Arrastraremos y soltaremos ese archivo zip directamente en el entorno de desarrollo local, y local comenzará el proceso de desempaquetar y arrancar su sitio de demostración de WordPress por usted. Podemos apegarnos a los valores predeterminados, y luego local tomará solo unos minutos para crear un nuevo sitio de WordPress. Ahora, esta es una gran característica de WP migrate pro que me permite exportar cualquier sitio como un zip y arrastrarlo y soltarlo directamente en local para que pueda llevar un sitio de producción a mi máquina local muy rápidamente, independientemente de la plataforma.

Una vez que haya terminado de instalarse, es posible que desee continuar y confiar en este certificado SSL, y luego continuaremos y abriremos este proyecto en WP Admin. A partir de ahí, seguiremos adelante y simplemente minimizaremos local, ya que ya se está ejecutando y realmente no necesitamos hacer nada más con él. A partir de ahí, abriremos nuestro repositorio, donde encontrará un nombre de usuario y una contraseña de administrador que ya he creado para este sitio de demostración. Debería poder usar esas credenciales para continuar e iniciar sesión en el panel de administración de WP. A partir de ahí, nos tomará solo un segundo ubicarnos con esta instalación local de WordPress.

Lo primero que haremos es echar un vistazo a los complementos que se instalan con este sitio de WordPress. Vemos cosas como campos personalizados avanzados para el modelado de datos. Tenemos faltas para habilitar algunas de nuestras capacidades sin cabeza, WP GraphQL para actuar como una API para nuestro sitio y luego WP GraphQL para la extensión ACF para mostrar algunos de los grupos de campo ACF. Ahora, echemos un vistazo a las publicaciones también. Si observa todas las diferentes publicaciones de demostración que he rellenado previamente dentro de este proyecto, podemos ver que tenemos varias publicaciones diferentes con un montón de categorías diferentes.

Si echamos un vistazo al contenido dentro de cada publicación, veremos que tenemos un montón de contenido del cuerpo, algunas imágenes, imágenes destacadas y algunos grupos de campos ACF que ya hemos creado y rellenado previamente. Así que echemos un vistazo a los grupos de campo con más detalle. Si abrimos el menú ACF, verá que tenemos dos grupos de campo creados: recursos alimentarios y mixtape dulce. Echemos un vistazo a los recursos alimentarios primero.

Este es solo un grupo de campos realmente básico con dos campos individuales: texto y URL. Para cada una de estas cosas, tengo marcada la opción Mostrar en GraphQL para que aparezcan en GraphQL. Luego también he marcado esa opción a nivel de grupo de campo. Además, tengo cierta lógica condicional para determinar cuándo presentar estas publicaciones, por lo que si la categoría de publicación es igual a comida. Y veamos cómo se ve el dulce mixtape.

Veremos que esto se parece bastante a nuestros recursos alimentarios, y que tenemos un par de campos diferentes. Cada uno tiene marcada la opción Mostrar en GraphQL, además de tenerla marcada a nivel de grupo de campo. Podemos ver que hay un par de configuraciones diferentes que nos brinda la extensión WP GraphQL que es posible que no necesitemos. Además, podemos ver que también mostramos esto condicionalmente según la categoría de la publicación.

Entonces, ahora, echemos un vistazo a WP GraphQL y lo que nos brinda en términos de herramientas. Si abrimos el menú de GraphQL, caeremos dentro del IDE gráfico. Ahora, este es un entorno de desarrollo interactivo que le permite crear consultas utilizando WP GraphQL. Podemos especificar que queremos, digamos, las primeras 10 publicaciones con categorías e incluir nuestros campos ACF adicionales aquí también. Cuando hacemos clic en el botón Ejecutar, obtenemos datos en vivo de nuestro sitio de WordPress que coinciden con los datos de esa consulta.

Si queremos, podemos abrir la ventana Query Composer y redactar visualmente aspectos de nuestra consulta. Así que esta es una herramienta realmente útil si no está seguro de qué campos o datos en particular pueden estar en un objeto de WordPress en particular. Puede usar Query Composer para explorar y ejecutar esas consultas en tiempo real. Ahora, pasemos a configurar Faust abriendo el menú de configuración de Faust. Como dije en la charla de introducción, Faust es realmente un marco de trabajo de dos partes que consta de un complemento de WordPress y su base de código de front-end.

Entonces, si volvemos al menú de configuración del complemento de WordPress, podemos ver que hemos configurado esta opción para la URL del sitio de front-end, que apuntará a la dirección de nuestro sitio de front-end. Justo debajo de eso, en la opción de clave secreta, vamos a continuar y hacer clic en regenerar para generar una clave única que puede usar para su proyecto de demostración. A partir de ahí, volvamos a la base del código JavaScript y vamos a ejecutar este comando para copiar un archivo de variable de entorno de muestra en uno que podamos usar con nuestro sitio.

Una vez que hayamos ejecutado eso, ordene abrir el archivo .env.local y haremos un par de cambios. Lo primero es que reemplazará la siguiente opción de URL pública de WordPress con la ubicación de su sitio local. Entonces ACF.WPEngine.local. Y luego también tomaremos ese valor de clave secreta y lo usaremos para nuestra clave secreta Faust. Asegúrese de que también queremos descomentar eso, y luego esa última variable de entorno es realmente útil para las pruebas y el desarrollo local para que pueda solucionar cualquier problema de SSL que pueda tener mientras se conecta al entorno de desarrollo local.

A partir de ahí, querremos ejecutar NPM Install para instalar todas las dependencias de nuestro proyecto y, una vez hecho esto, podemos comenzar y ejecutar NPM Run Dev para iniciar nuestro proyecto. Eso tomará solo un segundo para compilar, pero una vez que lo haga, podemos abrir localhost: 3000 en el navegador, y deberíamos ver nuestro sitio Faust en acción.

Una vez que se renderiza, puedes ver que Faust ya está manejando algo de magia para nosotros. Si miramos ese menú en la parte superior derecha, podemos ver que ya está extrayendo páginas y contenido de nuestros menús que hemos definido en nuestro backend de WordPress, y si volvemos a nuestro administrador de WordPress, podemos ver cómo funciona esta conexión con un poco más de detalle.

Debido a que el complemento Faust conoce la dirección de nuestra URL de front-end, reescribe muchos de los enlaces, como los enlaces de vista previa, de modo que cuando los abre en el navegador, se abren en la URL del sitio de front-end, para que pueda está obteniendo una vista previa real en vivo de cómo se verá su contenido en el front-end.

Ahora, profundicemos en la estructura de nuestro proyecto Faust JavaScript. Si está familiarizado con el trabajo en Next.js, probablemente haya usado el directorio de la página para crear componentes de página que implementen sus rutas. Todavía puede hacer esto en Faust, pero se basa en este concepto al proporcionar una ruta general llamada nodo de WordPress que le permite tomar cualquier URI que administre WordPress y resolverlo en una pieza de contenido en particular.

Luego obtenemos algunos datos adicionales sobre ese elemento de contenido y los pasamos a través de nuestros componentes para que podamos resolver esa pieza de contenido individual en una plantilla particular en la carpeta de plantillas de WP. Esto es muy similar al concepto de jerarquía de plantillas y la temática tradicional de WordPress, y muchas de las convenciones de nomenclatura. Haga coincidir, por ejemplo, frontpage.js es la página principal de nuestro sitio web, mientras que page.js es responsable de mostrar cosas del tipo de contenido de la página. Y single.js está ahí para representar publicaciones individuales.

Ahora, comencemos y hagamos que nuestro frontpage.js sea un poco más dinámico. DE ACUERDO . Entonces, para comenzar, seguiremos adelante y abriremos nuestro archivo front page.js y nos daremos un poco más de espacio para trabajar. Entonces, si observamos el contenido de este archivo, podemos ver que hay tres piezas principales. Está el componente mismo que representamos, una propiedad de consulta que se adjunta al componente y se ejecuta cada vez que representamos el componente, y luego algunas variables que podemos pasar en la parte inferior.

Y como puede ver, hay dos formas principales de usar esto. Ya sea utilizando el enlace de consulta de uso dentro del componente, o puede pasarse como accesorios al componente en sí, y lo verá en un ejemplo más adelante. Así que regresemos al repositorio y comencemos con el paso 2.1 para actualizar la consulta de nuestro frontpage.js. Así que copiaremos eso, luego regresaremos al IDE gráfico y simplemente jugaremos allí por un segundo. Entonces, esta consulta que tenemos en nuestro portapapeles debería obtener las primeras 10 publicaciones y obtener un par de datos asociados con cada una de esas publicaciones.

Entonces, si hacemos clic allí y lo ejecutamos, vemos que todo funciona muy bien. Y entonces querremos seguir adelante y agregar eso a nuestra propiedad de consulta de componente. Así que encontraremos un buen lugar para hacer eso y simplemente lo pegaremos ahí, y haremos un poco de reformateo. Entonces, lo que hace es agregar esta parte individual de la consulta a esa consulta en sí. Por lo tanto, aún debemos hacer que los resultados de esa consulta estén disponibles para el resto de nuestro componente, por lo que continuaremos y agregaremos esta línea adicional que simplemente extrae el resultado de la publicación en una variable con la que podamos trabajar.

Ahora, el siguiente paso para hacer que esta página de inicio sea dinámica es crear un componente para representar esos extractos de publicaciones. Así que haremos eso y crearemos un par de archivos en la carpeta de componentes, y mencionaré aquí que voy a seguir adelante y crear un postexcerpt.js dentro de una carpeta de extractos de publicaciones, y yo Realmente solo estoy duplicando la estructura de los componentes existentes que forman parte de este proyecto de introducción a Faust.js. Eres realmente libre de hacer lo que quieras aquí, y solo estoy siguiendo el marco como ya se ha establecido para mí como parte de este Introducción.

Entonces, una vez que tengamos esos tres archivos, comenzaremos a agregarles algunas cosas para representar esas publicaciones. Así que lo primero que haremos es poner algo de contenido en nuestro componente de extracto de publicación. Entonces, solo copiaremos y pegaremos eso desde nuestro repositorio, y podemos ver que estamos importando ese archivo module.css. Y tenemos una función llamada extracto de publicación que es nuestro componente que prueba un accesorio que es la publicación, luego representamos una sección, tenemos un enlace que irá directamente a la URI de esa publicación, representando el título. Luego, tenemos mosaicos de categoría que también estamos representando, y luego usamos peligrosamente la configuración en nuestro HTML para configurar el contenido HTML para el extracto de la publicación.

Ahora, una vez que todo esté bien y guardado, lo guardaremos, pero también entraremos aquí y agregaremos este estilo de alcance adicional a nuestro componente para diseñar esas etiquetas de intervalo para nuestras categorías, y luego simplemente haga algo de importación y exportación dentro del archivo index.js para pasar de una exportación predeterminada a una exportación con nombre, y guardaremos todas esas cosas. Y luego, el último paso para que esté disponible para su uso en otras cosas es agregar una línea de exportación más al archivo index.js de nuestra carpeta de componentes. Y ahora que lo hemos hecho, si regresamos a la página de inicio, frontpage.js, deberíamos poder agregar una importación adicional a nuestra declaración de importación existente para usar el extracto de nuestra publicación.

Ahora, vamos a querer encontrar un lugar para implementar eso, y si bajamos y miramos dentro de nuestro elemento principal, vemos que tenemos algunas cosas justo debajo del héroe, lo que haremos es simplemente copie y pegue parte del código en el repositorio y sobrescriba lo que hay dentro de ese código principal con el uso de nuestro extracto de la publicación. Y reformatearemos un poco para suavizar algunas cosas, pero pueden ver que lo que estamos haciendo está dentro de ese contenedor, vamos a mapear a través de la serie de publicaciones que obtuvimos como resultado de nuestra consulta y luego devolver un componente de extracto de publicación donde pasamos la publicación y le damos una clave.

Y luego, si seguimos adelante y guardamos todo eso y lo renderizamos en el navegador y lo actualizamos, deberíamos ver que tenemos una gran página de inicio dinámica. Sí, cada uno de esos títulos tiene un enlace en el que se puede hacer clic, al igual que los mosaicos de categorías individuales. Y si hacemos clic, podemos ver que gracias a las plantillas que ya existen en Faust, todas nuestras publicaciones ya se están procesando, aunque nos faltan algunos de esos grupos de recursos que creamos con ACF. Entonces, si hacemos clic en una segunda publicación, podemos ver que una se ve muy bien, así como también todos los enlaces de categoría prefabricados que son: solo estamos usando esos URI de categoría para apoyarnos en Faust al representar esa plantilla JS de categoría. .

Bien, ahora que tenemos una página de inicio dinámica, pasemos a hacer que esos campos ACF se representen en nuestra plantilla single.js. Así que continúe y limpie nuestro editor de código, y luego podemos abrir el archivo single.js y ver qué hay dentro. Sabemos que en ese nivel superior, tenemos esta función de componente que estamos exportando que en realidad toma accesorios, y la propiedad component.query que tiene una consulta GraphQL dinámica que lee algunas de esas variables que obtenemos de la consulta inicial.

Y lo que finalmente querremos hacer al final es mostrar algunos de esos diferentes recursos de publicación en la parte inferior del contenido de nuestra publicación. Así que vuelvo al repositorio y me desplazo hacia abajo hasta el paso 3.1, donde actualizamos la consulta de publicación única, y le daremos un vistazo porque comienza a atraer tanto el mixtape dulce como los grupos de campo de recursos de alimentos que creamos en el paso anterior. Si tomo esa consulta, la copio y la pego en gráficos, continuaré y codificaré una ID de base de datos para una publicación, y eliminaré solo un par de esas cosas diferentes que no necesitamos como Vista previa y ese otro fragmento .

Si sigo adelante y ejecuto eso, veremos que obtengo algunos datos que contienen realmente lo que esperaría. El contenido, recupero al autor y recupero, lo que es más importante, ambos grupos de campos y sus datos. Así que continuaré y copiaré esa consulta y regresaré a single.js. A partir de ahí, simplemente reemplazaré esa parte de la consulta con lo que obtuve de mi portapapeles. Podemos seguir adelante y guardar eso. Puede reformatearlo si lo desea, pero esto es independiente de los espacios en blanco, por lo que creo que, en su mayor parte, se ve bien.

A partir de ahí, querremos hacer lo mismo que hicimos en el último paso, donde lo hicimos parte de nuestra consulta. Ahora, queremos asegurarnos de que esas variables estén disponibles dentro de nuestro componente. Los agregaremos a esa declaración de estructuración y, además, dado que tenemos un par de categorías diferentes para nuestras publicaciones, queremos crear algunas cosas booleanas que nos ayuden a determinar si debemos mostrar o no recursos de comida o mezclas dulces. Porque, como puede ver allí, no importa lo que obtengamos, y si no hay nada que encontrar para los campos dulces de mixtape, estos regresan como nulos. Así que querré hacer una verificación condicional allí, así que agregaré estas dos líneas de código a nuestro archivo.

Y lo que esto hace básicamente es que nos crea algunas variables booleanas que podemos usar a continuación para representar plantillas de forma condicional. En esto, estamos mirando los nodos para cada categoría y luego básicamente filtrándolos para determinar si tienen o no comida o música, y luego verificando la duración. Probablemente hay muchas formas en las que podría implementar este tipo de variable booleana, así que siéntase libre de cambiar esto si tiene una forma más limpia de hacerlo, pero para nuestros propósitos aquí, creo que funcionará bien.

Ahora, el siguiente paso es que realmente querremos, como en el paso anterior, crear algunos componentes adicionales. Así que seguiré adelante y dentro de mi archivo de componentes seguiré adelante y crearé un componente de recursos alimentarios. Entonces crearé una carpeta y luego un archivo food resources.js dentro de eso, y junto con eso, crearé un archivo index.js así como un archivo de módulos CSS. Y ahora que el archivo de módulos SCSS es realmente útil porque nos permite aplicar nuestros estilos a ese componente en particular. Así que se siente como una sintaxis rara para hacerlo, pero al final es un resultado realmente limpio porque no tenemos que escribir un montón de clases y esas cosas.

Así que comenzaré a copiar y pegar el código del componente del repositorio directamente en esos archivos. Podemos ver que tenemos una función de recursos alimentarios que toma el nombre de la receta de dos accesorios y el enlace de la receta, luego los representamos por debajo de nuestra edad agradable con el emoji de burrito. También copiaremos y pegaremos algunos estilos de archivos SCC en esta carpeta en particular y luego nos aseguraremos de exportarlos desde las carpetas de componentes index.js. Y al igual que en el ejemplo anterior, querremos continuar y exportar esto en el index.js de nuestra carpeta de componentes también para que podamos tener un grupo realmente bueno para importar, como lo ha visto directamente desde esos componentes. carpeta en otro lugar en algunos de estos archivos diferentes.

Entonces, una vez que hayamos agregado eso, centraremos nuestra atención en el componente de recursos musicales y haremos lo mismo. Vamos a seguir adelante y crear esa misma estructura de archivos. Entonces, la carpeta de recursos de música y un archivo musicresources.js dentro de eso. Luego continuaremos y crearemos un archivo index.js para exportarlo y luego también nuestro archivo musicresources.module.scss para esos estilos de alcance.

Entonces, una vez que tengamos todas esas cosas, haremos lo mismo que hicimos con nuestros recursos alimentarios y copiaremos y pegaremos parte de este código del repositorio. Podemos ver que este componente se ve casi idéntico. Tenemos recursos musicales. En realidad, tiene tres accesorios en lugar de dos, pero teníamos tres campos en este grupo de campos, pero la convención de estilos.componentes es la misma. Y solo estamos haciendo una representación ligeramente diferente porque tenemos contenido diferente.

Entonces, a partir de ahí, también agregaremos nuestro código SCSS y nos aseguraremos de exportarlo desde las carpetas de componentes index.js y luego también importarlo a nuestra carpeta aquí, y creo que en realidad lo hice, cambiemos rápidamente el nombre de esto y solo asegúrese de que todos nuestros nombres se vean bien, de modo que nuestro index.js y los componentes encuentren nuestros recursos musicales y todo eso sea genial. Así que ahora, seguiremos adelante y simplemente cerraremos todas estas pestañas superfluas porque estamos listos para implementar esos componentes en nuestro archivo single.js.

Entonces, para hacer eso, solo agregaremos esos dos componentes a nuestra declaración de importación existente, que ya los reconoce automáticamente, y encontraremos un buen lugar para hacerlo. Y entonces tenemos este componente contenedor de contenido aquí abajo. Y ahora mismo, estamos pasando el contenido, pero eso en realidad también aceptará niños de manera opcional. Entonces, podemos pasar el contenido, pero también pasar algunos componentes secundarios directamente a ese contenedor de contenido, para que se muestre en ese bonito espacio horizontal que ya tenemos y todo esté alineado.

Así que eso es lo que haremos, y luego copiaremos y pegaremos ese código allí y lo formateamos y hablaremos sobre lo que está sucediendo en este ejemplo en particular. Así que justo dentro de ese componente contenedor de contenido, estamos usando esas variables booleanas is food y is music para representar condicionalmente, sin embargo, los componentes de recursos correspondientes. Entonces, si la comida es verdadera y esta publicación está en la categoría de comida, la mostraremos. Y si es música, haremos lo mismo. Y allí, pueden ver que estamos pasando por todos los diferentes accesorios que se necesitan para renderizar eso.

Y si volvemos y actualizamos una de nuestras páginas de plantilla single.js, podemos ver que nuestros recursos de alimentos se muestran de la manera que esperaríamos, y ese enlace funcionaría correctamente si volvemos a WP Admin o a nuestra casa. página. Y si encontramos uno y la categoría de comida o música, podemos abrir Kinfolk Synth DIY y ver cómo se ve nuestro componente de recursos de música, y todo se ve genial. Y si encontramos uno que realmente está en ambas categorías, podemos ver que en realidad, en la parte inferior, presenta ambos componentes tal como lo esperaríamos.

DE ACUERDO. Entonces, ahora que tenemos nuestro sitio de la manera que lo queremos, pasemos a hablar sobre cómo implementar este sitio. Ahora, tengo una sección del repositorio de GitHub creada para nosotros y, de hecho, he creado una rama implementada completamente separada en la rama final. Entonces, ejecutando Git check out terminado, te lo conseguiremos. Y también puede simplemente implementar esa rama directamente en Atlas, que es la solución de alojamiento de WordPress sin cabeza de WP Engine.

Esto le brinda una instalación de WordPress y un contenedor de Node.js, y puede registrarse para obtener una cuenta gratuita de sandbox simplemente haciendo clic en este botón en la página de inicio de Atlas. Te lleva a un foro realmente rápido y, como puedes ver, el precio es cero. Es posible que aún deba ingresar una tarjeta de crédito que usamos solo con fines de prevención de fraude, pero puede tener una cuenta gratuita para jugar con cualquiera de esto para probarlo, para aprender sin cabeza al deseo de su corazón. Así que continuaré y abriré el tablero de WP Engine para comenzar a implementar este sitio en Atlas.

Lo primero que voy a hacer es abrir mi lista de sitios y abriré mi sitio de producción de WordPress. Entonces, en realidad, este sitio sin encabezado de ACF que ven aquí, donde voy a abrir el administrador de WP en una nueva ventana, es el sitio principal para el archivo zip que todos usan localmente. Así que hice un zip de eso usando la exportación de WP, y eso es lo que voy a usar para mi implementación de producción.

Desde allí, haré clic en la pestaña Atlas y luego en Crear aplicación. Y se me presenta esta opción. Elegiré Extraer del repositorio y luego haré clic en Continuar. Y si no me he autenticado con GitHub, aquí es donde lo harías, pero como ya lo estoy, puedo continuar y seleccionar mi repositorio. Así que continuaremos y seleccionaremos el repositorio que estamos usando para este proyecto, haremos clic en Continuar, luego implementaré mi aplicación en US Central.

Desde aquí, me permite elegir una rama y, como dije, voy a usar Terminado. También hay opciones si está utilizando un monorepo, que no lo estamos, y voy a dejar marcado Tengo mi instalación de WordPress y Buscar mi sitio sin cabeza ACF. Ahora, aquí, voy a querer, en realidad, en lugar de usar un archivo .env, voy a querer copiar dos variables de entorno de mi proyecto de archivos.

Entonces, el primero es la siguiente URL pública de WordPress. Esas son las mismas variables de entorno que configuramos en nuestro proyecto local, y copiaré el enlace a mi instalación de producción de WordPress allí. Luego agregaré otra variable de entorno, y esta será para nuestra clave secreta Faust. Así que seguiré adelante y copiaré eso desde el menú de Configuración de Faust, lo insertaré allí y configuraré la clave para eso en Faust Secret Key.

Y una vez hecho esto, puedo continuar y hacer clic en Crear aplicación, y Atlas comenzará el proceso de creación e implementación de mi aplicación. Durante el proceso de compilación de Atlas, ejecutará la instalación de NPM y su comando de compilación de NPM para cualquier marco que esté utilizando. Y luego, una vez que se haya creado todo ese código, implementará ese contenedor de Nodo para usted en nuestra red. Entonces, una vez que todo eso gire por solo un segundo, deberíamos recibir un mensaje de éxito, y luego podemos hacer clic en la URL que se nos proporcionó y ver nuestro sitio en vivo.

Obtendremos nuestro mensaje de éxito y luego podremos continuar y abrir esta URL en otra pestaña. Y allí podemos ver que nuestro sitio se ve exactamente como lo hizo localmente, y está obteniendo todos los datos correctos, todas las imágenes correctas e incluso está absorbiendo todo nuestro contenido ACF. Varias de nuestras publicaciones se ven muy bien y nuestro rendimiento en Atlas es muy bueno. De hecho, estoy usando algunas imágenes realmente grandes aquí, así que si ves algo de lentitud, sin duda se debe a mis elecciones.

La plataforma Atlas está repleta de características que los desarrolladores modernos de JavaScript apreciarán. Lamentablemente, no hay suficiente tiempo en esta presentación para repasarlos todos en detalle.

Pero Atlas hace un muy buen trabajo al reunir detalles importantes de las partes frontal y trasera de su ecosistema sin cabeza en un tablero conveniente, donde puede ver los registros de compilación individuales y el resultado de la compilación, examinar implementaciones, variables de entorno que usó para una compilación en particular, así como tener acceso a configuraciones o funciones adicionales que puede habilitar, como entornos de vista previa, donde puede crear un entorno adicional para cada PR que se crea en su repositorio de GitHub, o crear webhooks de entorno para reconstruir partes particulares de su aplicación o CDN a medida que realiza cambios en WordPress.

Todas estas cosas se vuelven posibles con la plataforma Atlas, y realmente reduce la barrera para comenzar a construir con WordPress sin cabeza.

Guau. Felicitaciones como dije, era mucho para cubrir en 25 minutos. Siéntase libre de seguir practicando después de la presentación y contácteme si tiene alguna pregunta para comenzar con los recursos de demostración. Si está interesado en obtener más información sobre la tecnología sin cabeza pero necesita un espacio para hacerlo, regístrese para obtener una cuenta gratuita de Atlas Sandbox. Además de implementar sus propios repositorios de código, como lo hemos hecho hoy, también puede comenzar con algunos de nuestros planos prefabricados, que son pilas de proyectos de un solo clic que pueden ayudarlo a ver cómo se ve un proyecto sin cabeza cuando está terminado.

We have a basic scaffold example, a portfolio example with some custom post types, and a new ecommerce example that integrates with big commerce through some of their APIs. Our team and developer relations is really passionate about meeting you wherever you are on your journey towards learning headless. So check out our headless developer's roadmap for a step-by-step series of articles and videos that build on one another to help backfill some of the concepts we've just glossed over today.

The headless ecosystem is young, but it's growing quickly. If you need help on a project, want to talk to some people using headless WordPress in production, or just want to hang out where the magic happens, join the roughly 1,000 other developers in our Discord focused on headless, where we chat, help each other with projects, and help get you moving. Thank you so much for coming to this talk. I look forward to collaborating with you on all of your future headless projects.