{"id":229556,"date":"2022-11-15T17:53:00","date_gmt":"2022-11-15T14:53:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229556"},"modified":"2022-11-15T17:53:17","modified_gmt":"2022-11-15T14:53:17","slug":"agregar-dialogos-modales-de-wordpress-usando-datos-estaticos","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/agregar-dialogos-modales-de-wordpress-usando-datos-estaticos\/","title":{"rendered":"Agregar di\u00e1logos modales de WordPress (usando datos est\u00e1ticos)"},"content":{"rendered":"\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/es\/adicion-de-dialogos-modales-de-wordpress-con-bibliotecas-integradas\/\" title=\"En la publicaci\u00f3n anterior\">En la publicaci\u00f3n anterior<\/a>, expuse el proceso necesario para que los cuadros de di\u00e1logo modales de WordPress aparezcan en el contexto del \u00e1rea de administraci\u00f3n.<\/p>\n<p>Esto usa:<\/p>\n<ul>\n<li>la API de WordPress incorporada,<\/li>\n<li>la biblioteca de Thickbox provista,<\/li>\n<li>y alg\u00fan c\u00f3digo de ejemplo para que se muestre.<\/li>\n<\/ul>\n<p>En este tutorial, explicar\u00e9 c\u00f3mo llenar el cuadro de di\u00e1logo modal con datos. Despu\u00e9s de eso, compartir\u00e9 c\u00f3mo completar los datos din\u00e1micamente usando Ajax.<\/p>\n<h2>Di\u00e1logos modales de WordPress: datos est\u00e1ticos<\/h2>\n<p>Para esta publicaci\u00f3n, asumo que ha le\u00eddo la publicaci\u00f3n inicial de la serie y comprende lo que est\u00e1 haciendo el c\u00f3digo (aunque es incluso mejor si tiene alg\u00fan c\u00f3digo que funcione en su entorno de desarrollo local).<\/p>\n<p>Independientemente, hablemos de llenar el cuadro meta con informaci\u00f3n. Es decir, veremos:<\/p>\n<ol>\n<li>poner informaci\u00f3n en el cuerpo de la caja meta,<\/li>\n<li>llenando el t\u00edtulo con contenido.<\/li>\n<\/ol>\n<p>Una vez que hayamos hecho eso, pasaremos a obtener informaci\u00f3n del servidor de forma as\u00edncrona y luego completaremos el c\u00f3digo que tenemos hasta ahora.<\/p>\n<h3>1 Definici\u00f3n de los datos<\/h3>\n<p>Agregar contenido al cuadro meta es realmente f\u00e1cil. Recordar de la publicaci\u00f3n anterior; tenemos un elemento HTML que tiene una <strong>pantalla: ninguno;<\/strong> valor para su atributo de <strong>estilo .<\/strong><\/p>\n<p>Aqu\u00ed est\u00e1 <a href=\"https:\/\/gist.github.com\/tommcfarlin\/1db21634b8b7a88a963b3875553d2539#file-03-adding-the-modal-dialog-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">la esencia 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>Agregar contenido al cuadro de di\u00e1logo modal es f\u00e1cil. Simplemente ubique el elemento <strong>acme-modal-dialog<\/strong> y luego rell\u00e9nelo con cualquier informaci\u00f3n que desee mostrar al usuario.<\/p>\n<p>Por ejemplo, vea <a href=\"https:\/\/gist.github.com\/tommcfarlin\/1db21634b8b7a88a963b3875553d2539#file-04-modal-dialog-content-html\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">este ejemplo de c\u00f3digo<\/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>Cuando el usuario hace clic en el ancla en la publicaci\u00f3n anterior (la que dice <strong>Mostrar el di\u00e1logo<\/strong> ), se mostrar\u00e1 el modal con el contenido que ve arriba.<\/p>\n<p>En t\u00e9rminos generales, deber\u00eda verse como lo que ve arriba seg\u00fan el c\u00f3digo que se describe en la esencia.<\/p>\n<h3>2 Establecer un t\u00edtulo<\/h3>\n<p>A continuaci\u00f3n, observe que el cuadro de di\u00e1logo modal incluye una opci\u00f3n para descartarlo cuando el usuario termine de leerlo. Adem\u00e1s de ofrecer esa capacidad, observe que el \u00e1rea del di\u00e1logo tiene mucho espacio en blanco.<\/p>\n<p>Sabes a lo que me refiero: es un \u00e1rea que generalmente se relega a ser utilizada como barra de t\u00edtulo. Gracias a la API de Thickbox y su integraci\u00f3n con WordPress, podemos agregarlo f\u00e1cilmente a nuestro t\u00edtulo. Puede ser din\u00e1mico (como si la informaci\u00f3n llegara a trav\u00e9s de Ajax) o puede ser est\u00e1tico.<\/p>\n<p>Y dado que estamos trabajando con informaci\u00f3n est\u00e1tica en esta publicaci\u00f3n en particular, configuremos eso. Para hacer esto, necesitamos agregar un\u00a0 atributo de <strong>t\u00edtulo<\/strong> al ancla responsable de mostrar el modal.<\/p>\n<p>Una vez que localice el ancla responsable de activar la visualizaci\u00f3n (recuerde, contiene el texto <strong>Mostrar el di\u00e1logo<\/strong> ), agregue un atributo de t\u00edtulo para que el c\u00f3digo se vea <a href=\"http:\/\/05-adding-a-dialog-title.html\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">as\u00ed<\/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>Ahora, cuando haga clic en el ancla para activar la pantalla, no solo mostrar\u00e1 el cuadro de di\u00e1logo como en la imagen de arriba, sino que tambi\u00e9n contendr\u00e1 un t\u00edtulo:<\/p>\n<\/p>\n<p>\u00datil, \u00bfverdad? Pero, \u00bfy si fuera m\u00e1s din\u00e1mico?<\/p>\n<h2>Ahora en Ajax<\/h2>\n<p>Y la naturaleza din\u00e1mica es lo que busco cubrir a continuaci\u00f3n. Espec\u00edficamente, busco recorrer el proceso de tomar lo que tenemos aqu\u00ed, que son datos est\u00e1ticos y reemplazarlos con informaci\u00f3n recuperada de forma as\u00edncrona.<\/p>\n<p>Es decir, el usuario hace clic en el ancla <strong>Display The Dialog y luego:<\/strong><\/p>\n<ul>\n<li>se hace una solicitud al servidor,<\/li>\n<li>se recuperan los datos,<\/li>\n<li>y luego la informaci\u00f3n se canaliza en el t\u00edtulo y las \u00e1reas de contenido del cuadro de di\u00e1logo.<\/li>\n<\/ul>\n<p>Es un poco mejor que usar informaci\u00f3n est\u00e1tica y lo convierte en una aplicaci\u00f3n m\u00e1s din\u00e1mica.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fuente de grabaci\u00f3n:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Cuando se trabaja con cuadros de di\u00e1logo modales de WordPress, es \u00fatil asegurarse de que incluyan tanto un t\u00edtulo como un contenido. Aqu\u00ed se explica c\u00f3mo hacerlo con datos est\u00e1ticos.<\/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":[892,840,861],"tags":[1172],"class_list":["post-229556","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo","category-tutoriales","category-wordpress-2","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/229556","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/comments?post=229556"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/229556\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/165632"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=229556"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=229556"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=229556"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}