DE{CODE} : nouvelles fonctionnalités pour Atlas

Les mises à jour des outils de développement sans tête Atlas de WP Engine vous aideront à répondre aux exigences les plus strictes de vos clients. En utilisant un compte Sandbox gratuit, cette démo vous montrera comment ajouter ces nouvelles fonctionnalités à votre site sans tête. Regardez la vidéo ci-dessous pour commencer à créer votre site Web le plus performant et le plus sécurisé à ce jour !

Diapositives de la session

Transcription du texte intégral

KELLEN MACE : Salut. Je suis Kellen de l'équipe des relations avec les développeurs chez WP Engine. Dans cette conférence, nous allons explorer certaines des nouvelles fonctionnalités passionnantes de l'écosystème Atlas. Nous verrons comment, dans le portail utilisateur WP Engine, nous pouvons créer une nouvelle application Atlas et choisir ce plan de portefeuille. Ce faisant, nous pouvons obtenir un site WordPress sans tête à part entière en direct sur Internet en quelques minutes.

Ensuite, nous verrons comment nous pouvons cloner ce projet sur notre machine locale et nous préparer pour le développement local, afin de pouvoir personnaliser notre nouveau site. Ensuite, nous porterons notre attention sur Atlas Content Modeler et verrons comment nous pouvons l'utiliser pour créer un nouveau modèle de contenu personnalisé appelé Photos.

Et ce modèle de contenu Photos aura quelques-uns de ses propres champs personnalisés, dont un qui est un champ répétable, qui est une nouvelle fonctionnalité récemment arrivée dans Atlas Content Modeler. Enfin, nous verrons comment nous pouvons effectuer un développement personnalisé dans notre application JavaScript frontale et interroger ces données Photos personnalisées, puis les afficher sur la page.

Une fois que j'ai créé un compte WP Engine et que je me suis connecté à la page Atlas du portail utilisateur, je peux continuer et cliquer sur le bouton pour créer une nouvelle application. À partir de là, nous pouvons soit commencer par un plan, qui est un site prédéfini, soit tirer d'un référentiel existant. Commençons par un plan. Nous pouvons maintenant sélectionner le plan que nous souhaitons utiliser. Nous allons donc choisir le plan Portfolio, puis cliquer sur Continuer.

L'étape suivante consiste à connecter cette application à GitHub. Nous allons donc cliquer sur le bouton pour le faire, puis nous connecter à GitHub. Et après cela, nous verrons cet écran, indiquant que notre application a été autorisée. Ensuite, nous devons réellement cloner ce référentiel. Nous allons donc cliquer sur Cloner Blueprint, puis donner un nom à notre nouveau référentiel. Et cliquez sur le bouton pour créer un nouveau référentiel à l'aide de ce modèle de plan.

Vous pouvez donc voir ici que ce nouveau dépôt d'application a été créé sur mon compte GitHub. Nous devons maintenant lier ce référentiel à notre application Atlas. Donc, de retour dans le portail utilisateur, nous allons faire défiler jusqu'à la section Référentiel sélectionné. Si vous avez autorisé l'accès à tous vos repos, vous pouvez le voir sur la liste. Sinon, vous pouvez cliquer sur Gérer les référentiels.

Sur cette page, vous pourrez sélectionner les dépôts auxquels Atlas devrait pouvoir accéder. Nous allons donc sélectionner notre repo dans la liste. Cliquez sur Enregistrer, et maintenant, lorsque nous reviendrons au panneau de l'utilisateur, nous verrons le référentiel que nous avons ajouté apparaître dans la liste. Alors allez-y et sélectionnez-le. Pour une région pour notre application, nous nous en tiendrons à US Central. Et enfin, cliquez sur le bouton pour créer cette application Atlas.

Ici, nous verrons une notification indiquant que notre application est en cours de construction. Nous allons donc accorder cela juste une minute. Maintenant que notre application Atlas est terminée, nous pouvons continuer et cliquer sur ce lien URL Atlas pour voir notre nouvelle application Atlas fonctionner en direct sur Internet. Ainsi, sur la page d'accueil, nous verrons notre liste des derniers articles. Nous verrons nos témoignages.

Nous pouvons nous rendre sur la page du portefeuille et consulter une liste de nos projets de portefeuille ici. Je vais cliquer sur un projet individuel. Ensuite, nous allons consulter le blog. Alors rendez-vous sur la page du blog et consultez notre grille de publications ici. Et nous pouvons également cliquer pour voir une page de publication de blog individuelle. Et puis prêt, prêt, cliquez, pour revenir à notre page d'accueil.

