7 choses que vous ne saviez pas pouvoir faire avec les champs personnalisés avancés

Les champs personnalisés avancés (ACF) sont presque synonymes de développement WordPress. Propulsant plus de 4,5 millions de sites, ce plugin a aidé WordPress à atteindre de nouveaux sommets. Vous connaissez le plugin. Vous avez probablement construit avec le plugin. Mais en profitez-vous pleinement ?

Au cours de cette session, nous examinerons rapidement certaines des manières les moins connues de tirer parti d'ACF pour créer vos expériences WordPress les plus dynamiques, puissantes et engageantes à ce jour.

Haut-parleurs:

• Iain Poulson, chef de produit senior chez WP Engine
• Rob Stinson, responsable marketing produit chez WP Engine

Diapositives de la session :

Transcription:

Iain Poulson : Bonjour et bienvenue dans notre session sur le plugin Advanced Custom Fields. Je suis Iain Poulson, chef de produit pour ACF chez WP Engine, et je suis ici rejoint par Rob Stinson, qui est notre responsable marketing produit. Aujourd'hui, nous allons vous présenter une session assez rapide de sept choses que vous ne saviez pas pouvoir faire avec le plug-in Advanced Custom Fields, certaines choses relativement nouvelles et d'autres moins connues. Et la fonctionnalité que nous allons centrer autour d'un site fictif que Rob a conçu, donc nous sommes essentiellement fans d'exemples réels plutôt que de choses abstraites, mais nous sommes aussi de grands fans de films.

Donc, ce site est une célébration de la meilleure période du cinéma, probablement, sans doute, les films des années 90, et donc le site est basé sur la reconnaissance et la récompense des films les plus populaires et les plus aimés des années 90. Le site doit présenter des films et permettre aux utilisateurs de voter pour leur favori, et dans le plus pur style Rob, le site a fière allure. Alors commençons, et commençons depuis le début, et installons ACF. Dis-moi comment, Rob.

ROB Stinson : Cool, merci, Iain. Ouais, merci mec. Ça a l'air plutôt bien, n'est-ce pas ? Il a fallu un bon moment pour le concevoir, je me suis amusé. Nous avons donc remporté le contrat. Nous avons le projet et nous lançons les choses, et la première chose que nous avons faite, c'est s'il a identifié, que cela a du sens d'abord, pour ACF. Nous allons devoir configurer tout un tas de champs personnalisés pour certains types de publication personnalisés, et faire des modèles intéressants et des choses comme ça. ACF est l'outil pour le travail ici. Alors bien sûr, nous devons d'abord installer ACF, et c'est le numéro un ici. Donc, généralement, nous savons que vous pouvez simplement saisir le plug-in sous forme de fichier zip et le télécharger dans l'administrateur WordPress, simplement et simplement.

C'est la manière standard d'installer un plug-in, mais nous savons aussi que les développeurs de nos jours aiment gérer leurs dépendances un peu différemment. J'aime généralement le gérer dans le code, et dans le monde PHP, cela se fait généralement avec Composer. Maintenant, vous pouvez installer assez facilement des plugins WordPress à partir du référentiel WordPress.org depuis un certain temps avec Composer, mais cela a été un peu plus difficile à faire avec des plugins premium comme ACF Pro.

Mais la version la plus récente il y a quelques semaines, en fait, il y a environ un mois, nous avons en fait activé la possibilité d'installer ACL Pro maintenant via Composer, ce qui est fantastique, nous allons donc le faire maintenant. Alors comment procéder est, étape numéro un, vous devez ajouter l'URL ACF Pro Composer Repo à votre fichier composer.JSON. La deuxième étape consiste à créer un fichier auth.JSON pour vos informations d'identification, et vous allez le placer à la racine de votre projet, à la fois localement et sur le chemin vers l'endroit où nous déployons et le les informations d'identification dont vous avez besoin pour ce fichier sont désormais disponibles dans votre espace de compte sur advancedcustomfields.com.

Donc, si vous vous connectez, vous verrez une zone de licences, et il y a quelques onglets supplémentaires et des trucs comme ça, vous pouvez en fait saisir tout le morceau de code, copier et coller le tout, ou vous pouvez saisir le nom d'utilisateur individuel et mot de passe et amenez-le dans le fichier que vous avez créé, le fichier auth.JSON.

