Comment créer votre premier projet WordPress sans tête avec ACF + WPGraphQL

Tout le monde a ses outils préférés en matière de développement WordPress, et l'idée de créer un site sans tête sans ces outils peut être décourageante. Heureusement, deux outils préférés des développeurs WordPress - ACF et WPGraphQL - peuvent vous aider à vous plonger dans le développement sans tête.

Dans cette session, l'avocat principal du développeur de WP Engine, Jeff Everhart, montre les tenants et les aboutissants de l'infrastructure en créant un site de démonstration en quelques minutes à l'aide d'Atlas !

Diapositives de la session :

Transcription:

JEFF EVERHART : Quoi de neuf, tout le monde ? Je m'appelle Jeff Everhart, un développeur senior ici chez WP Engine. Merci beaucoup d'avoir rejoint mon exposé aujourd'hui sur la création de votre premier projet WordPress sans tête avec ACF et WP GraphQL. Avant de me lancer dans la construction, j'aime toujours donner un peu de contexte sur ce qu'est WordPress sans tête. Il semble que sans tête devienne moins un terme de niche et plus courant, alors je vais essayer de garder l'explication courte.

Headless WordPress consiste essentiellement à utiliser le CMS WordPress via une API pour alimenter un autre type d'application. Si nous regardons le diagramme de cette diapositive, lorsqu'un utilisateur demande site.com/page, au lieu que WordPress gère cette demande, une application JavaScript répond à cette route. Il examine le chemin, détermine les données dont il a besoin à partir de WordPress ou d'autres sources, effectue ces appels d'API et génère une réponse à l'utilisateur.

Il est important de noter que ce qui se trouve dans cet emplacement d'exécution Node.js peut en réalité être n'importe quel type d'applications ou de clients différents. Nous avons vu divers exemples d'applications mobiles ou de sites Web construits avec tous les frameworks les plus populaires qui utilisent ce modèle avec beaucoup de succès. Maintenant que vous avez une bonne idée de ce qu'est WordPress sans tête, passons en revue la pile technologique que nous allons utiliser pour le projet d'aujourd'hui.

À notre couche la plus arrière, nous utiliserons WP GraphQL comme API. WP GraphQL transforme votre backend WordPress en une puissante API GraphQL. Il applique tous les mêmes contrôles de sécurité de rôle et de capacité que WordPress natif et l'API REST principale. WP GraphQL est un excellent choix pour développer des applications sans tête, car en utilisant son langage de requête déclaratif, nous pouvons interroger différents types de contenu dans tout ce métier de contenu. Donc, obtenir des publications, des pages avec leurs catégories dans la même requête.

Voyons maintenant comment nous pouvons structurer et modéliser des données plus complexes à l'aide du CMS WordPress. De nombreux développeurs qui abordent des projets sans tête ont besoin de modéliser et de stocker des données différentes, n'est-ce pas ? S'étend au-delà des publications ou des pages typiques de WordPress. ACF ou champs personnalisés avancés est un excellent outil pour modéliser ces champs personnalisés. Dans une prochaine version, il deviendra encore plus puissant en vous permettant d'enregistrer les types de publication et les taxonomies directement dans l'interface utilisateur dans la version gratuite de ce plugin.

Il rend toutes les données disponibles via l'API REST facilement, mais devra installer une extension WP GraphQL pour ajouter certaines de ces données de champ à notre schéma GraphQL. Personnellement, je suis vraiment ravi de voir ce plugin évoluer à mesure qu'il devient plus puissant pour les développeurs sans tête.

Maintenant que nous pouvons modéliser des données complexes et les interroger via WP GraphQL, nous avons besoin d'un moyen de créer ces expériences Web modernes pour nos utilisateurs tout en prenant en charge les éditeurs de contenu qui connaissent et aiment déjà WordPress. C'est là qu'intervient Faust. Faust est un framework en deux parties composé d'un plugin WordPress et d'un framework JavaScript basé sur Next.js. Ils travaillent ensemble pour rendre la création de sites WordPress sans tête facile et intuitive.

Il ajoute la prise en charge d'éléments tels que les aperçus de publication et l'authentification prête à l'emploi, et vous pouvez vous pencher sur une expérience de hiérarchie de modèles WP réinventée en JavaScript moderne. Faust.js vise à être une plate-forme très extensible et est livré avec un système de plug-in et une barre d'administration que vous pouvez utiliser pour personnaliser et créer des expériences qui prennent en charge votre cas d'utilisation particulier.