Vous remarquerez donc peut-être que ces transitions de page sont vraiment rapides. Nous obtenons une coupure immédiate d'une page à l'autre. Et c'est l'un des avantages d'utiliser une architecture WordPress sans tête. Ensuite, voyons le site WordPress qui se trouve dans les coulisses et qui alimente cette expérience. Revenons donc au portail utilisateur de WP Engine, et à partir de là, nous pouvons cliquer sur ce lien vers l'environnement WordPress lié.

Ici, nous pouvons cliquer sur WP Admin pour être envoyé à l'administrateur WordPress de notre site. Voici donc notre back-end qui alimente cette expérience. Passons aux articles, et nous pouvons voir ici qu'il a été pré-rempli avec un certain nombre d'articles de blog factices. C'est donc de là que proviennent toutes ces données pour notre nouveau site. Jetons également un coup d'œil aux plugins. Ici, vous pouvez voir que plusieurs plugins ont été installés et activés pour permettre le développement WordPress sans tête.

Portons une attention particulière à Atlas Content Modeler. Donc, dans la barre latérale, nous cliquons sur Content Modeler. Vous pouvez voir ici que deux contenus personnalisés ont été créés pour nous, des projets et des témoignages. Et nous pouvons les voir ici dans la barre latérale. Nous avons donc des projets, une liste de ceux-ci, ainsi que des témoignages, et une liste de ceux-ci. C'est donc de là que proviennent les données sur les projets et les témoignages que nous avons vus sur le site frontal.

Nous avons donc fait de grands progrès. Nous avons vu comment, à partir du portail utilisateur, nous pouvons créer une nouvelle application Atlas. Et lorsque nous faisons cela, cela crée non seulement une application JavaScript frontale pour servir les pages de votre site, mais également le back-end WordPress qui alimente cette expérience et vous évite d'avoir à lier les deux. Il relie ces deux éléments afin que l'application frontale puisse obtenir ses données à partir du back-end WordPress.

À partir de là, nous avons pu jeter un coup d'œil à l'application frontale et la voir fonctionner en direct en ligne, ainsi que fouiller dans l'administrateur WordPress et voir certains des types de données ou modèles de données personnalisés, ainsi que certaines des données factices qui sont été créé pour nous. Ainsi, en très peu de temps, vous pouvez voir que nous avons une application WordPress sans tête entièrement fonctionnelle en cours d'exécution.

Et si, à ce stade, nous voulions apporter des modifications, cependant? Et si vous construisiez un véritable site de portfolio et que vous vous disiez que c'était vraiment cool. C'est une bonne longueur d'avance. Mais maintenant, je veux faire quelques changements. J'aimerais apporter quelques modifications au code pour peut-être échanger certaines couleurs ou ajouter des pages supplémentaires à mon site. Comment je fais ça? Comment se lancer dans le développement local ? Découvrons ensuite.

Pour commencer, nous allons copier le lien vers notre référentiel GitHub, puis continuer et exécuter git clone sur la ligne de commande pour cloner notre projet. À partir de là, nous pouvons CD dans ce répertoire de projet, puis exécuter l'installation de NPM pour installer les dépendances de notre projet. Une fois cela fait, nous allons continuer et ouvrir le projet dans un éditeur de code.

Ensuite, nous devons configurer certaines variables d'environnement. Vous verrez donc qu'un exemple de fichier a été créé pour nous ici. Et maintenant, nous devons juste nous assurer que cela a les bonnes valeurs. De retour dans le portail utilisateur, nous cliquons sur Gérer les variables, puis examinons les variables d'environnement utilisées par l'application de production. Allez-y et copiez et collez les deux dans notre application afin que notre application locale utilise les mêmes variables d'environnement que la production.

Et la dernière étape ici consiste à renommer ce fichier, en supprimant .sample à la fin de celui-ci pour qu'il entre en vigueur. Maintenant, l'application frontale avec laquelle nous travaillons ici est construite sur Faust.js. Et Faust, pour faire la magie de récupération de données qu'il fait, doit être capable d'exécuter ce qu'on appelle une requête d'introspection GraphQL.

Donc, c'est fondamentalement Faust demandant au back-end WordPress, hé, quelles données avez-vous disponibles dans le schéma GraphQL pour que je puisse les interroger ? Nous devrons donc activer l'introspection pour que cela fonctionne. Nous allons revenir à l'administrateur WordPress ici et accéder à GraphQL, puis aux paramètres dans la barre latérale.