Et la troisième étape, nous exécutons la commande Composer, donc c'est agréable et facile, un processus en 3 étapes, mais fantastique parce que cela signifie que, comme je l'ai dit, les développeurs qui aiment avoir un contrôle un peu plus précis sur la façon dont ils gèrent leurs dépendances de leur projet, vous pouvez maintenant le faire avec ACF Pro, ce qui est fantastique. Bien sûr, il y a plus de documentation à ce sujet, donc juste pour aller plus loin et juste pour voir comment tout se déballe, passez à la documentation sur le site Web, et vous devriez être prêt à partir. Cool, je vais vomir sur Iain pour le numéro deux.

Iain Poulson : Bon, parlons maintenant de la configuration des données pour le site. Donc, les types de publication personnalisés sont assez fondamentaux dans WordPress dans la façon dont vous créez un site qui ne se limite pas aux publications ou aux pages. C'est la fonctionnalité de type de publication personnalisée qui est venue dans n'importe quelle version de WordPress en fait un CMS approprié, et c'est généralement la première étape que les développeurs font lorsqu'ils construisent les sites. Et c'est toujours quelque chose qui s'est passé en dehors d'ACF. Historiquement, soit vous enregistrez un type de publication avec du code, soit vous utilisez un autre plugin pour le faire, mais c'est la partie du voyage qui se connecte assez bien avec ACF. Donc, dans le cadre d'ACF 6.1, cette fonctionnalité arrive dans le plugin, c'est donc le point de départ naturel du voyage.

Vous souhaitez créer un site avec des données de structure de données, vous allez créer un type de publication. Vous allez y ajouter des champs, puis vous pouvez ajouter des taxonomies, puis vous commencez à modifier ces données. Alors oui, c'est quelque chose que nous avons mis dans la version 6.1, et c'est assez excitant d'avoir ce flux complet de construction dans le CMS. Cherchons donc le site du prix VHS. Nous allons devoir structurer nos données et faire en sorte que WordPress fasse ce dont nous avons besoin, donc en termes de type de publication, parce que nous ne voulons pas utiliser de publications et de pages, nous allons créer une publication personnalisée. tapez pour le film, pour stocker les données du film, l'objet de données ou le modèle de données, mais évidemment en termes WordPress, c'est un type de publication personnalisé.

Nous voulons classer les films avec une taxonomie afin de permettre aux utilisateurs de voir facilement des films d'un type de genre, puis vous obtiendrez la visualisation frontale facile, les URL simples qui vous permettent d'accéder à des films de certains genres. Et nous allons avoir besoin de champs supplémentaires pour stocker des données structurées autour d'un film, nous voulons donc, par exemple, que le réalisateur soit un champ de texte. Nous aurons besoin de l'année de sortie du film sous forme de numéro, et nous aurons besoin d'une forme de relation pour relier les films les uns aux autres, et bien sûr, nous devons stocker le nombre de votes qu'il va obtenir, et c'est le champ numérique.

Voyons donc rapidement dans ACF 6.1 comment allons-nous faire cela. Voici donc l'écran ACF 6.1, et vous remarquerez une légère différence, nous avons le menu sur la barre latérale. C'est ACF maintenant, pas seulement des champs personnalisés, et c'est l'écran de type de publication. Donc, c'est juste moi qui configure le type de publication de film. C'est le flux de travail le plus simple ici, consistant simplement à ajouter une étiquette singulière pour le type de publication, qui est film, l'étiquette au pluriel, et il génère automatiquement la clé de type de publication. Le paramètre public est défini par défaut car je veux qu'il soit visible dans le front-end, le type de publication, et je veux pouvoir le modifier dans l'administrateur.

Donc, une fois que cela est enregistré et ajouté, la bonne chose à propos de la connexion ici avec ACF est le fait que la prochaine étape du voyage est que nous avons créé le type de publication, voulons-nous ajouter des champs au type de publication, ou voulons-nous lier des champs existants au type de publication, ou créer une taxonomie ? Nous pouvons donc tout faire à partir de ce point ici, donc et évidemment nous devons aller ajouter ces champs. OK, donc en cliquant sur cet avis pour ajouter de nouveaux champs au type de publication de film, nous obtenons l'éditeur de groupe de champs, et il est pré-rempli en bas dans les paramètres Metabox.

