{"id":229777,"date":"2022-11-13T10:50:00","date_gmt":"2022-11-13T07:50:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229777"},"modified":"2022-11-09T16:20:32","modified_gmt":"2022-11-09T13:20:32","slug":"ajout-de-dialogues-modaux-wordpress-avec-bibliotheques-integrees","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/ajout-de-dialogues-modaux-wordpress-avec-bibliotheques-integrees\/","title":{"rendered":"Ajout de dialogues modaux WordPress (avec biblioth\u00e8ques int\u00e9gr\u00e9es)"},"content":{"rendered":"\n

Chaque fois qu’il s’agit de d\u00e9velopper des solutions pour les clients, il y aura des moments o\u00f9 vous serez probablement charg\u00e9 d’afficher des informations dans les bo\u00eetes de dialogue modales de WordPress.<\/p>\n

Il existe de nombreuses solutions disponibles pour ce faire et plus vous \u00eates familiaris\u00e9 avec JavaScript, les diff\u00e9rentes biblioth\u00e8ques et les biblioth\u00e8ques dont elles disposent, plus il est difficile (ou peut-\u00eatre m\u00eame plus facile) de choisir laquelle utiliser.<\/p>\n

Mais WordPress a une infrastructure int\u00e9gr\u00e9e qui rend simple l’int\u00e9gration de fonctionnalit\u00e9s dans WordPress. Donc, dans trois articles \u00e0 venir, je couvrirai les points suivants\u00a0:<\/p>\n

    \n
  1. Comment incorporer des bo\u00eetes de dialogue modales WordPress \u00e0 l’aide de biblioth\u00e8ques int\u00e9gr\u00e9es,<\/li>\n
  2. Remplir les dialogues modaux avec des donn\u00e9es,<\/li>\n
  3. Remplir la bo\u00eete de dialogue modale avec des donn\u00e9es dynamiques via Ajax.<\/li>\n<\/ol>\n

    En raison de la nature de la s\u00e9rie, les publications ne seront pas cons\u00e9cutives, mais elles utiliseront toutes une balise unique que vous pourrez utiliser pour ajouter un signet et faire r\u00e9f\u00e9rence \u00e0 une s\u00e9rie une fois les publications termin\u00e9es.<\/p>\n

    Cela dit, parlons de l’int\u00e9gration facile des bo\u00eetes de dialogue modales WordPress avec des biblioth\u00e8ques int\u00e9gr\u00e9es.<\/p>\n

    Dialogues modaux WordPress, partie 1<\/h2>\n

    Pour commencer, je suppose que vous avez mis en place les bases d’une page d’administration.<\/p>\n

    Sur les pages de plugins<\/h3>\n

    Autrement dit, vous avez tout ce dont vous avez besoin pour obtenir une configuration de plugin, activ\u00e9e, puis une page affich\u00e9e via un menu ou un sous-menu.<\/p>\n

    Si ce n’est pas le cas, consultez cet article<\/a> pour savoir comment commencer.<\/p>\n

    Une fois que vous avez fait cela, vous aurez besoin de l’infrastructure de base pour une page de plugin. Cette page peut \u00eatre utilis\u00e9e pour afficher simplement des informations ou elle peut \u00eatre utilis\u00e9e \u00e0 la fois pour afficher des informations et donner \u00e0 l’utilisateur la possibilit\u00e9 d’enregistrer des options.<\/p>\n

    Pour ce tutoriel, je ne suis pas particuli\u00e8rement int\u00e9ress\u00e9 \u00e0 donner \u00e0 l’utilisateur la possibilit\u00e9 d’enregistrer des options. Au lieu de cela, nous devons cr\u00e9er une ancre qui affichera une bo\u00eete de dialogue modale \u00e0 chaque clic.<\/p>\n

    Et les donn\u00e9es qu’il contiendra seront couvertes dans un tutoriel ult\u00e9rieur.<\/p>\n

    Un exemple de page de plugin<\/h3>\n

    \u00c0 ce stade, je suppose que vous avez une page de plugin. Une structure de base pour cela peut ressembler \u00e0 ceci<\/a> :<\/p>\n

    <?php\n\/**\n * A basic plugin page that will eventually be used to demonstrate how to use the\n * Thickbox library included with WordPress.\n *\n * @package Acme\n *\/\n?>\n\n<div id=\"acme-thickbox-demo\" class=\"wrap\">\n  <!-- TODO -->\n<\/div><!-- #acme-thickbox-demo --><\/code><\/pre>\n
    A partir de l\u00e0, deux choses sont n\u00e9cessaires :<\/p>\n
      \n
    1. incorporant la biblioth\u00e8que Thickbox<\/li>\n
    2. ajouter une ancre et un conteneur qui affichera une bo\u00eete de dialogue modale<\/li>\n<\/ol>\n
      Pour int\u00e9grer la biblioth\u00e8que Thickbox dans votre page de plugin, ajoutez simplement cette balise. Si vous suivez des normes de codage, votre page a probablement un docblock en haut de la page. C’est l\u00e0 que j’ajoute normalement le code.<\/p>\n
      La\u00a0 fonction add_thickbox<\/a> est celle fournie par WordPress qui fait ce qui suit :<\/p>\n
      \n
      Met en file d’attente les js et css ThickBox par d\u00e9faut.<\/p>\n<\/blockquote>\n
      Un peu vague, non? Techniquement, la description plus longue est\u00a0:<\/p>\n
      \n
      ThickBox est un widget de dialogue d’interface utilisateur de page Web \u00e9crit en JavaScript au-dessus de la biblioth\u00e8que jQuery. Sa fonction est d’afficher une seule image, plusieurs images, du contenu en ligne, du contenu iframe ou du contenu diffus\u00e9 via AJAX dans un mode hybride.<\/p>\n<\/blockquote>\n
      Et si vous \u00eates int\u00e9ress\u00e9 par la biblioth\u00e8que Thickbox seule, vous pouvez la voir sur cette page<\/a>.<\/p>\n
      Quoi qu’il en soit, retour \u00e0 la page. Maintenant que je l’ajoute \u00e0 ma page de plugin en utilisant la fonction API de WordPress, ma page ressemble \u00e0 ceci<\/a> :<\/p>\n
      <?php\n\/**\n * A basic plugin page that will eventually be used to demonstrate how to use the\n * Thickbox library included with WordPress.\n *\n * @package Acme\n *\/\nadd_thickbox();\n?>\n\n<div id=\"acme-thickbox-demo\" class=\"wrap\">\n  <!-- TODO -->\n<\/div><!-- #acme-thickbox-demo --><\/code><\/pre>\n
      Ensuite, la cr\u00e9ation de l’ancre et de l’\u00e9l\u00e9ment d’affichage des donn\u00e9es va de pair, notamment parce que l’ancre a besoin de l’ID de l’\u00e9l\u00e9ment qui servira de dialogue modal.<\/p>\n
      L’ancre a besoin des informations suivantes\u00a0:<\/p>\n