Sur la page Paramètres, nous allons faire défiler jusqu'à l'endroit où nous voyons Activer l'introspection publique, puis continuer et cliquer sur cette case. Pendant que nous y sommes, je recommande également d'activer le mode de débogage graphique. Cela vous donnera des messages de débogage plus descriptifs qui s'afficheront. Une fois que nous avons fait cela, nous pouvons continuer et cliquer sur le bouton pour enregistrer nos modifications. Et maintenant, nous pouvons enfin ouvrir le terminal et exécuter NPM run generate. Et puis une fois que cela est fait, enfin, NPM lance dev pour que notre application soit opérationnelle localement.

Maintenant, je clique sur ce lien localhost 3 000, et nous pouvons voir que notre site fonctionne en effet localement ici. Nous avons donc dit que nous voulions ajouter du contenu à cela pour personnaliser notre site. Et maintenant que nous sommes mis en place pour le développement local, nous pouvons faire exactement cela. Alors disons que pour ce projet, nous voulons avoir non seulement des articles de blog et ensuite nos quelques éléments de contenu personnalisé que nous avons, comme les projets de portefeuille que nous avons vus et aussi ces témoignages.

Au-delà de ce contenu personnalisé, disons que nous voulons en ajouter encore plus. Au-delà de quelqu'un qui crée des articles de blog et crée des projets de portefeuille, disons que le client auquel le site est destiné est également un photographe et qu'il souhaite présenter les photos qu'il a prises. Comment pourrions-nous ajouter un type de contenu personnalisé ou un modèle de contenu personnalisé à notre site pour prendre en charge les données de cette photo, interroger pour cela, puis afficher les photos dans notre application frontale ? Faisons cela ensuite.

Je vais donc revenir à l'administrateur WordPress ici, et nous irons à Content Modeler. Donc, nous avons été à l'écran une fois auparavant. Nous avons jeté un coup d'œil sur les projets et les témoignages. Nous pouvons voir qu'il s'agit de modèles de contenu personnalisés qui ont été créés pour nous dans le cadre de ce plan directeur. Et je peux cliquer sur chacun d'eux et voir que chacun de ces modèles a son propre ensemble de champs individuels.

Ainsi, les projets, par exemple, auraient ces champs individuels. Et les projets et les témoignages sont tous deux reflétés ici dans la barre latérale. Et puis les champs pour chacun d'entre eux. Si je clique sur un projet, puis sur un projet existant ou sur Ajouter nouveau, dans les deux cas, nous verrons tous ces champs reflétés ici. Ainsi, nos créateurs de contenu verront tous les champs dont ils ont besoin pour saisir ces données. D'accord.

Pour notre contenu personnalisé, cependant, nous avons besoin d'un nouveau modèle. Je vais donc continuer et créer un nouveau modèle en cliquant sur ce bouton ici. Je vais donc appeler cette photo. Et pour un nom au pluriel, nous allons simplement mettre un S à la fin et l'appeler photos. Cet identifiant d'API généré automatiquement - ici, cet ID - je suis d'accord. La photo me va bien. Pour la visibilité de l'API, celle-ci, nous voulons nous assurer de cliquer sur public, car nous voulons pouvoir interroger ces données via GraphQL. Pour notre icône de modèle, peut-être quelque chose comme un appareil photo serait approprié pour les photos. Et maintenant, je clique sur Créer.

Donc, juste comme ça, notre modèle de contenu de photos a été créé. Donc, à ce stade, il est indiqué de choisir votre premier champ pour le modèle de contenu. Et à partir de cet enregistrement, ce sont les types de champs pris en charge par Atlas Content Modeler. Pour les photos que nous voulons présenter sur ce site, utilisons-en quelques-unes.

Disons que nous allons donner un titre à chacune de nos photos. Je vais donc dire Titre, puis l'appeler Titre de la photo en tant qu'identifiant API. Et c'est ainsi qu'il sera disponible dans le schéma GraphQL. C'est pour ça. Et nous dirons que nous voulons l'utiliser comme titre d'entrée. Et le texte sur une seule ligne convient. Alors allez-y et cliquez sur Créer.

Pour notre prochain champ, disons que nous voulons capturer cette image elle-même pour la photo. Je vais donc appuyer sur le plus. Et ici, nous allons créer un nouveau champ. Nous appellerons cela une image. Et pour le type, en fait, nous devrons sélectionner Média, car ce sera une photo. Je vais donc l'appeler image. Et puis ici, je vais continuer et définir cela comme l'image en vedette pour chaque article. Je vais donc cliquer dessus, et nous le rendrons également obligatoire. Nous savons donc toujours qu'il sera là. Et puis cliquez sur Créer.