Ainsi, les règles de localisation sont déjà définies pour dire, affichez ces champs, lorsque vous modifiez le type de publication du film, puis vous pouvez continuer et ajouter vos champs, ce que j'ai déjà fait ici dans la capture d'écran. Nous avons donc le réalisateur, l'année, les votes et les films associés. Ensuite, bien sûr, nous pouvons enregistrer la taxonomie personnalisée dont nous avons parlé, en ajoutant le genre et en connectant la taxonomie de genre au type de post de films. Mais ce sont des champs que nous avons ajoutés qui sont attachés à l'objet vidéo, mais qu'en est-il des champs dont nous avons besoin pour stocker des données qui pourraient être plus globales ou à l'échelle du site ? Rob, qu'est-ce qu'on a pour ça ?

Rob Stinson : Cool, merci pour ça, Iain, ça a l'air bien. Notre modèle de contenu avance bien, mais nous n'avons pas encore terminé. Maintenant, nous avons déjà couvert l'installation d'ACF Pro via Composer, et nous venons d'examiner les types de publication personnalisés et les taxonomies personnalisées dans ACF. Maintenant, ces deux choses qui sont très, très fraîches, mais la troisième chose que je veux couvrir maintenant, c'est un ancien, mais un goodie. Et donc c'est dans le plugin depuis un certain nombre d'années maintenant, mais tout le monde ne le sait pas, et tout le monde n'en comprend pas pleinement la valeur, donc nous allons maintenant regarder les champs globaux avec la page d'options.

Maintenant, généralement, vous pensez à un champ personnalisé et à la manière dont il stocke les données d'une publication particulière, d'une page ou d'un type de publication personnalisé. Mais parfois, nous avons besoin de stocker des données associées à l'ensemble du site, et un excellent exemple sur notre merveilleux site de récompenses VHS est ce type de barre de notification ou de promotion. Et c'est une barre que nous voulons faire persister sur chaque page de la page d'accueil du site, vous allez sur une page de film, c'est là. Vous accédez à la page À propos, à une page de contact ou à une page de blog, cette petite barre se trouve sur l'ensemble du site, peu importe où l'utilisateur navigue, donc cela n'a pas de sens d'associer ces données pertinentes à un message ou un film.

C'est quelque chose qui devrait être associé au site. Nous voulons donc pouvoir activer et désactiver cette barre parce que nous voulons configurer les choses, mais peut-être voudrons-nous l'activer à certaines périodes de l'année. Nous pouvons avoir une promotion ou une campagne particulière, nous voulons donc avoir la possibilité d'avoir un champ booléen, afin que nous puissions activer et désactiver cette chose. De plus, nous voulons pouvoir mettre à jour le texte de l'action appelée elle-même, ou dans le bouton, donc bien sûr, les champs personnalisés ont beaucoup de sens pour cela.

Maintenant, pour configurer une page d'options, qui est la fonctionnalité dans ACF qui nous permet de le faire, l'étape numéro un est, généralement dans vos fonctions, le fichier .PHP, ou vous pouvez, bien sûr, l'enregistrer ailleurs, peut-être un plug-in que vous développez. Mais vous allez enregistrer la page d'options elle-même, et il y a quelques petites configurations dans les paramètres que vous pouvez faire. Vous pouvez avoir une seule page d'options, mais vous pouvez aussi en avoir plusieurs, et vous les avez en quelque sorte imbriquées, donc des pages enfants, ou des pages parents et des choses comme ça, donc vous pouvez faire des choses intéressantes.

Pour le nôtre, le nôtre est assez simple. Nous sommes juste en train de mettre en place une barre de notification ici, donc nous avons juste besoin d'une seule page, donc la première étape est d'enregistrer cette page d'options. Deuxième étape, comme nous le ferions normalement, nous créerions un groupe de terrain. Nous l'appellerions champs de barre de promotion, ou quelque chose comme ça, ou champs de barre de notification, et vous pouvez voir là que j'ai mon champ booléen en haut, donc vrai ou faux, la barre de promotion est active. Et puis j'ai un champ de texte pour le message, un champ de texte pour le texte du bouton, un champ d'URL pour le lien du bouton, puis nous pouvons également avoir un type d'avis, mais peut-être voulons-nous avoir des alertes ou un style promotionnel avis, et peut-être que nous faisons un style conditionnel intéressant en fonction de celui qui est sélectionné ici.

