{"id":230201,"date":"2022-11-15T17:07:00","date_gmt":"2022-11-15T14:07:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=230201"},"modified":"2022-11-15T17:08:24","modified_gmt":"2022-11-15T14:08:24","slug":"aggiunta-di-finestre-di-dialogo-modali-di-wordpress-utilizzando-dati-statici","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/aggiunta-di-finestre-di-dialogo-modali-di-wordpress-utilizzando-dati-statici\/","title":{"rendered":"Aggiunta di finestre di dialogo modali di WordPress (utilizzando dati statici)"},"content":{"rendered":"\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/it\/aggiunta-di-finestre-di-dialogo-modali-di-wordpress-con-librerie-integrate\/\" title=\"Nel post precedente\">Nel post precedente<\/a>, ho esaminato il processo necessario per far apparire le finestre di dialogo modali di WordPress nel contesto dell&#8217;area di amministrazione.<\/p>\n<p>Questo utilizza:<\/p>\n<ul>\n<li>l&#8217;API WordPress integrata,<\/li>\n<li>la libreria Thickbox fornita,<\/li>\n<li>e un codice di esempio per farlo visualizzare.<\/li>\n<\/ul>\n<p>In questo tutorial, illustrer\u00f2 il popolamento della finestra di dialogo modale con i dati. Successivamente, condivider\u00f2 come popolare i dati in modo dinamico utilizzando Ajax.<\/p>\n<h2>Finestre di dialogo modali di WordPress: dati statici<\/h2>\n<p>Per questo post, presumo che tu abbia letto il post iniziale della serie e che tu abbia una comprensione di cosa sta facendo il codice (anche se \u00e8 ancora meglio se hai del codice funzionante nel tuo ambiente di sviluppo locale).<\/p>\n<p>Indipendentemente da ci\u00f2, parliamo di popolare la meta box con le informazioni. Cio\u00e8, esamineremo:<\/p>\n<ol>\n<li>inserire le informazioni nel corpo della meta box,<\/li>\n<li>popolando il titolo con il contenuto.<\/li>\n<\/ol>\n<p>Una volta fatto ci\u00f2, passeremo all&#8217;acquisizione di informazioni dal server in modo asincrono e quindi alla compilazione del codice che abbiamo finora.<\/p>\n<h3>1 Definizione dei dati<\/h3>\n<p>Aggiungere contenuto alla meta box \u00e8 davvero facile. Richiamo dal post precedente; abbiamo un elemento HTML che ha un <strong>display: none;<\/strong> valore per il suo attributo di <strong>stile .<\/strong><\/p>\n<p>Ecco <a href=\"https:\/\/gist.github.com\/tommcfarlin\/1db21634b8b7a88a963b3875553d2539#file-03-adding-the-modal-dialog-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">il succo originale<\/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>Aggiungere contenuto alla finestra di dialogo modale \u00e8 facile. Basta individuare l&#8217;elemento <strong>acme-modal-dialog<\/strong> e poi compilarlo con tutte le informazioni che si desidera visualizzare all&#8217;utente.<\/p>\n<p>Ad esempio, vedere <a href=\"https:\/\/gist.github.com\/tommcfarlin\/1db21634b8b7a88a963b3875553d2539#file-04-modal-dialog-content-html\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">questo esempio di codice<\/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>Quando l&#8217;utente fa clic sull&#8217;ancora nel post precedente (quello che legge <strong>Visualizza il dialogo<\/strong> ), verr\u00e0 visualizzato il modale con il contenuto che vedi sopra.<\/p>\n<p>In generale, dovrebbe apparire come quello che vedi sopra in base al codice delineato nel succo.<\/p>\n<h3>2 Impostazione di un titolo<\/h3>\n<p>Successivamente, nota che la finestra di dialogo modale include un&#8217;opzione per ignorarla ogni volta che l&#8217;utente ha finito di leggerla. Oltre a offrire questa capacit\u00e0, nota che l&#8217;area della finestra di dialogo ha molto spazio bianco.<\/p>\n<p>Sai cosa intendo: \u00e8 un&#8217;area che di solito \u00e8 relegata ad essere utilizzata come barra del titolo. Grazie all&#8217;API Thickbox e alla sua integrazione con WordPress, possiamo facilmente aggiungerlo al nostro titolo. Pu\u00f2 essere dinamico (come se le informazioni dovessero arrivare tramite Ajax) o pu\u00f2 essere statico.<\/p>\n<p>E poich\u00e9 stiamo lavorando con informazioni statiche in questo particolare post, configuriamolo. Per fare ci\u00f2, dobbiamo aggiungere un\u00a0 attributo <strong>title<\/strong> all&#8217;ancora responsabile della visualizzazione del modale.<\/p>\n<p>Una volta individuata l&#8217;ancora responsabile dell&#8217;attivazione della visualizzazione (ricorda, contiene il testo <strong>Display The Dialog<\/strong> ), aggiungi un attributo title in modo che il codice assomigli <a href=\"http:\/\/05-adding-a-dialog-title.html\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">a questo<\/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>Ora, quando fai clic sull&#8217;ancora per attivare la visualizzazione, non solo mostrer\u00e0 la finestra di dialogo come nell&#8217;immagine sopra, ma conterr\u00e0 anche un titolo:<\/p>\n<\/p>\n<p>Utile, vero? Ma se fosse pi\u00f9 dinamico?<\/p>\n<h2>Ora verso l&#8217;Ajax<\/h2>\n<p>E la natura dinamica \u00e8 ci\u00f2 che sto cercando di coprire in seguito. In particolare, sto cercando di seguire il processo per prendere ci\u00f2 che abbiamo qui, che sono dati statici e sostituirli con informazioni recuperate in modo asincrono.<\/p>\n<p>Cio\u00e8, l&#8217;utente fa clic\u00a0 sull&#8217;ancora <strong>Visualizza la finestra di dialogo<\/strong> e quindi:<\/p>\n<ul>\n<li>viene fatta una richiesta al server,<\/li>\n<li>i dati vengono recuperati,<\/li>\n<li>e quindi le informazioni vengono convogliate nel titolo e nelle aree del contenuto della finestra di dialogo.<\/li>\n<\/ul>\n<p>\u00c8 un po&#8217; meglio dell&#8217;utilizzo di informazioni statiche e rende l&#8217;applicazione pi\u00f9 dinamica.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte di registrazione:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Quando si lavora con le finestre di dialogo modali di WordPress, \u00e8 utile assicurarsi che includano sia un titolo che un contenuto. Ecco come farlo con i dati statici.<\/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":[896,844,865],"tags":[1168],"class_list":["post-230201","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codice","category-tutorial","category-wordpress-6","tag-affiai-it"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/230201","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/comments?post=230201"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/230201\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media\/165632"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media?parent=230201"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/categories?post=230201"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/tags?post=230201"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}