Voilà. Voilà notre deuxième champ. Pour le troisième, donnons une description. Je vais donc appuyer sur le plus. Et pour celui-ci, ce sera un champ de texte enrichi. Nous dirons donc description et cela le fera pour ce champ. Et puis notre dernier que nous voulons est pour les sujets. Nous allons donc utiliser ce champ pour capturer ce qui est montré sur la photo. Donc, s'il s'agit d'une photo d'une chaîne de montagnes au coucher du soleil, par exemple, comme le sera l'une de nos photos, certains des sujets de la photo pourraient être des montagnes, des étoiles, le ciel, des choses comme ça. Juste une liste des choses qui sont présentes sur la photo.

Il y aurait différentes manières de stocker ces données. Vous pouvez créer une taxonomie personnalisée, par exemple, puis attribuer des termes à chacun de ces éléments. Ainsi, chacune de ces photos pourrait avoir un ou plusieurs termes. Ce serait une façon de procéder. Disons que pour nos besoins, cependant, nous ne sommes pas intéressés à pouvoir regrouper des photos en fonction de quelque chose comme une balise comme celle-ci ou une taxonomie.

Au lieu de cela, cette liste est vraiment juste à des fins d'affichage sur le site. Le problème est que si nous appuyons sur le plus ici, nous en faisons un champ de texte, eh bien, nous n'en obtenons qu'un, n'est-ce pas ? Et s'il y en a d'autres ? Nous ne savons pas à l'avance combien de ces sujets une photo donnée pourrait avoir, n'est-ce pas ? Et c'est là que la fonction de champs répétables d'ACM est vraiment pratique. Voyons donc à quoi cela ressemble.

Je vais en faire un champ de texte ici, et nous l'appellerons sujets. Et puis rendez ce champ répétable. C'est donc la clé. Nous allons continuer et cliquer dessus. Et nous allons le garder comme un champ de texte sur une seule ligne, et cliquer sur Créer. Donc, juste comme ça, notre modèle de contenu photo ici a maintenant été créé. Et nous pouvons le voir dans la barre latérale.

Donc, si je clique ici sur Photos, nous verrons que j'ai un mannequin que j'ai créé à l'avance ici. Mais si nous créons Ajouter nouveau, vous verrez que cela reflète– les champs ici reflètent ce que nous avions ajouté dans le modèle de contenu. Nous obtenons donc un titre. Nous avons la possibilité de joindre une image. Nous avons un champ de texte riche pour la description de la photo, et un champ répétable ici pour ajouter un ou plusieurs sujets.

Voyons donc ce que nous pouvons faire ici. Je clique sur Ajouter une image en vedette. Et je vais en choisir un sur ma machine. Voyons. Et une fois le téléchargement terminé, nous lui donnerons un texte alternatif. On va dire, une fleur blanche, comme ça, et c'est fait. Voilà donc notre image. Revenons en arrière et donnons-lui un titre, maintenant, cependant. On va dire fleur blanche avec bokeh. Juste comme ça. Pour une description, on va dire voici un superbe cliché de quelques jolies fleurs blanches. Juste comme ça.

Et maintenant pour nos sujets, on peut se demander, qu'est-ce qui est présent sur la photo ici ? Et peut-être que nous pouvons - la fleur pourrait en être une. Cliquez sur Ajouter un élément. Et cet effet bokeh, avec l'arrière-plan flou, est également là. Et la tige ou la branche de l'arbre, je suppose, serait dans la photo, pour un autre exemple. Nous allons donc en ajouter quelques-uns ici. Et si nous pensons avoir tout capturé, vous pouvez continuer et cliquer sur Publier. Alors on y va.

Et puis de retour en photos, j'avais précédemment créé celle-ci. Les montagnes sont cool. Il devrait être réglé comme ça. Ainsi, vous obtenez une photo de chaîne de montagnes. Et puis voici un superbe cliché d'une chaîne de montagnes avec des montagnes, des étoiles, des ombres. Quelques sujets qu'il a. Cela nous donnerait donc au moins quelques articles avec lesquels travailler dans notre application frontale.

Donc, à ce stade, nous avons créé notre modèle de contenu dans le back-end WordPress pour stocker les données dont nous avons besoin pour ces photos, et nous avons créé deux nouvelles publications photo que nous pouvons utiliser pour essayer de consommer sur notre application frontale. Et ensuite, vous vous demandez peut-être comment allons-nous extraire ces données de WordPress pour pouvoir les utiliser dans notre application frontale ?