Nous ajoutons donc notre groupe de champs, et nous ajoutons nos champs, et la troisième étape est juste en dessous. Comme vous le savez, dans les règles de localisation, nous pouvons maintenant sélectionner la page Options est égale à - et vous voyez les paramètres du site que j'ai là - c'est la page Options que j'ai enregistrée à l'étape numéro un. Et donc avec tout ce qui a été fait, dans l'administrateur WordPress, nous voyons maintenant sur le côté gauche, dans notre barre d'administration, nous avons les paramètres du site, et nous cliquons dessus, et nous voyons tous les champs, comme nous nous y attendions.

Et nous pouvons activer ou désactiver la barre de notification. Nous pouvons mettre à jour le texte, mettre à jour le bouton, puis ces données seront mises à la disposition de notre modèle, et ainsi l'expérience de modèle avec les champs de données dans une page d'options est globalement la même que ce que vous feriez autrement. Il y a quelques petites nuances dans la façon dont vous ciblez spécifiquement le fait qu'il s'agit d'une page d'options et non d'un message, mais sautez dans la documentation sur advancedcustomfields.com, et cela vous guidera tout au long de la façon de gérer cela. Numéro quatre, je vais vous le renvoyer, Iain.

Iain Poulson : Merci, Rob, oui. Je veux juste parler maintenant de la façon dont nous enregistrons par programme les champs avec ACF. La création de champs dans ACF est donc très facile avec l'interface utilisateur de l'éditeur de champs, le genre de chose que nous connaissons et aimons, nous avons vu plus tôt, mais il existe d'autres façons de définir des champs. ACF nous permet d'exporter des fichiers JSON et PHP avec des définitions de champs, et qui peuvent être utilisés pour créer des champs.

Mais saviez-vous qu'en fait, il existe dans la communauté ACF, un package appelé le constructeur ACF qui vous permet de créer des champs en utilisant une sorte d'API fluide avec du code PHP ? Il s'agit en fait d'un package tiers, et il s'appelle le package ACF Builder de StoutLogic. Oui, le lien GitHub est là. Fondamentalement, il vous permet de créer des champs directement à partir du code sans connaître les subtilités de la façon dont ACF a besoin des données de champ en PHP. Il utilise une manière vraiment expressive de le faire. Cela le rend réutilisable et portable.

Vous pouvez valider les définitions de champ, car avec les fichiers PHP dans votre contrôle de version, il est facile de collaborer. C'est facile à envoyer à votre mécanisme de déploiement, et vous supprimez également l'interface utilisateur de l'éditeur de groupe de champs, vous définissez donc ces champs dans du code qui empêche ensuite les clients d'avoir à toucher l'interface utilisateur, alors regardons rapidement comment nous fais-le. Pour l'installer, parce que c'est un package, nous avons parlé de Composer plus tôt. Il s'agit d'un package Composer que vous pouvez installer avec la commande suivante, Composer acquiert StartLogic, le fournisseur, ACF Builder, puis voici à quoi ressemble le code.

Vous êtes en quelque sorte en train d'instancier une instance du générateur de champs, et vous lui donnez le slug de ce qui serait le groupe de champs. Et puis vous dites, dans ce groupe de champs, ajoutons un champ de texte appelé Directeur. Ajoutons un champ numérique appelé Année, puis, ce qui est important, nous allons définir l'emplacement du groupe de champs pour qu'il apparaisse sur le type de publication du film.

Et tout cela fait beaucoup pour vous sans que vous ayez à y penser, donc vous lui donnez le nom du directeur pour l'étiquette du champ, et il ira de l'avant et, évidemment, créera le slug ou la clé pour le champ sans que vous ayez pour ajouter cela, cela enlève beaucoup de frappe, beaucoup de réflexion et beaucoup de création sujette aux erreurs. Et puis la deuxième partie est l'endroit où vous chargez cette définition de champ dans ACF, et cela créera le groupe de champs pour vous.