Enfin et surtout, nous aurons besoin de moyens de travailler avec ces outils localement et en production. En utilisant la migration locale et WP, j'ai rassemblé toutes les ressources WordPress dont vous aurez besoin pour ce projet dans un seul fichier zip que vous pouvez faire glisser et déposer en local pour commencer. Une fois que nous avons fini de construire notre site, nous pouvons pousser notre travail vers la plate-forme Atlas. Atlas WP Engine est la solution d'hébergement sans tête tout-en-un qui combine votre backend WordPress et un conteneur Node.js, tous réglés pour fonctionner ensemble, disponibles via un tableau de bord transparent.

Maintenant que vous avez une bonne compréhension de tous les outils que nous utiliserons dans la présentation d'aujourd'hui, allons-y et commençons à construire. Ouvrez l'URL dans cette diapositive pour accéder au code de démonstration dans le navigateur. J'ai essayé de rendre cette expérience aussi simple que possible, mais nous couvrirons beaucoup de terrain dans les 25 prochaines minutes, alors n'hésitez pas à regarder maintenant et à vous référer à ce référentiel GitHub et au enregistrement de cette session plus tard pour continuer à travailler après la conférence. Si le reste du décodage est un salon de l'automobile, alors cette session porte sur la construction de moteurs. Jeu de mots totalement voulu.

Maintenant que le référentiel GitHub est ouvert, commençons. La première chose que je vous recommande de faire est de créer un fork de ce référentiel dans votre propre compte. Si vous parcourez le contenu de ce référentiel, vous verrez un tas d'exemples de code ainsi que des instructions étape par étape dans le fichier Lisez-moi pour tout ce que nous ferons dans cette présentation. En fait, nous ferons beaucoup de copier-coller directement depuis ce référentiel dans votre projet. Pour cloner cela localement, allons-y et exécutons la commande Git clone à l'intérieur de votre terminal.

Cela ne prendra qu'une seconde à télécharger, puis une fois que nous aurons téléchargé le projet, continuons et changeons notre répertoire dans ce répertoire de projet. À partir de là, je vais exécuter une commande pour ouvrir ce projet dans VS Code, mais vous devriez vous sentir libre d'utiliser l'éditeur de code de votre choix. Étant donné que VS Code a déjà un terminal intégré, je peux nettoyer cela, puis continuer et fermer iTerm. Et maintenant, nous pouvons passer à la localisation de notre site WordPress local. Pour ce faire, nous allons ouvrir ce projet dans le Finder, puis localiser le fichier zip de démonstration WP sans tête que j'ai préparé pour vous.

Nous glisserons et déposerons ce fichier zip directement dans l'environnement de développement local, et local commencera le processus de décompression et d'amorçage de votre site de démonstration WordPress pour vous. Nous pouvons à peu près nous en tenir aux valeurs par défaut, puis local ne prendra que quelques minutes pour vous créer un nouveau site WordPress. Maintenant, c'est une fonctionnalité intéressante de WP migrate pro qui me permet d'exporter n'importe quel site sous forme de zip et de le glisser-déposer directement en local afin que je puisse transférer très rapidement un site de production sur ma machine locale, quelle que soit la plate-forme.

Une fois l'installation terminée, vous voudrez peut-être continuer et faire confiance à ce certificat SSL, puis nous continuerons et ouvrirons ce projet dans WP Admin. À partir de là, nous allons continuer et minimiser le local, car il est déjà en cours d'exécution et nous n'avons pas vraiment besoin de faire quoi que ce soit d'autre avec. Donc, à partir de là, nous ouvrirons notre référentiel, où vous trouverez un nom d'utilisateur et un mot de passe d'administrateur que j'ai déjà créés pour ce site de démonstration. Vous devriez pouvoir utiliser ces informations d'identification pour continuer et vous connecter au tableau de bord WP Admin. À partir de là, nous ne prendrons qu'une seconde pour nous situer avec cette installation WordPress locale.