Il y a une fonctionnalité très intéressante qu'Atlas Content Modeler présente pour rendre cela très facile. Je vais donc revenir à Content Modeler ici et trouver notre modèle de photos, puis cliquer sur l'icône du petit point de suspension ici. Et je vais aller à Ouvrir dans Graphical. Donc, dès que je clique dessus, il compose une requête pour moi qui inclut ce modèle de contenu que nous avons créé, des photos.

Et il saisit les 10 premiers d'entre eux, puis il inclut ce fragment GraphQL ci-dessous qui contient tous les champs que nous avions créés, y compris les champs personnalisés. Donc, si vous avez remarqué, nous avons ajouté le titre de la photo, nous avons eu notre image, nous avons eu la description, puis les sujets. C'est donc très pratique pour voir à quoi ressemblent ces données dans le schéma GraphQL. Alors allez-y et appuyez sur ce bouton pour exécuter cette requête.

Et vous pouvez voir ce que notre application JavaScript frontale obtiendrait si elle exécutait exactement la même requête GraphQL. Cela permettrait de récupérer des photos. Et puis à l'intérieur de cela se trouverait un objet appelé tableau, appelé nœuds. Et à l'intérieur de ce tableau se trouveraient des objets qui ressemblent à ceci. Chacune de ces photos aurait un titre, une image, puis plus bas, la description et les sujets également.

C'est donc exactement ce dont nous avons besoin. Nous allons donc utiliser plusieurs de ces champs maintenant. Nous sommes donc prêts à partir, en termes de notre back-end WordPress et de la possibilité de stocker et également d'exposer ces données de photos. Voyons maintenant comment nous pouvons l'utiliser dans notre application JavaScript frontale.

Nous y retournerons donc. Et je pense qu'un bon point de départ pour cela serait de regarder la page Portfolio, qui est une liste de projets, n'est-ce pas ? Puisqu'il s'agit d'une liste de publications de modèles de contenu personnalisés, et que les photos le seront également, ces deux pages ont beaucoup en commun. Nous pouvons donc utiliser cela comme une sorte de point de départ.

Je vais donc cliquer sur Portfolio ici, et juste pour nous rappeler à quoi cela ressemble. Et c'est comme ça, où nous obtenons cette liste de projets de portefeuille. Alors ouvrons le code maintenant et mettons un peu les mains dans le cambouis. Nous allons retrouver cette page, qui est ce projet slash, et voir comment cela est construit.

Donc, à l'intérieur de Source, j'irai dans Pages. Et puis je trouverai Project. Le voilà. Et ouvrez le fichier index.js à l'intérieur de celui-ci. Faites défiler un peu vers le bas et nous verrons que ce crochet de pagination de nœud d'utilisation est utilisé. Et c'est un hook React qui vient de cet endroit ici, à l'intérieur du dossier Hooks. Et à l'intérieur de cela, nous appelons query.projects.

Et query.projects va nous permettre d'accéder aux données sur le type de publication personnalisé de nos projets, c'est-à-dire le modèle de contenu de notre projet que nous avons créé. Nous allons donc appeler query.projects, puis transmettre certains champs que nous voulons traiter à l'avance, afin qu'ils le soient dès que la page se charge. Voilà donc ce que ce tableau est ici. Ces champs sont donc là au tout premier chargement de la page.

Et puis une fois que nous sommes réellement prêts à afficher le contenu de cette page, nous le faisons. Nous avons un composant SEO, un en-tête, puis un pied de page en bas. Et puis la section principale de la page ici est à l'intérieur de cette balise principale, où nous avons l'en-tête, qui est la section bleue en cours d'insertion. Et puis une div wrapper avec notre liste de projets à l'intérieur. Et puis aussi ce composant Charger plus, qui se traduit par ce bouton Charger plus en bas, sur lequel je peux cliquer. Et puis cela récupère plus de projets et les fait apparaître dans l'interface utilisateur.

C'est ainsi que cette page est construite. Et comme je l'ai dit, j'aime utiliser cela comme point de départ pour nous. Alors allons-y et copions ce fichier entier, et nous allons imiter cette structure de fichier ici. Donc, à l'intérieur de Pages, nous allons créer Photo. Et puis à l'intérieur de ce dossier, nous allons créer un fichier index.js. D'accord. Et dans ce nouveau fichier, je vais coller le contenu. Mais nous allons changer certaines choses, puisque nous ne sommes pas intéressés par les données de projets pour cela, nous voulons nos données de photos. Voyons donc comment nous pouvons faire cela.