Rob Stinson : D'accord, donc le numéro 5 ici, les relations bidirectionnelles. Maintenant, c'est intéressant. Je pense que je me souviens de ce projet spécifique sur lequel j'ai travaillé à l'époque, à l'époque de mon agence, où j'ai réellement compris cela, et cela a en quelque sorte changé la donne. Donc, si ce n'est pas quelque chose que vous avez déjà fait avec ACF, faites attention, car c'est une chose vraiment utile, alors regardons un exemple. En regardant, bien sûr, notre site de récompenses VHS, nous avons une liste de 100 films, et il y a évidemment différentes façons de connecter ces choses.

Nous avons notre taxonomie personnalisée de genre avant. Nous pouvons avoir quelques champs différents qui gèrent en quelque sorte des éléments tels que les balises ou le regroupement. Les relations bidirectionnelles sont donc utiles lorsque vous souhaitez créer un type spécifique de connexion bidirectionnelle entre deux publications ou, dans notre cas, deux films. Donc, pour notre exemple, disons simplement que nous avons ces trois films dans notre base de données, et qu'ils sont tous animés, nous voulons donc créer une relation bidirectionnelle avec eux.

Maintenant, ce que cela signifie, c'est que nous avons notre premier film ici, "Toy Story", un grand film, et nous identifions qu'il y a deux autres films connexes que nous voulons associer à cela. Nous pourrions donc créer un champ de relation pour notre type de publication personnalisé, à savoir les films, et nous y aurions un champ de relation, et nous sélectionnerions le film, "Le Roi Lion" et Princes Monon - je suis vraiment désolé. Je bute sur ce mot. Je le massacre, mais le film s'appelle "Princesse Mononoké". Hahaha. S'il vous plaît ne me détestez pas. J'ai juste du mal à prononcer ce mot pour une raison quelconque.

Et nous identifions que ces deux films sont liés, nous les sélectionnons donc dans le champ Relation. Maintenant, dans ce cas, il serait logique que, oui, "Le Roi Lion", par exemple, soit lié à "Toy Story", et donc "Toy Story" est lié à "Le Roi Lion". Alors peut-être que normalement nous passerions à l'écran d'édition du "Roi Lion", puis nous trouverions "Toy Story", et nous l'ajouterions là-bas, mais nous doublons notre travail là-bas. Donc, ce qu'une relation bidirectionnelle fait, c'est qu'elle crée automatiquement cette connexion pour nous, ce qui est vraiment, vraiment utile.

Donc, une fois que nous ajoutons, par exemple, "Le Roi Lion" à "Toy Story", "Toy Story" est automatiquement ajouté au "Roi Lion", et c'est vraiment, vraiment utile. Cela fait gagner beaucoup de temps aux créateurs de contenu et aux gestionnaires de contenu. Cela réduit le risque d'oubli, ou peut-être que vous pourriez en supprimer un d'un poste, puis oublier de le retirer de l'autre. Cela simplifie vraiment, vraiment l'expérience d'édition de contenu, donc une chose vraiment utile qui peut être utilisée, en particulier sur des sites intéressants comme celui-ci. Alors, comment faisons-nous cela? Eh bien, il y a deux façons de faire cela actuellement, et je vais parler d'une troisième chose, peut-être, qui arrivera plus tard cette année.

Donc, comment c'est fait, le premier est que vous pouvez le faire en code. Donc, juste avec le plug-in ACF Pro installé, vous pouvez écrire du code pour le faire. Et vous pouvez écrire une fonction qui s'accroche au filtre de valeur de mise à jour ACF, et ce filtre s'exécute avant qu'une valeur ne soit enregistrée et, en gros, ce qu'il fait, il saisit le message actuel que vous modifiez et identifie l'ID de message du message qui a été ajouté, puis met à jour l'autre message, et fait ce genre de correspondance en arrière-plan pour vous, donc très utile.