La première chose que nous allons faire est de jeter un œil aux plugins qui sont installés avec ce site WordPress. Nous voyons des choses comme des champs personnalisés avancés pour la modélisation des données. Nous avons des fautes pour activer certaines de nos capacités sans tête, WP GraphQL pour agir comme une API pour notre site, puis WP GraphQL pour l'extension ACF pour faire apparaître certains des groupes de champs ACF. Maintenant, jetons également un coup d'œil aux messages. Si vous regardez tous les différents messages de démonstration que j'ai pré-remplis dans ce projet, nous pouvons voir que nous avons un certain nombre de messages différents avec un tas de catégories différentes.

Si nous examinons le contenu de chaque publication, nous verrons que nous avons un tas de contenu corporel, des images, des images en vedette et des groupes de champs ACF que nous avons déjà créés et pré-remplis. Examinons donc plus en détail les groupes de champs. Si nous ouvrons le menu ACF, vous verrez que nous avons créé deux groupes de champs : les ressources alimentaires et la mixtape sucrée. Examinons d'abord les ressources alimentaires.

Il s'agit juste d'un groupe de champs vraiment basique avec deux champs individuels - texte et URL. Pour chacune de ces choses, j'ai coché l'option Afficher dans GraphQL afin qu'elles apparaissent dans GraphQL. Ensuite, j'ai également coché cette option au niveau du groupe de champs. De plus, j'ai une logique conditionnelle pour déterminer quand rendre ces publications - donc si la catégorie de publication est égale à la nourriture. Et voyons à quoi ressemble une douce mixtape.

Nous verrons que cela ressemble assez à nos ressources alimentaires et que nous avons quelques champs différents. Chacun a l'option Afficher dans GraphQL cochée, ainsi que celle cochée au niveau du groupe de champs en plus. Nous pouvons voir qu'il y a quelques paramètres différents que l'extension WP GraphQL nous donne dont nous n'avons peut-être pas besoin. De plus, nous pouvons voir que nous affichons également cela de manière conditionnelle en fonction de la catégorie de publication.

Alors maintenant, jetons un coup d'œil à WP GraphQL et à ce que cela nous donne en termes d'outils. Si nous ouvrons le menu GraphQL, nous serons déposés à l'intérieur de l'IDE graphique. Il s'agit maintenant d'un environnement de développement interactif qui vous permet de créer des requêtes à l'aide de WP GraphQL. Nous pouvons spécifier que nous voulons, disons, les 10 premiers messages avec des catégories et inclure nos champs ACF supplémentaires ici également. Lorsque nous cliquons sur le bouton Exécuter, nous récupérons les données en direct de notre site WordPress qui correspondent aux données de cette requête.

Si nous le voulons, nous pouvons ouvrir la fenêtre Query Composer et composer visuellement des aspects de notre requête. C'est donc un outil très pratique si vous n'êtes pas sûr des champs ou des données particuliers qui pourraient se trouver sur un objet WordPress particulier. Vous pouvez utiliser Query Composer pour explorer et exécuter ces requêtes en temps réel. Passons maintenant à la configuration de Faust en ouvrant le menu des paramètres de Faust. Comme je l'ai dit dans le discours d'introduction, Faust est vraiment un framework en deux parties qui se compose d'un plugin WordPress et de votre base de code frontal.

Donc, si nous revenons dans le menu des paramètres du plug-in WordPress, nous pouvons voir que nous avons défini cette option pour l'URL du site frontal, qui va pointer vers l'adresse de notre site frontal. Juste en dessous, dans l'option de clé secrète, nous allons continuer et cliquer sur régénérer pour générer une clé unique que vous pouvez utiliser pour votre projet de démonstration. À partir de là, revenons en fait dans la base de code JavaScript, et nous allons exécuter cette commande pour copier un exemple de fichier de variable d'environnement dans celui que nous pouvons utiliser avec notre site.

Une fois que nous avons exécuté cela, la commande ouvre le fichier .env.local, et nous allons apporter quelques modifications. La première chose est que cela remplacera la prochaine option d'URL WordPress publique par l'emplacement de votre site local. Donc ACF.WPEngine.local. Et puis nous prendrons également cette valeur de clé secrète et l'utiliserons pour notre clé secrète Faust. Assurez-vous que nous voulons également décommenter cela, puis cette dernière variable d'environnement est vraiment utile pour les tests et le développement local afin que vous puissiez résoudre tous les problèmes SSL que vous pourriez rencontrer lors de la connexion à l'environnement de développement local.

