{"id":229962,"date":"2022-11-15T17:07:00","date_gmt":"2022-11-15T14:07:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229962"},"modified":"2022-11-15T17:08:20","modified_gmt":"2022-11-15T14:08:20","slug":"adicionando-dialogos-modais-do-wordpress-usando-dados-estaticos","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/adicionando-dialogos-modais-do-wordpress-usando-dados-estaticos\/","title":{"rendered":"Adicionando di\u00e1logos modais do WordPress (usando dados est\u00e1ticos)"},"content":{"rendered":"\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/adicionando-dialogos-modais-do-wordpress-com-bibliotecas-incorporadas\/\" title=\"No post anterior\">No post anterior<\/a>, eu percorri o processo necess\u00e1rio para que os di\u00e1logos modais do WordPress apare\u00e7am dentro do contexto da \u00e1rea de administra\u00e7\u00e3o.<\/p>\n<p>Isso usa:<\/p>\n<ul>\n<li>a API interna do WordPress,<\/li>\n<li>a biblioteca Thickbox fornecida,<\/li>\n<li>e algum c\u00f3digo de exemplo para exibi-lo.<\/li>\n<\/ul>\n<p>Neste tutorial, mostrarei como preencher a caixa de di\u00e1logo modal com dados. Depois disso, compartilharei como preencher os dados dinamicamente usando Ajax.<\/p>\n<h2>Caixas de di\u00e1logo modais do WordPress: dados est\u00e1ticos<\/h2>\n<p>Para este post, suponho que voc\u00ea tenha lido o post inicial da s\u00e9rie e tenha uma compreens\u00e3o do que o c\u00f3digo est\u00e1 fazendo (embora seja ainda melhor se voc\u00ea tiver algum c\u00f3digo funcionando em seu ambiente de desenvolvimento local).<\/p>\n<p>Independentemente disso, vamos falar sobre preencher a meta box com informa\u00e7\u00f5es. Ou seja, veremos:<\/p>\n<ol>\n<li>colocando informa\u00e7\u00f5es no corpo da meta box,<\/li>\n<li>preenchendo o t\u00edtulo com conte\u00fado.<\/li>\n<\/ol>\n<p>Feito isso, passaremos a obter informa\u00e7\u00f5es do servidor de forma ass\u00edncrona e, em seguida, preencher o c\u00f3digo que temos at\u00e9 agora.<\/p>\n<h3>1 Definindo os Dados<\/h3>\n<p>Adicionar conte\u00fado \u00e0 caixa meta \u00e9 muito f\u00e1cil. Relembre do post anterior; temos um elemento HTML que possui um <strong>display: none;<\/strong> valor para seu atributo de <strong>estilo .<\/strong><\/p>\n<p>Aqui 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\">a ess\u00eancia 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>Adicionar conte\u00fado \u00e0 caixa de di\u00e1logo modal \u00e9 f\u00e1cil. Basta localizar o elemento <strong>acme-modal-dialog<\/strong> e preench\u00ea-lo com as informa\u00e7\u00f5es que voc\u00ea deseja exibir ao usu\u00e1rio.<\/p>\n<p>Por exemplo, veja <a href=\"https:\/\/gist.github.com\/tommcfarlin\/1db21634b8b7a88a963b3875553d2539#file-04-modal-dialog-content-html\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">este exemplo 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>Quando o usu\u00e1rio clicar na \u00e2ncora do post anterior (aquele que diz <strong>Display The Dialog<\/strong> ), ent\u00e3o o modal ser\u00e1 exibido com o conte\u00fado que voc\u00ea v\u00ea acima.<\/p>\n<p>De um modo geral, deve se parecer com o que voc\u00ea v\u00ea acima com base no c\u00f3digo descrito na ess\u00eancia.<\/p>\n<h3>2 Definir um t\u00edtulo<\/h3>\n<p>Em seguida, observe que a caixa de di\u00e1logo modal inclui uma op\u00e7\u00e3o para descart\u00e1-la sempre que o usu\u00e1rio terminar de l\u00ea-la. Al\u00e9m de oferecer essa capacidade, observe que a \u00e1rea da caixa de di\u00e1logo tem muito espa\u00e7o em branco.<\/p>\n<p>Voc\u00ea sabe o que quero dizer: \u00e9 uma \u00e1rea que geralmente \u00e9 relegada a ser usada como uma barra de t\u00edtulo. Gra\u00e7as \u00e0 API Thickbox e sua integra\u00e7\u00e3o com o WordPress, podemos facilmente adicion\u00e1-lo ao nosso t\u00edtulo. Pode ser din\u00e2mico (como se a informa\u00e7\u00e3o viesse via Ajax) ou pode ser est\u00e1tico.<\/p>\n<p>E j\u00e1 que estamos trabalhando com informa\u00e7\u00f5es est\u00e1ticas neste post em particular, vamos configurar isso. Para isso, precisamos adicionar um atributo <strong>title \u00e0 \u00e2ncora respons\u00e1vel por exibir o modal.<\/strong><\/p>\n<p>Depois de localizar a \u00e2ncora respons\u00e1vel por acionar a exibi\u00e7\u00e3o (lembre-se, ela cont\u00e9m o texto <strong>Display The Dialog<\/strong> ), adicione um atributo title a ela para que o c\u00f3digo fique <a href=\"http:\/\/05-adding-a-dialog-title.html\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">assim<\/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>Agora, quando voc\u00ea clicar na \u00e2ncora para acionar a exibi\u00e7\u00e3o, ela n\u00e3o apenas mostrar\u00e1 a caixa de di\u00e1logo como na foto acima, mas tamb\u00e9m conter\u00e1 um t\u00edtulo:<\/p>\n<\/p>\n<p>\u00datil, certo? Mas e se fosse mais din\u00e2mico?<\/p>\n<h2>Agora no Ajax<\/h2>\n<p>E a natureza din\u00e2mica \u00e9 o que pretendo abordar a seguir. Especificamente, estou procurando percorrer o processo de pegar o que temos aqui, que s\u00e3o dados est\u00e1ticos e substitu\u00ed-los por informa\u00e7\u00f5es recuperadas de forma ass\u00edncrona.<\/p>\n<p>Ou seja, o usu\u00e1rio clica na \u00e2ncora <strong>Exibir a caixa de di\u00e1logo e depois:<\/strong><\/p>\n<ul>\n<li>uma solicita\u00e7\u00e3o \u00e9 feita ao servidor,<\/li>\n<li>os dados s\u00e3o recuperados,<\/li>\n<li>e, em seguida, as informa\u00e7\u00f5es s\u00e3o canalizadas para o t\u00edtulo e as \u00e1reas de conte\u00fado da caixa de di\u00e1logo.<\/li>\n<\/ul>\n<p>\u00c9 um pouco melhor do que usar informa\u00e7\u00f5es est\u00e1ticas e torna o aplicativo mais din\u00e2mico.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte de grava\u00e7\u00e3o:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ao trabalhar com di\u00e1logos modais do WordPress, \u00e9 \u00fatil garantir que eles incluam um t\u00edtulo e conte\u00fado. Veja como fazer isso com dados 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":[898,846,867],"tags":[1170],"class_list":["post-229962","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo-2","category-tutoriais","category-wordpress-8","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/229962","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/comments?post=229962"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/229962\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/165632"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=229962"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=229962"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=229962"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}