Un peu de code, donc tant que vous êtes à l'aise avec ça, ce n'est pas trop lourd. Mais encore une fois, il y a un lien là-bas, ou une URL, que vous pouvez consulter dans les documents Advanced Custom Fields pour voir comment vous pouvez le faire. La deuxième option, cependant, n'est pas un code, ce qui est plutôt agréable de temps en temps. Il s'agit donc en fait d'un plug-in d'écosystème appelé ACF Extended. Il est disponible sur WordPress.org, et ce qu'il fait, c'est qu'il apporte simplement cette fonctionnalité dans l'interface utilisateur ACF elle-même.

Donc, si vous avez installé cette extension, ACF Extended, et que vous avez installé ACF Pro, vous verrez une option qui lorsque vous créez un champ de relation, il y a une bascule bidirectionnelle que vous pouvez activer, puis vous pouvez établissez cela dans une collection directement depuis l'interface utilisateur, ce qui est très pratique. Maintenant, les choses avancent de manière très intéressante avec ce projet, mais ne perdons pas la tête, ou devrions-nous le faire ? Iain, à toi.

Iain Poulson : Oui, merci Rob. Cela vaut la peine d'appeler sans tête quand il s'agit d'ACF. ACF a un support sans tête, donc oui, les sites sans tête sous-jacents, la nature découplée des sites. Il y a beaucoup de communication API en cours et ACF prend en charge l'API. L'API REST que nous avons ajoutée nativement dans ACF à partir de 5.11 ou 5.11, et nous prenons en charge GraphQL avec le plugin WP GraphQL, qui a un module complémentaire ACF pour WP GraphQL, donc ACF prend en charge les sites sans tête. Il a une intégration avec le programme WP Engine Atlas pour les sites WordPress sans tête appropriés, mais parlons juste d'une sorte d'exemple réel de la façon dont vous prendriez les données qui se trouvent dans notre site VHS WordPress et les utiliseriez de manière découplée.

Donc, par exemple - écoutez-moi - les gens votent essentiellement sur le site des récompenses VHS, et ils vont être - je pense que nous avons mis une date arbitraire - ils doivent voter jusqu'à la fin d'une certaine date, et nous 'll voir ce qui est le plus populaire. Nous avons notre cinéma local, et il fait une double affiche des films des années 90 les plus votés. Alors ils ont, au cinéma, ils ont leur panneau d'affichage, et c'est en ligne. Il est connecté au Web et nous pouvons alimenter dynamiquement ce qui s'affiche sur ce panneau d'affichage. Nous devons donc nous connecter à notre site WordPress.

Par exemple, le panneau d'affichage est une simple application de nœud, nous devons récupérer les données du site VHS, alors voyons rapidement comment nous pourrions le faire avec un point de terminaison API REST personnalisé, et comme je l'ai déjà dit, nous avons a obtenu le support de GraphQL. Cela peut être fait dans les deux sens, mais c'est probablement un exemple plus simple à montrer. Donc, tout d'abord, nous allons créer une fonction qui obtient essentiellement les données dont nous avons besoin, donc en passant par là, c'est une requête WP qui dit, je veux des films, ou des types de messages d'un type de film, mais je ne fais que en veux deux. Mais je veux aussi le commander par le champ ACF, qui est le nom du champ est votes, et nous le commandons dans un ordre décroissant, donc nous allons obtenir le haut, et nous allons obtenir le haut deux.

Et puis ensuite, nous allons créer un point de terminaison REST personnalisé, qui utilise la fonction de rappel que nous avons créée dans la diapositive précédente, et cela va juste nous donner un point de terminaison que nous pouvons frapper pour aller chercher les deux films. Donc, à quoi cela ressemble-t-il réellement dans la réalité - et ce n'est qu'un test - donc l'URL est vhsawards.com, le WP-JSON, puis nous lui avons donné un espace de noms de VHS Version 1 au cas où nous voudrions changer l'API, et nous avons juste une structure d'URL très simple de populaire.

Et cela ne fait que renvoyer un objet JSON avec deux éléments, les deux premiers votés, qui se sont avérés être "Fight Club" et "Goodfellas", qui sont plutôt bons, alors oui. C'est vraiment bien de montrer comment ACF alimente les sites découplés et sans tête, mais il est assez difficile de parler de WordPress pour le moment sans mentionner les blocs. Je ne peux pas croire que nous soyons arrivés si loin sans même mentionner les blocs. Qu'as-tu pour nous, Rob, pour changer ça ?