À partir de là, nous allons vouloir exécuter NPM Install pour installer toutes les dépendances de notre projet, puis une fois cela fait, nous pouvons lancer cela et exécuter NPM Run Dev pour démarrer notre projet. Cela ne prendra qu'une seconde à compiler, mais une fois que c'est fait, nous pouvons ouvrir localhost:3000 dans le navigateur, et nous devrions voir notre site Faust en action.

Une fois que cela s'est rendu, vous pouvez voir que Faust gère déjà un peu de magie pour nous. Si nous regardons ce menu en haut à droite, nous pouvons voir qu'il extrait déjà des pages et du contenu de nos menus que nous avons définis dans notre backend WordPress, et si nous revenons dans notre administrateur WordPress, nous pouvons regarder comment cette connexion fonctionne un peu plus en détail.

Parce que le plugin Faust connaît l'adresse de notre URL frontale, il réécrit un grand nombre de liens, tels que ces liens de prévisualisation afin que lorsque vous les ouvrez dans le navigateur, ils s'ouvrent dans l'URL du site frontal, de sorte que vous obtenez un véritable aperçu en direct de ce à quoi votre contenu va ressembler sur le front-end.

Maintenant, approfondissons la structure de notre projet Faust JavaScript. Si vous avez l'habitude de travailler dans Next.js, vous avez probablement utilisé le répertoire de la page pour créer des composants de page qui implémentent vos routes. Vous pouvez toujours le faire dans Faust, mais il s'appuie sur ce concept en fournissant une route fourre-tout appelée le nœud WordPress qui vous permet de prendre n'importe quel URI géré par WordPress et de le résoudre en un contenu particulier.

Nous obtenons ensuite des données supplémentaires sur cet élément de contenu et les transmettons à nos composants afin que nous puissions résoudre ce contenu individuel en un modèle particulier dans le dossier des modèles WP. Ceci est très similaire au concept de hiérarchie de modèles et au thème WordPress traditionnel, ainsi qu'à de nombreuses conventions de dénomination. Match par exemple, frontpage.js est la page d'accueil de notre site Web, tandis que page.js est responsable du rendu des éléments du type de contenu de la page. Et single.js est là pour rendre les messages uniques.

Maintenant, commençons et rendons notre frontpage.js un peu plus dynamique. D'ACCORD . Donc, pour commencer, nous allons ouvrir notre fichier front page.js et nous donner un peu plus d'espace pour travailler. Donc, si nous regardons le contenu de ce fichier, nous pouvons voir qu'il y a trois pièces principales. Il y a le composant lui-même que nous rendons, une propriété de requête qui est attachée au composant, et qui est exécutée à chaque fois que nous rendons le composant, puis quelques variables que nous pouvons transmettre en bas.

Et comme vous pouvez le voir, il existe deux manières principales de l'utiliser. Soit en utilisant le hook use query à l'intérieur du composant, soit il peut être transmis en tant qu'accessoires dans le composant lui-même, et vous le verrez dans un exemple plus tard. Revenons donc au référentiel et commençons par l'étape 2.1 pour mettre à jour la requête pour notre frontpage.js. Nous allons donc copier cela, puis retourner dans l'IDE graphique et y jouer pendant une seconde. Donc, cette requête que nous avons dans notre presse-papiers devrait obtenir les 10 premiers messages et obtenir quelques données associées à chacun de ces messages.

Et donc si nous cliquons là-dedans et l'exécutons, nous voyons que tout fonctionne très bien. Et donc nous voudrons aller de l'avant et ajouter cela à notre propriété de requête de composant. Nous allons donc trouver un bon endroit pour le faire et simplement le coller là-dedans, et faire un peu de reformatage. Et donc, ce que cela fait, c'est ajouter cette partie individuelle de la requête à cette requête elle-même. Nous devons donc toujours rendre les résultats de cette requête disponibles pour le reste de notre composant, nous allons donc continuer et ajouter cette ligne supplémentaire qui extrait simplement ce résultat de publication dans une variable avec laquelle nous pouvons travailler.

Maintenant, la prochaine étape pour rendre cette page d'accueil dynamique consiste en fait à créer un composant pour rendre ces extraits de publication. Nous allons donc le faire et créer quelques fichiers dans le dossier des composants, et je mentionnerai ici que - je vais continuer et créer un postexcerpt.js à l'intérieur d'un dossier d'extrait de poste, et je ' Je ne fais que dupliquer la structure des composants existants qui font partie de ce projet de démarrage Faust.js. Vous êtes vraiment libre de faire ce que vous voulez ici, et je ne fais que suivre le cadre tel qu'il m'a déjà été présenté dans le cadre de ce guide de démarrage.