Ainsi, le nom de cette constante fait référence à des projets. Alors allons-y et renommons cela dans un premier temps. On peut dire des champs de pré-passage des nœuds photo. Alors ce sera bien. Nous devrons fournir notre propre liste de champs. Peut-être allons-nous simplement laisser l'ID de la base de données pour l'instant, puis nous en ajouterons dans un instant.

Plus bas, voyons. Prépasse photo. Oh, le nom s'est trompé. Nous y voilà. Alors maintenant, ils correspondent à nouveau. D'accord. Au lieu de query.projects, rappelez-vous que nous voulons query.photos pour notre type de contenu personnalisé. Alors allez-y et mettez à jour cela pour qu'il s'agisse de photos, juste là. Descendez un peu.

Donc ce volet projets, ça ne s'appliquera plus, puisqu'on ne s'en sert pas. Je vais donc supprimer cela à ce stade et qu'en est-il de cela? Nous aurons juste - nous aurons juste H1. Il dit Bonjour, juste pour obtenir quelque chose de rendu sur la page ici. Et peut-être que nous en commenterons plus.

Je vais donc lancer une recherche de projet pour voir s'il y a quelque chose que j'ai oublié. Oui, juste quelques commentaires de code, puis ce composant ici qui est inséré et que nous n'utilisons plus. Je vais donc supprimer ce composant. Et je pense que nous devrions être bons. Nous n'utilisons donc pas quelques-unes de ces choses à ce stade, mais ce n'est pas grave. Nous le ferons momentanément.

Je vais donc lui donner une sauvegarde, et nous verrons si nous pouvons obtenir ce rendu. Alors maintenant, sur notre application frontale, je devrais pouvoir accéder à Photo, comme ceci. Et voilà. Voici donc notre nouvelle page. Il dit bonjour, et une grande partie ressemble à notre page de projets de portefeuille, comme l'en-tête en haut et le pied de page.

Je remarque qu'il est toujours question de portefeuille, et nous voulons probablement l'échanger. Nous pouvons donc le faire très brièvement. Voici donc le portefeuille. Nous dirons des photos. Et puis aussi à cet endroit, nous changerons cela en photos. Sauvegarde le. Nous y voilà. Donc, cela a mis à jour l'en-tête.

Voyons maintenant comment nous pouvons réellement utiliser ces données, récupérer nos données de photos et afficher une liste ici. Alors, par où commencer ? Comme nous l'avons vu dans GraphQL - ou dans l'administrateur WordPress ici, voici à quoi ressemblera notre requête. Il va avoir ces champs. Alors faisons ça. Le titre de la photo est donc le champ personnalisé. Mais en fait, puisque nous avons défini ce champ comme titre du message, nous pourrions simplement utiliser le titre, car cela va être– le titre du message va être le même que le champ personnalisé avec ce nom. Nous pourrions donc simplement utiliser cela.

Ainsi, dans ce tableau, nous ne ferons pas que l'ID de la base de données, mais nous obtiendrons le titre de nos photos, images, descriptions et sujets. Alors ajoutons-les aussi. Image, description, puis sujet. D'accord. Vous aurez besoin de virgules à la fin. Nous y voilà. Je pense donc que ce sont tous nos champs que nous voulons avoir disponibles dès la fin de la page. Donc ça m'a l'air bien.

Et testons si nous pouvons réellement obtenir un rendu de données ici. Alors sous notre Hello H1 que nous avons, faisons ceci. Nous ferons JSON.stringify, puis nous passerons à ce quelque chose. Nous allons donc créer des données ici et voir si nous pouvons obtenir le rendu des données sur notre page.

Donc je vais garder ça, et nous reviendrons à notre front-end. Et ça y est, bien sûr. Voilà donc à quoi ressemblent les données. Vous pouvez voir que nous le récupérons avec succès depuis notre back-end WordPress. Nous avons ce tableau de nœuds, puis à l'intérieur de ces objets représentant chacune de nos photos individuelles et exactement les données que nous avions demandées, y compris chacune des valeurs individuelles pour notre champ de sujets répétables ici.

Alors c'est super. C'est exactement ce dont nous avons besoin. Rendons les choses un peu plus propres - eh bien, beaucoup plus propres, je suppose, que de simplement cracher des données sur la page comme celle-ci. Au lieu de simplement cette pré-balise ici, cartographions chacune de nos données et rendons une carte sur la page pour cela.

Donc, une chose que j'aime faire, c'est avant de supposer que nous avons des messages à rendre, nous devons tenir compte du cas où il n'y en a peut-être pas, n'est-ce pas ? Donc une chose que j'aime faire c'est en haut de mes composants, j'ai toujours des photos, quelque chose comme ça. Et puis je fais data.nodes.length comme ça. Et nous ferons un point d'interrogation pour le chaînage facultatif, car nous ne savons pas encore si les données existeront.