Rob Stinson : Nous devons absolument parler de blocages. Avant de le faire, j'ai réalisé que juste avant, lorsque nous examinions le numéro cinq concernant les relations bidirectionnelles, j'avais fait allusion à une troisième façon de procéder. Je ne l'ai pas couvert, donc tout ce que je veux dire, c'est surveiller cet espace parce que nous prévoyons, nous avons sur la feuille de route, d'envisager d'ajouter une meilleure prise en charge des relations bidirectionnelles nativement dans le plugin lui-même, afin que vous puissiez faciliter ce truc juste dans le plug-in ACF sans avoir besoin de matériel tiers, alors surveillez simplement cet espace, sans engagement sur le timing. C'est quelque chose que nous examinons.

Alors numéro sept, oui. Regardons la création d'un bloc personnalisé avec ACF. Maintenant, la plupart des gens savent que vous pouvez le faire dans ACF maintenant, mais tout le monde ne l'a pas nécessairement essayé. Donc, si vous êtes dans ce camp et que vous êtes un utilisateur ACF de longue date, et que vous n'avez pas encore utilisé la fonctionnalité de blocage personnalisé, regardez ceci, car cela peut simplement vous inviter à voir la valeur de cette fonctionnalité. Mais comment allons-nous l'utiliser pour les VHS Awards ? Peut-être voulons-nous avoir un composant de bloc pour notre site que nous pouvons ajouter à divers endroits, et c'est la beauté d'un bloc personnalisé, ou de n'importe quel bloc, c'est qu'il peut être utilisé et placé sur des pages et des publications sur tout le site, et nous voulons pour créer un bloc d'appel à l'action personnalisé.

Maintenant, c'est un bloc assez simple, et vous pouvez certainement faire des choses plus intéressantes avec des blocs personnalisés. Nous allons faire simple maintenant. Mais cette bannière bleue, appel à Action Block, nous voulons pouvoir la placer sur la page d'accueil, ou peut-être sur certains articles de blog et des choses comme ça, encourageant les lecteurs et les visiteurs du site à cliquer sur ce bouton, et à parcourir, et votez pour leur film préféré des années 90. Alors, comment construirions-nous ce bloc personnalisé avec ACF ? Et la raison pour laquelle nous le faisons en tant que bloc personnalisé est qu'il a un design unique.

Il y a ce dégradé d'arrière-plan intéressant pour ce motif de points répétitif, et nous avons réalisé qu'il était plus facile pour nous de le construire en tant que bloc personnalisé avec ce contrôle précis qui nous donne, par rapport à ce que nous pourrions peut-être faire avec des blocs qui sont hors du étagère avec noyau WordPress. Alors, comment faisons-nous cela? La première étape consiste à enregistrer notre bloc personnalisé, généralement dans functions.PHP, ou partout où vous écrivez ce type de code. Sympa et simple, et nous pointons vers le répertoire où se trouveront finalement les fichiers de modèle pour notre bloc personnalisé, c'est donc l'étape numéro un.

Étape numéro deux, nous créons notre groupe de champs et nous ajoutons nos champs. Donc, pour notre bloc Action appelée, nous voulons également avoir du texte, du texte de bouton, un lien de bouton et une couleur d'arrière-plan. Peut-être voulons-nous donner la possibilité de varier le style pour cela. Troisièmement, nous allons, dans les règles de localisation, nous allons sélectionner le bloc, et nous allons dire est égal à, et nous avons enregistré le bloc CTA juste auparavant, et c'est pourquoi il est disponible pour nous là dans ce menu déroulant. Maintenant, nous passons à notre fichier de modèle, donc tous les champs et tout sont configurés, et maintenant nous allons faire une partie de nos modèles. Maintenant, la création de modèles est différente à certains égards de la façon dont vous le feriez peut-être traditionnellement avec ACF.

Mais à bien d'autres égards, c'est très, très similaire, donc beaucoup de modèles que vous utilisez généralement pour votre développement, vous les utiliserez lorsque vous créerez vos blocs personnalisés, ce qui est fantastique. Donc on va, dans notre projet, on va dire que c'est notre thème personnalisé. Nous avons un répertoire de blocs, puis nous avons un répertoire CTA, qui correspond au bloc que nous avons enregistré, puis vous auriez généralement trois fichiers de modèle, block.JSONsomething.PHP, qui est notre balisage HTML, puis un point CSS pour notre coiffant.