Donc, une fois que nous aurons ces trois fichiers, nous commencerons à leur ajouter des éléments pour rendre ces messages. Donc, la première chose que nous ferons est de mettre du contenu dans notre composant post extrait. Et donc nous allons simplement copier et coller cela depuis notre référentiel, et nous pouvons voir que nous importons ce fichier module.css. Et nous avons une fonction appelée post extrait qui est notre composant qui goûte un accessoire qui est le message, puis nous rendons une section, ayant un lien qui va directement à cet URI de message, rendant le titre. Ensuite, là-bas, nous avons des tuiles de catégorie que nous affichons également, puis utilisons dangereusement définies dans notre code HTML pour définir le contenu HTML de l'extrait de publication.

Maintenant, une fois que tout cela est génial et enregistré, nous allons l'enregistrer, mais nous allons également venir ici et ajouter ce style de portée supplémentaire à notre composant pour styliser ces balises d'étendue pour nos catégories, puis nous allons juste effectuez une exportation d'importation à l'intérieur du fichier index.js pour passer d'une exportation par défaut à une exportation nommée, et nous enregistrerons toutes ces choses. Et puis la dernière étape pour rendre cela disponible pour une utilisation dans d'autres choses est d'ajouter une ligne d'exportation supplémentaire au fichier index.js de notre dossier de composants. Et maintenant que nous avons fait cela, si nous revenons à la page d'accueil, frontpage.js, nous devrions pouvoir simplement ajouter une importation supplémentaire à notre déclaration d'importation existante pour utiliser notre extrait de publication.

Maintenant, nous allons vouloir trouver un endroit pour implémenter cela, et si nous descendons et regardons à l'intérieur de notre élément principal, voyons que nous avons des choses juste en dessous du héros - ce que nous ferons, c'est que nous allons juste copiez et collez une partie du code dans le référentiel et écrasez ce qui se trouve à l'intérieur de ce principal avec l'utilisation de notre extrait de publication. Et nous ferons juste un peu de reformatage pour lisser certaines choses, mais vous pouvez voir là que ce que nous faisons est à l'intérieur de ce conteneur, nous allons cartographier à travers le tableau de messages que nous avons récupérés en tant que résultat de notre requête, puis renvoyons un composant d'extrait de message où nous passons dans le message et lui donnons une clé.

Et puis si nous allons de l'avant et sauvegardons tout cela et le rendons dans le navigateur et actualisons, nous devrions voir que nous avons une excellente page d'accueil dynamique. Oui, chacun de ces titres a un lien cliquable, tout comme les tuiles de catégorie individuelles. Et si nous cliquons dessus, nous pouvons voir que grâce aux modèles qui existent déjà dans Faust, tous nos éléments de publication sont déjà rendus, bien qu'il nous manque certains de ces groupes de ressources que nous avons créés à l'aide d'ACF. Donc, si nous cliquons sur un deuxième message, nous pouvons voir que celui-ci s'affiche bien ainsi que tous les liens de catégorie prédéfinis qui le sont - nous utilisons simplement ces URI de catégorie pour nous pencher sur Faust dans le rendu de ce modèle JS de catégorie .

Ok, maintenant que nous avons une page d'accueil dynamique, passons à l'affichage de ces champs ACF sur notre modèle single.js. Alors allez-y et nettoyez simplement notre éditeur de code, puis nous pourrons ouvrir le fichier single.js et jeter un œil à ce qu'il contient. Nous savons qu'à ce niveau supérieur, nous avons cette fonction de composant que nous exportons qui prend en fait des accessoires, et la propriété component.query qui a une requête GraphQL dynamique qui lit certaines de ces variables que nous récupérons de la requête de départ.

Et ce que nous voudrons finalement faire, c'est afficher certaines de ces différentes ressources de publication au bas de notre contenu de publication. Je retourne donc dans le référentiel et fais défiler jusqu'à l'étape 3.1, où nous mettons à jour la requête de publication unique, et nous y jetterons un coup d'œil, car elle commence à extraire à la fois la douce mixtape et les groupes de champs de ressources alimentaires que nous avons créés dans l'étape précédente. Si je prends cette requête et que je la copie et la colle dans le graphique, je vais continuer et coder en dur un ID de base de données pour un message, et supprimer quelques-unes de ces différentes choses dont nous n'avons pas besoin comme As Preview et cet autre fragment .