Et puis nous convertirons ceci en un booléen comme celui-là. Cela signifie donc que si nous échouons à ce stade et que les données ne sont pas définies, cela sera converti en faux. Nous dirons que nous n'avons pas de photos à rendre. Sinon, si nous sommes capables d'explorer jusqu'à la longueur de ce tableau, ce sera soit zéro, s'il n'y a pas de messages, soit un ou plusieurs. Donc, si nous transformons cet entier en booléen, il nous dira si nous avons ou non des photos. Donc si c'est zéro, ce sera faux. Si c'est un ou plusieurs, havePhotos serait vrai.

Donc, avec cette connaissance, nous pouvons alors prendre des décisions à l'intérieur de notre composant ici. Voyons donc comment nous pouvons faire cela. Donc je dirai, si nous avons des photos, alors nous voulons rendre une chose. Nous dirons - voyons. Nous voulons faire des data.photos et ensuite nous les cartographierons. Donc pour chaque photo, nous rendrons quelque chose.

Alors retournons simplement quelque chose de facile au début. Nous allons retourner le– voyons voir. Nous allons faire un H2, que diriez-vous, puisque cela va être comme l'une de nos cartes. Et puis on dira photo.title comme ça. D'accord. Nous allons donc cartographier chacune de nos photos. Et pour chacun d'entre eux, nous renverrons un H2 avec le titre de cette photo. D'accord.

Donc, tout cela est ce que nous voulons si nous avons réellement des photos à rendre. Mais qu'en est-il de l'alternative, si nous ne le faisons pas ? Nous aurons donc notre clause else ici, et rendons quelque chose d'autre. Que diriez-vous du paragraphe. Et on va dire, pas de photos à afficher. Alors maintenant, si nous le sauvegardons, nous y voilà. Alors maintenant, nous obtenons le rendu de nos titres de publication ici.

Alors rendons cette fonctionnalité un peu plus complète ici. On va dire qu'on veut retourner autre chose. D'accord. Et pour chacun d'entre eux, je copierai seulement certains styles, certains styles en ligne que j'ai écrits à l'avance ici, juste pour nous faire gagner du temps. Donc, je vais avoir cette div wrapper. Et puis à l'intérieur de cela, nous pouvons restaurer notre H2 que nous avions. Je vais donc coller un H2 avec le titre.

Après le titre, que diriez-vous de montrer la description. Nous pouvons faire celui-là ensuite. Ce sera donc photo.description, comme ça. Mais nous ne pouvons pas simplement le rendre par lui-même, comme à l'intérieur d'un conteneur, par exemple, juste comme ça. Si nous essayons de faire cela, cela ne fonctionnera pas tout à fait pour nous, car le HTML ne sera pas échappé. Donc, si j'enregistre cela, vous pouvez voir maintenant que le code HTML échappé est affiché sur la page, ce qui n'est pas ce que nous voulons.

Donc, React a un utilitaire pour travailler avec HTML qui est sûr et n'a pas besoin d'être échappé comme ça. Et c'est d'utiliser div puis dangereusement SetInnerHTML comme ça. Et vous pouvez lui transmettre un objet dont une propriété est un double trait de soulignement HTML.

Et puis la valeur que vous lui transmettez est la chose que vous voulez rendre sans vous échapper. Donc pour nous, ce serait photo.description, juste comme ça. Et puis cette div peut être auto-habillée. D'accord. Alors maintenant, je vais donner une sauvegarde. Nous verrons ce que nous obtenons. Cool. Alors maintenant, notre code HTML n'est plus échappé. Donc ça m'a l'air bien.

Alors c'est super. Que diriez-vous de cette image en vedette? Ce que nous pourrions faire, c'est écrire cela à partir de zéro. Nous pourrions saisir l'URL de l'image en vedette et avoir une balise d'image et la transmettre en tant qu'URL. Et puis le navigateur rendrait une image et la dirigerait vers cette source.

Cependant, ce projet, si vous creusez dans cette base de code de plan directeur, a en fait un composant prédéfini exactement à cette fin appelé image en vedette. Donc, pour nous, ce serait parfait pour nous. Je vais donc remonter un peu jusqu'à l'endroit où nous importons un tas de composants différents à partir de notre répertoire de composants. Et je vais en marquer une à la fin ici appelée image vedette, juste comme ça. Alors maintenant, nous pouvons rendre notre image en vedette où nous le voulons.

