{"id":229857,"date":"2022-11-15T17:34:00","date_gmt":"2022-11-15T14:34:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229857"},"modified":"2022-11-15T17:38:19","modified_gmt":"2022-11-15T14:38:19","slug":"ajout-de-dialogues-modaux-wordpress-a-laide-de-donnees-statiques","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/ajout-de-dialogues-modaux-wordpress-a-laide-de-donnees-statiques\/","title":{"rendered":"Ajout de dialogues modaux WordPress (\u00e0 l&rsquo;aide de donn\u00e9es statiques)"},"content":{"rendered":"\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/fr\/ajout-de-dialogues-modaux-wordpress-avec-bibliotheques-integrees\/\" title=\"Dans le post pr\u00e9c\u00e9dent\">Dans le post pr\u00e9c\u00e9dent<\/a>, j&rsquo;ai parcouru le processus requis pour que les bo\u00eetes de dialogue modales WordPress apparaissent dans le contexte de la zone d&rsquo;administration.<\/p>\n<p>Cela utilise :<\/p>\n<ul>\n<li>l&rsquo;API WordPress int\u00e9gr\u00e9e,<\/li>\n<li>la biblioth\u00e8que Thickbox fournie,<\/li>\n<li>et un exemple de code pour l&rsquo;afficher.<\/li>\n<\/ul>\n<p>Dans ce didacticiel, je vais parcourir le remplissage de la bo\u00eete de dialogue modale avec des donn\u00e9es. Apr\u00e8s cela, je partagerai comment remplir dynamiquement les donn\u00e9es \u00e0 l&rsquo;aide d&rsquo;Ajax.<\/p>\n<h2>Dialogues modaux WordPress\u00a0: donn\u00e9es statiques<\/h2>\n<p>Pour cet article, je suppose que vous avez lu l&rsquo;article initial de la s\u00e9rie et que vous comprenez ce que fait le code (bien que ce soit encore mieux si vous avez du code fonctionnel sur votre environnement de d\u00e9veloppement local).<\/p>\n<p>Quoi qu&rsquo;il en soit, parlons de remplir la m\u00e9ta-bo\u00eete avec des informations. C&rsquo;est-\u00e0-dire que nous allons regarder :<\/p>\n<ol>\n<li>mettre des informations dans le corps de la meta box,<\/li>\n<li>remplissant le titre avec du contenu.<\/li>\n<\/ol>\n<p>Une fois que nous aurons fait cela, nous passerons \u00e0 la r\u00e9cup\u00e9ration des informations du serveur de mani\u00e8re asynchrone, puis au remplissage du code que nous avons jusqu&rsquo;\u00e0 pr\u00e9sent.<\/p>\n<h3>1 D\u00e9finir les donn\u00e9es<\/h3>\n<p>Ajouter du contenu \u00e0 la m\u00e9ta-bo\u00eete est vraiment facile. Rappel du post pr\u00e9c\u00e9dent\u00a0; nous avons un \u00e9l\u00e9ment HTML qui a un <strong>display: none ;<\/strong> valeur pour son attribut de <strong>style .<\/strong><\/p>\n<p>Voici <a href=\"https:\/\/gist.github.com\/tommcfarlin\/1db21634b8b7a88a963b3875553d2539#file-03-adding-the-modal-dialog-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">l&rsquo;essentiel original<\/a> :<\/p>\n<pre><code>&lt;?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?&gt;\n\n&lt;div id=\"acme-thickbox-demo\" class=\"wrap\"&gt;\n\n  &lt;h1&gt;Acme Thickbox Demo&lt;\/h1&gt;\n  &lt;p&gt;Provides an exmaple of how to use the thickbox library within a WordPress plugin page.&lt;\/p&gt;\n\n  &lt;div id=\"acme-thickbox-content\"&gt;\n    &lt;a href=\"TB_inline?width=600&amp;height=550&amp;inlineId=acme-modal-dialog\" class=\"thickbox\"&gt;Display The Dialog&lt;\/a&gt;\n    &lt;div id=\"acme-modal-dialog\" style=\"display:none;\"&gt;&lt;\/div&gt;&lt;!-- #acme-modal-dialog --&gt;\n  &lt;\/div&gt;&lt;!-- #acme-thickbox-content --&gt;\n\n&lt;\/div&gt;&lt;!-- #acme-thickbox-demo --&gt;<\/code><\/pre>\n<p>L&rsquo;ajout de contenu \u00e0 la bo\u00eete de dialogue modale est facile. Localisez simplement l&rsquo;\u00e9l\u00e9ment <strong>acme-modal-dialog<\/strong>, puis remplissez-le avec les informations que vous souhaitez afficher \u00e0 l&rsquo;utilisateur.<\/p>\n<p>Par exemple, voir <a href=\"https:\/\/gist.github.com\/tommcfarlin\/1db21634b8b7a88a963b3875553d2539#file-04-modal-dialog-content-html\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">cet exemple de code<\/a> :<\/p>\n<pre><code>&lt;div id=\"acme-modal-dialog\" style=\"display:none;\"&gt;\n  &lt;h2&gt;Hello World&lt;\/h2&gt;\n  &lt;p&gt;Lucas ipsum dolor sit amet ventress dak jusik chewbacca tenel beru bail anomid hapes mas.&lt;\/p&gt;\n  &lt;p&gt;Fel kalee kyle desann. Ozzel p'w'eck jax castell saleucami. Thisspias veila mantell mccool garindan jax.&lt;\/p&gt;\n  &lt;p&gt;Barriss kurtzen sing bertroff cody frozarns. Han koon miraluka vau.&lt;\/p&gt;\n  &lt;p&gt;\n    &lt;ul&gt;\n      &lt;li&gt;Bajic asajj boba raymus dug piell moddell jax darth.&lt;\/li&gt;\n      &lt;li&gt;Sio anakin naberrie shistavanen fisto utapau chewbacca aayla.&lt;\/li&gt;\n    &lt;\/ul&gt;\n  &lt;\/p&gt;\n  &lt;p&gt;\n    Corran axmis kor-uj hutt marek kenobi ansuroer echani. Mirax mara fisto bith tyranus kashyyyk farlander max b'omarr.\n    Ben dodonna askajian teevan palpatine lobot beru.\n  &lt;\/p&gt;\n&lt;\/div&gt;&lt;!-- #acme-modal-dialog --&gt;<\/code><\/pre>\n<p>Lorsque l&rsquo;utilisateur clique sur l&rsquo;ancre dans le post pr\u00e9c\u00e9dent (celui qui lit <strong>Display The Dialog<\/strong> ), alors le modal sera affich\u00e9 avec le contenu que vous voyez ci-dessus.<\/p>\n<p>D&rsquo;une mani\u00e8re g\u00e9n\u00e9rale, cela devrait ressembler \u00e0 ce que vous voyez ci-dessus en fonction du code d\u00e9crit dans l&rsquo;essentiel.<\/p>\n<h3>2 D\u00e9finition d&rsquo;un titre<\/h3>\n<p>Ensuite, notez que la bo\u00eete de dialogue modale inclut une option pour la fermer lorsque l&rsquo;utilisateur a fini de la lire. En plus d&rsquo;offrir cette capacit\u00e9, notez que la zone de la bo\u00eete de dialogue a beaucoup d&rsquo;espace blanc.<\/p>\n<p>Vous savez ce que je veux dire: c&rsquo;est une zone qui est g\u00e9n\u00e9ralement rel\u00e9gu\u00e9e \u00e0 \u00eatre utilis\u00e9e comme barre de titre. Gr\u00e2ce \u00e0 l&rsquo;API Thickbox et \u00e0 son int\u00e9gration avec WordPress, nous pouvons facilement lui ajouter notre titre. Il peut \u00eatre dynamique (comme si l&rsquo;information devait venir via Ajax) ou il peut \u00eatre statique.<\/p>\n<p>Et puisque nous travaillons avec des informations statiques dans cet article particulier, configurons cela. Pour ce faire, nous devons ajouter un\u00a0 attribut <strong>title<\/strong> \u00e0 l&rsquo;ancre responsable de l&rsquo;affichage du modal.<\/p>\n<p>Une fois que vous avez localis\u00e9 l&rsquo;ancre responsable du d\u00e9clenchement de l&rsquo;affichage (rappelez-vous qu&rsquo;elle contient le texte <strong>Display The Dialog<\/strong> ), ajoutez-lui un attribut title pour que le code ressemble <a href=\"http:\/\/05-adding-a-dialog-title.html\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">\u00e0 ceci<\/a> :<\/p>\n<pre><code>&lt;a href=\"TB_inline?width=600&amp;height=550&amp;inlineId=acme-modal-dialog\" title=\"Hello World\" class=\"thickbox\"&gt;Display The Dialog&lt;\/a&gt;<\/code><\/pre>\n<p>D\u00e9sormais, lorsque vous cliquez sur l&rsquo;ancre pour d\u00e9clencher l&rsquo;affichage, elle affichera non seulement la bo\u00eete de dialogue comme dans la photo ci-dessus, mais elle contiendra \u00e9galement un titre\u00a0:<\/p>\n<\/p>\n<p>Utile, non? Et s&rsquo;il devait \u00eatre plus dynamique ?<\/p>\n<h2>Passons maintenant \u00e0 l&rsquo;Ajax<\/h2>\n<p>Et la nature dynamique est ce que je cherche \u00e0 couvrir ensuite. Plus pr\u00e9cis\u00e9ment, je cherche \u00e0 parcourir le processus consistant \u00e0 prendre ce que nous avons ici, \u00e0 savoir des donn\u00e9es statiques, et \u00e0 les remplacer par des informations r\u00e9cup\u00e9r\u00e9es de mani\u00e8re asynchrone.<\/p>\n<p>C&rsquo;est-\u00e0-dire que l&rsquo;utilisateur clique sur l&rsquo;\u00a0 ancre <strong>Afficher la bo\u00eete de dialogue<\/strong>, puis\u00a0:<\/p>\n<ul>\n<li>une requ\u00eate est faite au serveur,<\/li>\n<li>les donn\u00e9es sont r\u00e9cup\u00e9r\u00e9es,<\/li>\n<li>puis les informations sont dirig\u00e9es vers le titre et les zones de contenu de la bo\u00eete de dialogue.<\/li>\n<\/ul>\n<p>C&rsquo;est un peu mieux que d&rsquo;utiliser des informations statiques et cela rend l&rsquo;application plus dynamique.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Source d&rsquo;enregistrement:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Lorsque vous travaillez avec des bo\u00eetes de dialogue modales WordPress, il est utile de vous assurer qu&rsquo;elles incluent \u00e0 la fois un titre et un contenu. Voici comment proc\u00e9der avec des donn\u00e9es statiques.<\/p>\n","protected":false},"author":1,"featured_media":165632,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[893,841,862],"tags":[1167],"class_list":["post-229857","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code-2","category-tutoriels","category-wordpress-3","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/229857","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=229857"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/229857\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/165632"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=229857"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=229857"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=229857"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}