Si je continue et que je lance cela, nous verrons que je récupère des données qui contiennent vraiment ce à quoi je m'attendais. Le contenu, je récupère l'auteur, et je récupère, surtout, ces deux groupes de terrain et leurs données. Je vais donc continuer et copier cette requête et retourner dans single.js. À partir de là, je vais vraiment remplacer cette partie de la requête par ce que j'ai dans mon presse-papiers. Nous pouvons simplement aller de l'avant et sauver cela. Vous pouvez le reformater si vous le souhaitez, mais c'est indépendant des espaces blancs, donc je pense que pour la plupart, cela semble très bien.

Donc, à partir de là, nous voudrons faire la même chose que nous avons fait à la dernière étape, où nous avons intégré cela à notre requête. Maintenant, nous voulons nous assurer que nous rendons ces variables disponibles à l'intérieur de notre composant. Nous allons donc les ajouter à cette déclaration de structuration, puis, puisque nous avons deux catégories différentes pour nos publications, nous voulons créer des éléments booléens pour nous aider à déterminer si nous devons ou non afficher des ressources alimentaires ou une mixtape sucrée. Parce que comme vous pouvez le voir là-bas, peu importe ce que nous récupérons tous les deux, et s'il n'y a rien à trouver pour les champs de mixtape doux, ceux-ci reviennent comme nuls. Je vais donc vouloir faire une vérification conditionnelle là-bas, donc j'ajouterai ces deux lignes de code à notre fichier.

Et ce que cela fait essentiellement, c'est qu'il nous crée des variables booléennes que nous pouvons utiliser ci-dessous pour restituer conditionnellement des modèles. Dans ce cas, nous examinons les nœuds de chaque catégorie, puis nous les filtrons essentiellement pour déterminer s'ils contiennent ou non de la nourriture ou de la musique, puis nous vérifions la longueur. Il existe probablement de nombreuses façons d'implémenter ce type de variable booléenne, alors n'hésitez pas à changer cela si vous avez une manière plus propre de le faire, mais pour nos besoins ici, je pense que cela fonctionnera très bien.

Maintenant, la prochaine étape consiste à vouloir, comme à l'étape précédente, créer des composants supplémentaires. Je vais donc aller de l'avant et à l'intérieur de mon fichier de composants, créer un composant de ressources alimentaires. Je vais donc créer un dossier, puis un fichier food resources.js à l'intérieur de celui-ci, et parallèlement, je vais créer un fichier index.js ainsi qu'un fichier de modules CSS. Et maintenant, ce fichier de modules SCSS est vraiment utile car il nous permet d'étendre nos styles à ce composant particulier. Cela ressemble donc à une syntaxe géniale pour le faire, mais au final, c'est un résultat vraiment propre car nous n'avons pas à écrire un tas de classes et d'autres choses.

Je vais donc commencer à copier et coller le code du composant depuis le référentiel directement dans ces fichiers. Nous pouvons voir que nous avons une fonction de ressources alimentaires qui prend deux noms de recette d'accessoires et un lien de recette, puis nous les rendons en dessous de notre âge avec l'emoji burrito. Nous allons également copier et coller certains styles de fichiers SCC dans ce dossier particulier, puis nous nous assurerons de les exporter à partir des dossiers de composants index.js. Et tout comme dans l'exemple précédent, nous voudrons continuer et exporter ceci dans le index.js de notre dossier de composants afin que nous puissions avoir un très bon groupe à importer, comme vous l'avez vu directement à partir de ces composants dossier ailleurs dans certains de ces différents fichiers.

Donc, une fois que nous aurons ajouté cela, nous tournerons notre attention vers le composant des ressources musicales, et nous ferons la même chose. Nous allons continuer et créer la même structure de fichiers. Donc, un dossier de ressources musicales et un fichier musicresources.js à l'intérieur. Ensuite, nous continuerons et créerons un fichier index.js pour l'exporter, puis également notre fichier musicresources.module.scss pour ces styles de portée.

