{"id":234278,"date":"2023-02-27T15:56:00","date_gmt":"2023-02-27T12:56:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=234278"},"modified":"2022-11-12T03:24:42","modified_gmt":"2022-11-12T00:24:42","slug":"codage-pour-les-champs-personnalises-avances-une-introduction","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/codage-pour-les-champs-personnalises-avances-une-introduction\/","title":{"rendered":"Codage pour les champs personnalis\u00e9s avanc\u00e9s\u00a0: une introduction"},"content":{"rendered":"\n<p><a href=\"https:\/\/www.advancedcustomfields.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Advanced Custom Fields<\/a> (ACF) est un plugin WordPress qui est un excellent outil pour configurer une m\u00e9ta de publication personnalis\u00e9e. Il vous permet de cr\u00e9er et de configurer facilement des m\u00e9ta-bo\u00eetes complexes et conviviales avec toutes sortes de champs et de param\u00e8tres pour les types de publication, la taxonomie, les \u00e9crans utilisateur et les pages d&rsquo;options. Et c&rsquo;est super convivial pour les d\u00e9veloppeurs.<\/p>\n<p>Maintenant, vous pouvez configurer manuellement vos propres bo\u00eetes m\u00e9ta ou param\u00e8tres, mais pour des param\u00e8tres plus complexes, cela vous oblige \u00e0 coder un peu, y compris le style, Javascript, la validation et la sauvegarde de la gestion. Imaginez par exemple \u00e9crire manuellement un r\u00e9p\u00e9teur avec un groupe de param\u00e8tres, une multi-s\u00e9lection de messages par une certaine requ\u00eate. Ou la gestion de l&rsquo;affichage des param\u00e8tres qui d\u00e9pendent de certaines variables telles que le terme ou le mod\u00e8le de page attribu\u00e9 (ce qui n\u00e9cessite Javascript). Advanced Custom Fields g\u00e8re tout cela, et il le fait magnifiquement.<\/p>\n<p>Gardez \u00e0 l&rsquo;esprit que les champs personnalis\u00e9s avanc\u00e9s ne produiront aucune de vos m\u00e9ta personnalis\u00e9es dans vos mod\u00e8les. La sortie ou l&rsquo;ex\u00e9cution de quelque chose en fonction des champs et des param\u00e8tres configur\u00e9s avec ACF est \u00e0 vous, en tant que d\u00e9veloppeur, de g\u00e9rer. Mais cela se fait facilement en utilisant l&rsquo;une des m\u00e9thodes d&rsquo;ACF. Il est \u00e9galement bon de savoir qu&rsquo;ACF utilise la m\u00e9ta-fonctionnalit\u00e9 principale de WordPress (publication, terme, utilisateur). Cela signifie qu&rsquo;il enregistre en fait, par exemple, les param\u00e8tres des publications en tant que post-m\u00e9ta &#8211; que vous pouvez obtenir en utilisant des fonctions de base telles que <code>get_post_meta()<\/code>.<\/p>\n<p>Les champs personnalis\u00e9s avanc\u00e9s sont disponibles en <a href=\"https:\/\/wordpress.org\/plugins\/advanced-custom-fields\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">version gratuite<\/a> et en version <a href=\"https:\/\/www.advancedcustomfields.com\/pro\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Pro payante<\/a>. La version gratuite est plus que suffisante pour la plupart des cas, mais dans la version Pro, vous obtenez des fonctionnalit\u00e9s suppl\u00e9mentaires telles qu&rsquo;un champ de r\u00e9p\u00e9teur, un champ de galerie, des blocs Gutenberg (voir plus loin) et la possibilit\u00e9 d&rsquo;utiliser ACF pour configurer votre propre administrateur personnalis\u00e9 pages d&rsquo;options. <a href=\"https:\/\/www.awesomeacf.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ACF est \u00e9galement si populaire que vous pouvez facilement trouver des extensions<\/a> de haute qualit\u00e9 pour tout ce que le noyau ACF ne couvre pas lui-m\u00eame.<\/p>\n<h2>Champs personnalis\u00e9s avanc\u00e9s: La partie admin<\/h2>\n<p>Lorsque vous installez le plug-in Advanced Custom Fields, vous obtenez un nouveau menu d&rsquo;administration pour &quot;Custom Fields&quot;. C&rsquo;est l\u00e0 que vous pouvez configurer et configurer vos &quot;m\u00e9ta-bo\u00eetes&quot; ou groupes de param\u00e8tres.<\/p>\n<p>Au sein d&rsquo;un groupe, vous pouvez configurer autant de champs que vous le souhaitez de diff\u00e9rents types. Les plus courants sont la saisie de texte, la zone de texte, l&rsquo;\u00e9diteur de texte enrichi, le fichier, l&rsquo;image, le vrai\/faux (bascule), les cases \u00e0 cocher, les boutons radio et la case de s\u00e9lection. Les autres m\u00e9thodes courantes sont les multiples fa\u00e7ons de choisir les publications, de choisir la taxonomie, de s\u00e9lectionner les utilisateurs, le s\u00e9lecteur de date, le s\u00e9lecteur de couleur, Google Maps et bien d&rsquo;autres. Selon le type de champ que vous choisissez, vous obtenez une gamme d&rsquo;options suppl\u00e9mentaires pour personnaliser le champ. Vous pouvez \u00e9galement ajouter une logique conditionnelle \u00e0 n&rsquo;importe quel champ. La logique conditionnelle permet de masquer ou d&rsquo;afficher des champs en fonction d&rsquo;autres options au sein du groupe.<\/p>\n<p>Pour chaque groupe de param\u00e8tres, vous pouvez d\u00e9finir dans quels cas ces param\u00e8tres doivent appara\u00eetre. Par exemple, lors de la modification de publications, d&rsquo;un terme de taxonomie ou de la modification d&rsquo;un utilisateur. Vous pouvez personnaliser davantage la visibilit\u00e9 de vos param\u00e8tres, par exemple sur le type de publication. Ou si un article a un certain terme ou un mod\u00e8le de page qui lui est attribu\u00e9, si un article est par un certain auteur, si le r\u00f4le de l&rsquo;utilisateur est tel ou tel, le r\u00f4le de l&rsquo;utilisateur actuellement connect\u00e9 ou si la page est une page parent ou non. Vous pouvez \u00e9galement personnaliser l&rsquo;endroit o\u00f9 la m\u00e9ta-bo\u00eete doit appara\u00eetre. Cependant, cette fonctionnalit\u00e9 est quelque peu r\u00e9duite maintenant avec le nouvel \u00e9diteur Gutenberg.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151429-61e4cb4a07952.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151429-61e4cb4a07952.png\" alt=\"Codage pour les champs personnalis\u00e9s avanc\u00e9s\u00a0: une introduction\" ><\/a><\/p>\n<p>Mise en place d&rsquo;un groupe<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151429-61e4cb4c9fa22.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151429-61e4cb4c9fa22.png\" alt=\"Codage pour les champs personnalis\u00e9s avanc\u00e9s\u00a0: une introduction\" ><\/a><\/p>\n<p>Param\u00e8tres pour un seul champ<\/p>\n<h2>Champs personnalis\u00e9s avanc\u00e9s\u00a0: la partie code<\/h2>\n<p>Examinons la partie la plus int\u00e9ressante\u00a0: comment utiliser les champs personnalis\u00e9s avanc\u00e9s par code. Comme mentionn\u00e9 pr\u00e9c\u00e9demment, ACF est super convivial pour les d\u00e9veloppeurs et offre un large \u00e9ventail de personnalisations.<\/p>\n<p>Obtenir des valeurs et les afficher dans vos mod\u00e8les se fait facilement en utilisant les m\u00e9thodes d&rsquo;ACF. Par exemple <code>the_field('your_meta_key')<\/code>pour l&rsquo;\u00e9cho directement ou <code>get_field('your_meta_key')<\/code>pour le stocker dans une variable PHP. Fournissez l&rsquo;ID de publication comme deuxi\u00e8me argument si vous devez r\u00e9cup\u00e9rer des donn\u00e9es en dehors de la boucle. Tr\u00e8s facile. Vous pouvez utiliser <code>get_post_meta()<\/code>, mais il est recommand\u00e9 d&rsquo;utiliser les m\u00e9thodes d&rsquo;ACF, car ACF peut transformer la valeur en quelque chose de plus significatif avant de vous la renvoyer.<\/p>\n<p>Une autre chose dont vous devez \u00eatre conscient est l&rsquo;outil d&rsquo;exportation d&rsquo;ACF. Vous pouvez exporter les groupes cr\u00e9\u00e9s dans deux formats\u00a0; soit un fichier JSON t\u00e9l\u00e9chargeable, soit du code PHP pur. Le fichier JSON est utile si vous avez besoin d&rsquo;exporter des param\u00e8tres entre des serveurs de test et en direct, ou un autre WordPress. L&rsquo;export en PHP pur vous donne la possibilit\u00e9 de le coller directement dans vos fichiers PHP de th\u00e8me ou de plugin.<\/p>\n<p>Comme vous pourriez en conclure; vous pouvez utiliser le code PHP, soit en l&rsquo;\u00e9crivant manuellement, soit en l&rsquo;exportant apr\u00e8s les avoir configur\u00e9s dans l&rsquo;administrateur, pour ajouter vos groupes et vos champs. Cela permet plus de contr\u00f4le et des moyens de g\u00e9n\u00e9rer des choix personnalis\u00e9s.<\/p>\n<p>Mais attendez, il y a plus! ACF propose \u00e9galement un large \u00e9ventail d&rsquo;actions et de filtres pour personnaliser davantage les champs ou leurs valeurs. Il existe des crochets pour l&rsquo;enregistrement ou le rendu d&rsquo;un champ ainsi que des crochets pour enregistrer des groupes par code (mentionn\u00e9s ci-dessus) et des filtres pour personnaliser les valeurs, les param\u00e8tres ou les choix du champ avant l&rsquo;enregistrement ou avant le rendu. Vous pouvez \u00e9galement sp\u00e9cifier si le filtre doit affecter tous les champs, les champs d&rsquo;un certain type ou les champs d&rsquo;une certaine cl\u00e9 m\u00e9ta. Tous les crochets et filtres sont pr\u00e9fix\u00e9s par <code>acf\/<\/code>.<\/p>\n<p>Consultez la page <a href=\"https:\/\/www.advancedcustomfields.com\/resources\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">de documentation d&rsquo;ACF<\/a>; cliquez sur &lsquo;Fonctions&rsquo;, &lsquo;Actions&rsquo; ou &lsquo;Filtres&rsquo; pour un aper\u00e7u. Vous trouverez \u00e9galement d&rsquo;excellents tutoriels et guides sur ce site.<\/p>\n<h2>Une note sur les champs personnalis\u00e9s avanc\u00e9s et Gutenberg<\/h2>\n<p>Cr\u00e9er des blocs Gutenberg personnalis\u00e9s est pour le moment assez intimidant. La documentation n&rsquo;est pas tout \u00e0 fait en place, des modifications y sont souvent apport\u00e9es et le codage n\u00e9cessite pas mal de connaissances en Javascript. De pr\u00e9f\u00e9rence, vous avez besoin de connaissances sur React et comment configurer un compilateur \u00e0 partir de JSX\/ES6 avec webpack et Babel.<\/p>\n<p>Cependant, dans la <a href=\"https:\/\/www.advancedcustomfields.com\/blog\/acf-5-8-introducing-acf-blocks-for-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">version 5.8, ACF Pro a introduit<\/a> une fonctionnalit\u00e9 permettant de configurer un groupe de champs en tant que bloc Gutenberg &#8211; vous permettant d&rsquo;ajouter des blocs personnalis\u00e9s uniquement avec du code ACF et PHP. Aucune connaissance Javascript n\u00e9cessaire !<\/p>\n<p>Tout ce que vous avez \u00e0 faire est de configurer les groupes en admin ou par code comme d&rsquo;habitude. Mais ensuite d\u00e9finir leur emplacement comme bloc Gutenberg. Il ne reste plus qu&rsquo;\u00e0 ajouter du code PHP pour les enregistrer en tant que bloc Gutenberg personnalis\u00e9 avec <code>acf_register_block()<\/code>. Pour cette fonction, vous d\u00e9finissez un rappel vers une fonction PHP ou un fichier de mod\u00e8le responsable du rendu de la sortie du bloc. Vous \u00e9crivez cette fonction ou cette partie de mod\u00e8le enti\u00e8rement en PHP et utilisez des m\u00e9thodes famili\u00e8res telles que <code>get_field()<\/code>l&rsquo;obtention des valeurs de param\u00e8tre.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151429-61e4cb4fc3c57.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151429-61e4cb4fc3c57.png\" alt=\"Codage pour les champs personnalis\u00e9s avanc\u00e9s\u00a0: une introduction\" ><\/a><\/p>\n<p>A quoi ressemble un bloc ACF dans l&rsquo;\u00e9diteur Gutenberg<\/p>\n<p>Restez \u00e0 l&rsquo;\u00e9coute dans la <a href=\"https:\/\/awhitepixel.com\/blog\/category\/advanced-custom-fields\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">cat\u00e9gorie Champs personnalis\u00e9s avanc\u00e9s<\/a> pour des tutoriels sur l&rsquo;utilisation de ce plugin\u00a0!<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Source d&rsquo;enregistrement:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/awhitepixel.com\" class=\"external external_icon\">awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ce guide pour les d\u00e9butants examine le plugin WordPress Advanced Custom Fields (ACF) et comment vous, en tant que d\u00e9veloppeur, pouvez l&rsquo;utiliser.<\/p>\n","protected":false},"author":1,"featured_media":224889,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[915,893,893,717,717,915,1110,811,811,841,841,862,862],"tags":[1167],"class_list":["post-234278","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-autre","category-code-2","category-developpeur","category-n-a","category-plugins-2","category-tutoriels","category-wordpress-3","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/234278","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/comments?post=234278"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/234278\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/224889"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=234278"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=234278"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=234278"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}