C'est donc le type de bloc JSON, et c'est en quelque sorte là où nous avons enregistré le bloc, mais c'est ainsi que nous pouvons comprendre un peu plus les choses, et vous pouvez faire beaucoup ici autour de la configuration et de diverses fonctionnalités natives du Core qui vous pouvez activer ou désactiver la mise à disposition de votre bloc personnalisé. Alors, consultez certainement la documentation à ce sujet et comprenez ce qui peut être fait, car c'est vraiment là que vous pouvez, comme je l'ai dit, configurer la façon dont ce bloc est mis à disposition, et affiche, et les fonctionnalités, les fonctionnalités de base que vous pouvez traverser à votre bloc personnalisé.

Nous avons ensuite notre fichier de modèle, notre fichier PHP, et vous pouvez voir ici que je suis en train de configurer des variables interagissant avec le champ Get, interagissant avec nos données de champ là-bas, un peu de logique conditionnelle très simple sur notre style là-bas, puis notre code HTML pour notre bloc lui-même. Et puis je ne vais pas parcourir le CSS. Vous savez ce qu'est le CSS, et je suis sûr que vous pourriez probablement écrire un meilleur CSS que ce que j'ai écrit ici, mais vous voyez l'idée. Vous avez un fichier CSS pour le style de votre bloc, et vous pouvez voir que nous avons des choses intéressantes autour des polices, et l'arrière-plan radial et dégradé pour ce genre d'arrière-plan à points, ce qui est assez amusant.

Mais encore une fois, la raison pour laquelle nous créons ce bloc personnalisé est que nous voulons qu'il affine vraiment notre CSS, notre style, afin que nous puissions vraiment mettre en œuvre la conception sur laquelle nous travaillons. Et juste pour vous montrer à quoi cela ressemble dans l'éditeur, vous pouvez voir, nous pouvons sélectionner notre bloc Called Action, vous pouvez allumer large. Nous pouvons interagir avec nos champs, ajouter le texte pour le texte et le bouton, ainsi qu'ajouter un lien pour le bouton, et c'est un très joli bloc personnalisé que nous pouvons transmettre à nos éditeurs de contenu.

Iain Poulson : Oui, merci, Rob. Quel beau spectacle. Nous avons vraiment besoin de mettre ça en direct. C'est génial. Bon, revenons juste sur ce dont nous avons parlé aujourd'hui. Nous avons donc expliqué comment installer ACF Pro, mais avec Composer. Nous avons parlé de la façon d'enregistrer les types de publication personnalisés et les taxonomies dans ACF. Nous avons envisagé d'enregistrer des champs globaux ou à l'échelle du site avec une page d'options, et nous avons examiné une autre manière d'enregistrer des champs par programmation avec un package.

Rob s'est plongé dans les relations et comment créer des relations bidirectionnelles. Nous avons abordé le sans tête avec ACF, et Rob vient de faire un excellent exemple de création d'un bloc personnalisé avec ACF avec presque rien à part du PHP, du HTML et du CSS, et aucune réaction du tout, donc c'est vraiment bien. C'était super, Rob. Quels sont les votes ? En quoi sommes-nous sortis ?

Rob Stinson: Écoutez, pour moi, cela se résume à ceci - le plus grand film des années 90 est indéniablement "Hook" de Robin Williams. Beaucoup de nostalgie enveloppée pour moi là-dedans, j'adore ce film. Et toi, Iain ?

Iain Poulson : Pour moi, ça doit être "Robin Hood, Prince of Thieves" de Kevin Costner. C'est un classique. Oubliez les mauvais cheveux, les mulets, l'accent anglais douteux qui n'est même pas un accent anglais. C'est le plus grand film de Robin Hood de tous les temps, et c'est une colline sur laquelle je suis prêt à mourir.

Rob Stinson : Ha, ha, non, assez juste. Écoutez, merci à tous d'avoir traîné. J'espère que vous avez appris quelque chose, et nous avons vraiment hâte de voir ce que vous construisez avec ACF, bravo.