Donc, une fois que nous aurons tout cela, nous ferons la même chose que nous avons fait pour nos ressources alimentaires et nous nous contenterons de copier et coller une partie de ce code depuis le référentiel. Nous pouvons voir que ce composant semble presque identique. Nous avons des ressources musicales. Cela a en fait trois accessoires au lieu de deux, mais nous avions trois champs sur ce groupe de champs, mais la convention styles.component est la même. Et nous faisons juste un rendu légèrement différent parce que nous avons un contenu différent.

Donc, à partir de là, nous ajouterons également notre code SCSS et nous assurerons de l'exporter à partir des dossiers de composants index.js, puis de l'importer également dans notre dossier ici, et je pense que j'ai fait - renommons très rapidement ceci et assurez-vous simplement que toutes nos dénominations sont correctes, afin que notre index.js et nos composants trouvent nos ressources musicales et tout cela est génial. Alors maintenant, nous allons continuer et fermer tous ces onglets superflus car nous sommes prêts à implémenter ces composants dans notre fichier single.js.

Donc, pour ce faire, nous allons simplement ajouter ces deux composants à notre déclaration d'importation existante, qui les reconnaît déjà automatiquement, et nous trouverons un bon endroit pour le faire. Et nous avons donc ce composant wrapper de contenu ici. Et donc en ce moment, nous transmettons le contenu, mais cela acceptera également éventuellement les enfants. Nous pouvons donc transmettre le contenu, mais également transmettre certains composants enfants directement à ce wrapper de contenu, afin qu'il soit affiché dans ce bel espace horizontal que nous avons déjà et que tout soit aligné.

C'est donc ce que nous allons faire, puis nous allons en quelque sorte copier et coller ce code là-dedans, le reformater et parler de ce qui se passe dans cet exemple particulier. Donc, juste à l'intérieur de ce composant wrapper de contenu, nous utilisons ces variables booléennes is food et is music pour restituer conditionnellement, cependant, les composants de ressources correspondants. Donc, si la nourriture est vraie et que ce message est dans la catégorie de la nourriture, nous le rendrons. Et si c'est de la musique, on fera la même chose. Et là, vous pouvez voir que nous passons dans tous les différents accessoires nécessaires pour rendre cela.

Et si nous revenons et actualisons l'une de nos pages de modèles single.js, nous pouvons voir que nos ressources alimentaires s'affichent exactement comme nous l'attendons, et ce lien fonctionnera correctement si nous revenons dans WP Admin ou notre maison page. Et si nous en trouvons un et la catégorie alimentaire ou la musique, nous pouvons ouvrir Kinfolk Synth DIY et voir à quoi ressemble notre composant de ressources musicales, et tout cela a fière allure. Et si nous en trouvons un qui est réellement dans les deux catégories, nous pouvons voir qu'en fait, en bas, il rend ces deux composants exactement comme nous l'attendons.

D'ACCORD. Alors maintenant que nous avons notre site comme nous le voulons, passons à la façon de déployer ce site. Maintenant, j'ai une section du référentiel GitHub créée pour nous, et en fait, j'ai créé une branche déployée entièrement séparée dans la branche finish. Donc, l'exécution de Git check out est terminée, nous vous fournirons cela. Et vous pouvez également simplement déployer cette branche directement sur Atlas, qui est la solution d'hébergement WordPress sans tête de WP Engine.

Cela vous donne à la fois une installation WordPress et un conteneur Node.js, et vous pouvez vous inscrire pour un compte sandbox gratuit en cliquant simplement sur ce bouton sur la page de destination Atlas. Emmenez-vous sur un forum très rapide, et comme vous pouvez le voir, le prix est nul. Vous devrez peut-être toujours mettre une carte de crédit que nous utilisons uniquement à des fins de prévention de la fraude, mais vous pouvez avoir un compte gratuit pour jouer avec tout cela pour le tester, pour apprendre sans tête à votre guise. Je vais donc ouvrir le tableau de bord WP Engine pour commencer à déployer ce site sur Atlas.

La première chose que je vais faire est d'ouvrir ma liste de sites, et je vais ouvrir mon site WordPress de production. Donc, en fait, ce site sans tête ACF que vous voyez ici, où je vais ouvrir WP Admin dans une nouvelle fenêtre, est le site parent du fichier zip que vous utilisez tous localement. J'en ai donc fait un zip en utilisant l'exportation WP, et c'est en fait ce que je vais utiliser pour mon déploiement en production.

