{"id":228556,"date":"2022-10-13T20:23:00","date_gmt":"2022-10-13T17:23:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228556"},"modified":"2022-11-09T02:59:48","modified_gmt":"2022-11-08T23:59:48","slug":"creation-dun-controle-de-selecteur-de-liens-cmb2-personnalise-pour-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/creation-dun-controle-de-selecteur-de-liens-cmb2-personnalise-pour-wordpress\/","title":{"rendered":"Cr\u00e9ation d’un contr\u00f4le de s\u00e9lecteur de liens CMB2 personnalis\u00e9 pour WordPress"},"content":{"rendered":"\n

Dans ce tutoriel je vais voir comment cr\u00e9er un champ personnalis\u00e9 pour \u00e9tendre les fonctionnalit\u00e9s de CMB2<\/a> (Custom Meta Boxes 2) par WebDevStudios<\/a>.<\/p>\n

Je d\u00e9veloppe des sites Web (et des applications Web) avec le CMS WordPress<\/a> (Syst\u00e8me de gestion de contenu), et lorsqu’un nouveau projet d\u00e9barque, vous pouvez garantir qu’il y aura une obligation pour moi de d\u00e9velopper des ‘Meta Boxes personnalis\u00e9es’ pour permettre \u00e0 l’utilisateur d’avoir un contr\u00f4le pr\u00e9cis sur le contenu et la mise en page des sites.<\/p>\n

Je d\u00e9taillerai comment j’ai construit le s\u00e9lecteur de liens de contr\u00f4le CMB2 pour CMB2<\/a> (disponible dans tous les bons r\u00e9f\u00e9rentiels de plugins WordPress). Une capture d’\u00e9cran peut \u00eatre vue ci-dessous.<\/p>\n

La commande ‘Link Picker’ CMB2 en action<\/p>\n

Le s\u00e9lecteur de liens d\u00e9clenche la bo\u00eete de dialogue \u00ab\u00a0Ins\u00e9rer\/modifier le lien\u00a0\u00bb int\u00e9gr\u00e9e \u00e0 WordPress lorsque vous cliquez sur le bouton \u00ab\u00a0Choisir\u00a0\u00bb. Cela peut \u00eatre vu dans la capture d’\u00e9cran ci-dessous:<\/p>\n

\"Cr\u00e9ationAppuyer sur le bouton vous permet de choisir parmi un lien (ou d’ajouter le v\u00f4tre)<\/p>\n

Je suis s\u00fbr que vous conviendrez qu’avoir un contr\u00f4le comme celui-ci est incroyablement pratique si vous voulez donner aux \u00e9diteurs de votre site la possibilit\u00e9 d’ajouter un lien et \u00e9galement de rechercher WordPress pour ses liens internes, plut\u00f4t que de devoir couper et coller les liens dans un lien champ.<\/p>\n

Pr\u00e9sentation \/ Historique<\/h2>\n

Pour ceux qui ne sont pas au courant, une m\u00e9ta-bo\u00eete vit sur l’\u00e9cran de l’\u00e9diteur d’un article WordPress et contiendra probablement divers contr\u00f4les de formulaire (zones de texte, listes d\u00e9roulantes, cases \u00e0 cocher, etc.). Ces commandes permettent aux utilisateurs de votre site Web de modifier facilement un texte personnalis\u00e9 ou une fonctionnalit\u00e9 sur le site.<\/p>\n

\"Cr\u00e9ation\"Cr\u00e9ationUn exemple de bo\u00eete m\u00e9ta avec divers contr\u00f4les de formulaire<\/p>\n

WordPress vous permet de cr\u00e9er des m\u00e9ta-bo\u00eetes \u00e0 l’aide de fonctions (telles que [add_meta_box](https:\/\/developer.wordpress.org\/reference\/functions\/add_meta_box\/)<\/code>), mais la cr\u00e9ation de m\u00e9ta-bo\u00eetes de cette mani\u00e8re peut \u00eatre un processus long, avec beaucoup de r\u00e9p\u00e9titions de code (surtout si vous souhaitez utiliser les m\u00eames contr\u00f4les de formulaire dans plusieurs projets).<\/p>\n

Pourquoi CMB2 ?<\/h2>\n

Certains d’entre vous ont peut-\u00eatre entendu parler de Advanced Custom Fields<\/a> (ACF) qui fournit une GUI (Graphical User Interface) qui vous permet de cr\u00e9er des m\u00e9ta-bo\u00eetes directement avec WordPress.<\/p>\n

ACF, \u00e0 mon avis, n’est pas un excellent outil<\/strong> pour une solution Web \u00e9volutive. Le plugin d\u00e9pend trop des donn\u00e9es stock\u00e9es dans la base de donn\u00e9es. Cela provoque des difficult\u00e9s lors du d\u00e9ploiement de modifications sur un site, car vous ne pouvez pas simplement pousser votre code et voir les modifications instantan\u00e9ment. Au lieu de cela, vous devez refaire le travail sur les diff\u00e9rents environnements de d\u00e9ploiement (staging, live, et al). Nous avions donc besoin d’une solution qui nous permette de cr\u00e9er des m\u00e9ta-bo\u00eetes par programmation. Entrez CMB2.<\/p>\n

Avant d’adopter CMB2, nous utilisions auparavant les HM Custom Meta Boxes<\/a> de ces charmants humains de Human Made<\/a> (qui a commenc\u00e9 comme un fork du pr\u00e9curseur de WebDevStudio pour CMB2, ‘Custom Meta Boxes’).<\/p>\n

Nous avons ador\u00e9 les bo\u00eetes m\u00e9ta personnalis\u00e9es HM, et avec les extraits de code les plus simples, nous pouvions rapidement cr\u00e9er des bo\u00eetes m\u00e9ta personnalis\u00e9es pour faire \u00e0 peu pr\u00e8s n’importe quoi\u00a0!<\/p>\n

\"Cr\u00e9ationHM Custom Meta Boxes Markup Example (il s’agit du balisage de la Meta Box Instagram dans la premi\u00e8re capture d’\u00e9cran)<\/p>\n

Alors pourquoi le passage au CMB2? Eh bien, HM Custom Meta Boxes ne recevait malheureusement pas beaucoup d’amour (j’ai parl\u00e9 \u00e0 son d\u00e9veloppeur principal et c’est un homme tr\u00e8s tr\u00e8s occup\u00e9), alors que CMB2 avan\u00e7ait avec de nouvelles fonctionnalit\u00e9s, de nouveaux contr\u00f4les, et il avait gagn\u00e9 du terrain dans la communaut\u00e9 WordPress avec de nombreuses personnes l’adoptant et publiant des plugins pour l’\u00e9tendre (dont plusieurs de nos agences partenaires).<\/p>\n

Enfin, comme vous l’avez peut-\u00eatre compris, travailler avec CMB2 est aussi incroyablement simple que nous nous y \u00e9tions habitu\u00e9s, car les deux plates-formes partagent un anc\u00eatre commun.<\/p>\n

Didacticiel<\/h2>\n

Avant de commencer, chacun a son propre ensemble d’id\u00e9aux sur la fa\u00e7on de cr\u00e9er un plugin WordPress, et j’en ai essay\u00e9 pas mal, cependant le tutoriel sur ‘ Root Composition in WordPress<\/a> ‘ par Tom J Nowell, a compl\u00e8tement chang\u00e9 ma fa\u00e7on de travailler. Je trouve son approche propre, simple et facilite la maintenance future de tout plugin. Si vous saisissez la source du plugin Link Picker for CMB2<\/a>, vous pouvez voir les m\u00e9thodes qu’il enseigne dans la pratique.<\/p>\n

Construire le formulaire<\/h3>\n

Pour cr\u00e9er le formulaire qui affiche le s\u00e9lecteur de liens, la premi\u00e8re chose \u00e0 faire est de s’accrocher \u00e0 l’ cmb2_render_[control_name]<\/code>action. Comme j’ai appel\u00e9 ce contr\u00f4le ‘link_picker’ nous pouvons compl\u00e9ter le hook comme ceci :<\/p>\n

<?php\nadd_action( 'cmb2_render_link_picker', array( $this, 'cmb2_render_link_picker' ), 10, 5 );\n`\n<\/code><\/pre>\n
Pour ceux d’entre vous qui ne comprennent pas vraiment le add_action<\/code>crochet, cela fonctionne comme suit :<\/p>\n
    \n
  1. Le premier argument cmb2_render_link_picker<\/code>est le nom du crochet auquel nous voulons nous accrocher.<\/li>\n
  2. Le deuxi\u00e8me argument array( $this, 'cmb2_render_link_picker' )<\/code>est la fonction que nous voulons appeler lorsque ce crochet s’ex\u00e9cute. Notez que j’enveloppe ceci dans un tableau, avec $this<\/code>comme premier param\u00e8tre, car j’appelle la fonction \u00e0 l’int\u00e9rieur d’une classe. Si vous ne travaillez pas avec des classes, vous pouvez simplement utiliser le nom de la fonction cmb2_render_link_picker<\/code>.<\/li>\n
  3. Le 10<\/code>, est l’ordre dans lequel nous voulons que la fonction se d\u00e9clenche (plus le nombre est bas, plus t\u00f4t elle se d\u00e9clenche lorsque l’action est appel\u00e9e).<\/li>\n
  4. C’est 5<\/code>le nombre de param\u00e8tres qui seront pass\u00e9s \u00e0 la fonction que j’appelle (cela deviendra clair sous peu).<\/li>\n<\/ol>\n
    Ensuite, nous cr\u00e9ons la fonction qui affichera le formulaire\u00a0:<\/p>\n
    <?php\n\npublic function cmb2_render_link_picker( $field, $value, $object_id, $object_type, $field_type_object) {\n\u2026\n}\n`\n<\/code><\/pre>\n
    J’ai laiss\u00e9 le ‘DocBlock’ dans le code ci-dessus qui d\u00e9crit ce que fait chacun des param\u00e8tres pass\u00e9s dans la cmb2_render_link_picker()<\/code>fonction.<\/p>\n
    Notez que ma fonction commence par la public<\/code>d\u00e9claration. C’est encore parce que je travaille au sein d’une classe. Si vous ne travaillez pas avec des classes, vous pouvez omettre cela.<\/p>\n
    La valeur de ce champ est pass\u00e9e \u00e0 la fonction via le $value<\/code>param\u00e8tre. Dans le cas de ce champ, nous passerons par un tableau, car notre contr\u00f4le comporte trois \u00e9l\u00e9ments distincts\u00a0:<\/p>\n