Juste en dessous de l'endroit où se trouve cette div avec notre description de photo, nous rendrons notre image en vedette. Et cela nécessite un accessoire d'image. Et ce que nous devons transmettre ici, c'est le nœud entier pour cette image. Donc pour nous, ce serait photo.feauredimage.node, juste comme ça. Et je pense que cela devrait faire l'affaire pour notre image. Donc je vais le sauvegarder, et bien sûr, nous y voilà. Ainsi, une fois notre page rechargée ici, nous avons maintenant notre titre, notre description, puis la photo elle-même affichée. Et de même, pour notre prochaine photo également, cette image est affichée sur la liste.

Donc c'est cool. Nous faisons de grands progrès. La dernière chose était de prendre soin de notre champ répétable pour les sujets présents sur la photo. Donc, ce que je vais faire, c'est créer un paragraphe ici et le fermer. Et puis à l'intérieur de cette balise de paragraphe, nous pouvons ouvrir des boucles et faire nos mêmes photo.subjects. Mais maintenant, nous allons nous attaquer à la fin de la jointure. Et nous dirons [INAUDIBLE] que nous voulons le joindre par une virgule, un espace, juste comme ça. Et je vais donner une sauvegarde.

Lorsque notre rechargement à chaud se produit, je devrais pouvoir faire défiler vers le bas. Et bien sûr, nous y voilà. Ils sont donc affichés sur la liste. L'utilisateur peut ne pas savoir de quoi il s'agit. Alors peut-être que dans notre application, nous pouvons revenir en arrière et ajouter une étiquette quelconque, une petite chose précédente là-bas qui dit Sujets peut-être, comme ça. Sujets fleur, bokeh, branche. Et puis notre autre photo ici a des sujets montagne, étoiles, ombres, juste pour un exemple.

Nous allons donc faire une pause ici, mais vous pouvez voir à quelle vitesse j'ai pu créer cette page. Je suppose que nous devrions nous débarrasser de notre bonjour, le monde en haut là-bas. Nous n'avons pas vraiment besoin de ça. Ou mot bonjour. Je vais donc supprimer ça. Nous y sommes. Vous pouvez donc voir, comme je le disais, à quelle vitesse nous avons pu mettre cela en place.

Juste en basant notre code sur la page de liste de portfolio, nous avons pu créer notre page de liste de photos ici, puis cartographier chacune des photos individuelles et accéder aux champs personnalisés d'Atlas Content Modeler pour cela - le titre, la description, l'image, puis nos champs répétables pour le sujet ici. J'aimerais donc que vous vous sentiez habilité par cela sur vos propres projets.

Si vous souhaitez prendre l'un de nos plans comme cette énorme longueur d'avance qui peut réaliser une grande partie de votre projet pour vous, une grande partie du travail de fond est fait. Et à partir de là, vous pouvez faire quelque chose de similaire à ce que nous avons fait dans cette conférence. Vous pouvez le personnaliser davantage et ajouter vos propres personnalisations et autres modèles de contenu, etc.

Merci beaucoup d'avoir regardé. J'espère que cette conférence a été vraiment utile et vous a donné une bonne idée de toutes les fonctionnalités intéressantes qui sont sorties et continueront de sortir dans l'écosystème Atlas.

PRÉSENTATEUR : Et c'est la fin de DE{CODE} 2022. J'espère que vous l'avez trouvé inspirant et que vous repartez avec plus d'expertise WordPress et de nouvelles connexions communautaires. Recherchez le contenu enregistré sur le site à partir de vendredi pour rattraper tout ce que vous avez pu manquer ou revoir une vidéo.

Je tiens à dire un dernier merci à nos partenaires sponsors : Amsive Digital, Box UK, Candyspace, Drewl, Elementary Digital, Illustrate Digital, Kanopi Studios, Springbox, Studio Malt, StrategiQ, WebDevStudios et 10Up. Un grand merci pour votre don à notre collecte de fonds DE{CODE}. Nous apprécions vraiment votre générosité.

Maintenant, pour tous ceux qui ont interagi avec nous dans notre hub des participants et nos sessions, nous sélectionnerons les trois premiers gagnants et vous ferons savoir comment vous pouvez réclamer votre prix à la fin de DE{CODE}. Au plaisir de vous revoir lors de nos prochains événements, en personne ou virtuellement. Nous sommes impatients de vous en dire plus sur les dernières tendances de développement WordPress et sur la manière dont vous pouvez les mettre en œuvre pour créer des sites WordPress plus rapidement.

C'est tout de moi. Merci beaucoup de vous joindre à nous et prenez soin de vous.