À partir de là, je clique sur l'onglet Atlas, puis sur Créer une application. Et je suis présenté avec cette option. Je vais choisir Extraire du référentiel, puis cliquer sur Continuer. Et si je ne me suis pas authentifié auprès de GitHub, c'est là que vous le feriez, mais comme je le suis déjà, je peux simplement continuer et sélectionner mon référentiel. Nous allons donc continuer et sélectionner le référentiel que nous utilisons pour ce projet, cliquer sur Continuer, puis je vais déployer mon application dans US Central.

À partir de là, cela me permet de choisir une branche, et comme je l'ai dit, je vais utiliser Finished. Il y a aussi des options si vous utilisez un monorepo, ce que nous ne faisons pas, et je vais laisser coché J'ai mon installation WordPress et Rechercher mon site sans tête ACF. Maintenant, ici, je vais vouloir, en fait, au lieu d'utiliser un fichier .env, je vais vouloir copier plus de deux variables d'environnement à partir de mon projet de fichiers.

Donc, le premier est la prochaine URL WordPress publique. Ce sont les mêmes variables d'environnement que nous avons définies dans notre projet local, et je vais y copier le lien vers mon installation WordPress de production. Ensuite, j'ajouterai une autre variable d'environnement, et celle-ci sera pour notre clé secrète Faust. Je vais donc continuer et copier cela à partir du menu Paramètres de Faust, et l'insérer là-dedans et définir la clé pour cela sur Faust Secret Key.

Et une fois cela fait, je peux continuer et cliquer sur Créer une application, et Atlas commencera le processus de création et de déploiement de mon application. Pendant le processus de construction d'Atlas, il exécutera l'installation de NPM et votre commande de construction NPM pour le framework que vous utilisez. Et puis une fois que tout ce code a été construit, il déploiera ce conteneur Node pour vous sur notre réseau. Et donc une fois que tout cela tourne pendant une seconde, nous devrions recevoir un message de réussite, puis nous pouvons cliquer sur l'URL qui nous est fournie et regarder notre site en direct.

Nous recevrons donc notre message de réussite, puis nous pourrons ouvrir cette URL dans un autre onglet. Et là, nous pouvons voir que notre site ressemble exactement à ce qu'il était localement, et il extrait toutes les données correctes, toutes les images correctes, et même aspire tout notre contenu ACF. Un certain nombre de nos publications sont vraiment superbes et nous sommes très performants sur Atlas. J'utilise en fait de très grandes images ici, donc si vous voyez une certaine lenteur, c'est certainement dû à mes choix.

La plate-forme Atlas regorge de fonctionnalités que les développeurs JavaScript modernes apprécieront. Malheureusement, il n'y a pas assez de temps dans cette présentation pour les parcourir tous en détail.

Mais Atlas fait un très bon travail en rassemblant des détails importants des parties frontale et dorsale de votre écosystème sans tête dans un tableau de bord pratique, où vous pouvez consulter les journaux de construction individuels et la sortie de construction, examiner les déploiements, les variables d'environnement que vous avez utilisées pour une version particulière, ainsi que l'accès à des paramètres ou fonctionnalités supplémentaires que vous pouvez activer, tels que des environnements de prévisualisation, où vous pouvez créer un environnement supplémentaire pour chaque PR créé sur votre référentiel GitHub, ou créer des webhooks d'environnement pour reconstruire des parties particulières de votre application ou CDN lorsque vous apportez des modifications à WordPress.

Toutes ces choses deviennent possibles avec la plate-forme Atlas, et cela réduit vraiment la barrière pour commencer à construire avec WordPress sans tête.

Ouah. Félicitations, comme je l'ai dit, c'était beaucoup à couvrir en 25 minutes. N'hésitez pas à continuer à vous entraîner après la présentation et à me contacter si vous avez des questions sur la mise en route des ressources de démonstration. Si vous souhaitez en savoir plus sur le headless mais que vous avez besoin d'un espace pour le faire, créez un compte Atlas Sandbox gratuit. En plus de déployer vos propres référentiels de code, comme nous l'avons fait aujourd'hui, vous pouvez également commencer avec certains de nos plans prédéfinis, qui sont des piles de projets en un clic qui peuvent vous aider à voir à quoi ressemble un projet sans tête lorsqu'il est terminé.

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.