{"id":229882,"date":"2022-11-13T10:52:00","date_gmt":"2022-11-13T07:52:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229882"},"modified":"2022-11-09T19:07:40","modified_gmt":"2022-11-09T16:07:40","slug":"adicionando-dialogos-modais-do-wordpress-com-bibliotecas-incorporadas","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/adicionando-dialogos-modais-do-wordpress-com-bibliotecas-incorporadas\/","title":{"rendered":"Adicionando di\u00e1logos modais do WordPress (com bibliotecas incorporadas)"},"content":{"rendered":"\n

Sempre que se trata de desenvolver solu\u00e7\u00f5es para clientes, haver\u00e1 momentos em que voc\u00ea provavelmente ter\u00e1 a tarefa de exibir informa\u00e7\u00f5es nas caixas de di\u00e1logo modais do WordPress.<\/p>\n

Existem muitas solu\u00e7\u00f5es dispon\u00edveis para fazer isso e quanto mais familiarizado voc\u00ea estiver com JavaScript, v\u00e1rias bibliotecas e as bibliotecas que elas t\u00eam dispon\u00edveis, mais dif\u00edcil (ou talvez at\u00e9 mais f\u00e1cil) \u00e9 escolher qual usar.<\/p>\n

Mas o WordPress tem uma infraestrutura integrada que torna trivial incorporar funcionalidades ao WordPress. Ent\u00e3o, em tr\u00eas posts futuros, vou abordar o seguinte:<\/p>\n

    \n
  1. Como incorporar di\u00e1logos modais do WordPress usando bibliotecas integradas,<\/li>\n
  2. Preenchendo os di\u00e1logos modais com dados,<\/li>\n
  3. Preenchendo a caixa de di\u00e1logo modal com dados din\u00e2micos via Ajax.<\/li>\n<\/ol>\n

    Devido \u00e0 natureza da s\u00e9rie, as postagens n\u00e3o ser\u00e3o consecutivas, mas todas usar\u00e3o uma tag exclusiva que voc\u00ea pode usar para marcar e se referir como uma s\u00e9rie quando as postagens forem conclu\u00eddas.<\/p>\n

    Com isso dito, vamos falar sobre como incorporar facilmente os di\u00e1logos modais do WordPress com bibliotecas integradas.<\/p>\n

    Di\u00e1logos Modais do WordPress, Parte 1<\/h2>\n

    Para come\u00e7ar, suponho que voc\u00ea tenha a base b\u00e1sica de uma p\u00e1gina de administra\u00e7\u00e3o.<\/p>\n

    Em p\u00e1ginas de plug-in<\/h3>\n

    Ou seja, voc\u00ea tem tudo o que precisa para obter uma configura\u00e7\u00e3o de plug-in, ativada e, em seguida, uma p\u00e1gina exibida por meio de um menu ou submenu.<\/p>\n

    Se n\u00e3o, confira este post<\/a> para ver como come\u00e7ar.<\/p>\n

    Depois de fazer isso, voc\u00ea precisar\u00e1 da infraestrutura b\u00e1sica para uma p\u00e1gina de plug-in. Esta p\u00e1gina pode ser usada simplesmente para exibir informa\u00e7\u00f5es ou pode ser usada tanto para exibir informa\u00e7\u00f5es quanto para dar ao usu\u00e1rio a capacidade de salvar op\u00e7\u00f5es.<\/p>\n

    Para este tutorial, n\u00e3o estou particularmente interessado em dar ao usu\u00e1rio a capacidade de salvar op\u00e7\u00f5es. Em vez disso, precisamos criar uma \u00e2ncora que exibir\u00e1 uma caixa de di\u00e1logo modal sempre que for clicada.<\/p>\n

    E os dados que ele conter\u00e1 ser\u00e3o abordados em um tutorial posterior.<\/p>\n

    Uma p\u00e1gina de plug-in de exemplo<\/h3>\n

    Neste ponto, estou assumindo que voc\u00ea tem uma p\u00e1gina de plugin. Uma estrutura b\u00e1sica para isso pode ser assim<\/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 da\u00ed, duas coisas s\u00e3o necess\u00e1rias:<\/p>\n
      \n
    1. incorporando a biblioteca Thickbox<\/li>\n
    2. adicionando uma \u00e2ncora e um cont\u00eainer que exibir\u00e1 uma caixa de di\u00e1logo modal<\/li>\n<\/ol>\n
      Para incorporar a biblioteca Thickbox em sua p\u00e1gina de plugin, basta adicionar esta tag. Se voc\u00ea estiver seguindo algum padr\u00e3o de codifica\u00e7\u00e3o, sua p\u00e1gina provavelmente ter\u00e1 um docblock na parte superior da p\u00e1gina. \u00c9 aqui que normalmente adiciono o c\u00f3digo.<\/p>\n
      A\u00a0 fun\u00e7\u00e3o add_thickbox<\/a> \u00e9 fornecida pelo WordPress que faz o seguinte:<\/p>\n
      \n
      Enfileira o ThickBox js e css padr\u00e3o.<\/p>\n<\/blockquote>\n
      Um pouco vago, certo? Tecnicamente, a descri\u00e7\u00e3o mais longa \u00e9:<\/p>\n
      \n
      ThickBox \u00e9 um widget de di\u00e1logo de interface do usu\u00e1rio de p\u00e1gina da Web escrito em JavaScript sobre a biblioteca jQuery. Sua fun\u00e7\u00e3o \u00e9 mostrar uma \u00fanica imagem, v\u00e1rias imagens, conte\u00fado inline, conte\u00fado iframe ou conte\u00fado servido por meio de AJAX em um modal h\u00edbrido.<\/p>\n<\/blockquote>\n
      E se voc\u00ea estiver interessado na biblioteca Thickbox por conta pr\u00f3pria, voc\u00ea pode v\u00ea-la nesta p\u00e1gina<\/a>.<\/p>\n
      Enfim, de volta \u00e0 p\u00e1gina. Agora que estou adicionando-o \u00e0 minha p\u00e1gina de plug-in usando a fun\u00e7\u00e3o da API do WordPress, minha p\u00e1gina se parece com isso<\/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
      Em seguida, a cria\u00e7\u00e3o da \u00e2ncora e do elemento para exibi\u00e7\u00e3o de dados andam de m\u00e3os dadas, porque a \u00e2ncora precisa do ID do elemento que servir\u00e1 como caixa de di\u00e1logo modal.<\/p>\n
      A \u00e2ncora precisa das seguintes informa\u00e7\u00f5es:<\/p>\n