{"id":229473,"date":"2022-11-13T10:12:00","date_gmt":"2022-11-13T07:12:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229473"},"modified":"2022-11-09T07:14:38","modified_gmt":"2022-11-09T04:14:38","slug":"adicion-de-dialogos-modales-de-wordpress-con-bibliotecas-integradas","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/adicion-de-dialogos-modales-de-wordpress-con-bibliotecas-integradas\/","title":{"rendered":"Adici\u00f3n de di\u00e1logos modales de WordPress (con bibliotecas integradas)"},"content":{"rendered":"\n

Siempre que se trate de desarrollar soluciones para clientes, habr\u00e1 momentos en los que es probable que tenga la tarea de mostrar informaci\u00f3n en los cuadros de di\u00e1logo modales de WordPress.<\/p>\n

Hay muchas soluciones disponibles para hacer esto y cuanto m\u00e1s familiarizado est\u00e9 con JavaScript, varias bibliotecas y las bibliotecas que tienen disponibles, m\u00e1s dif\u00edcil (o tal vez incluso m\u00e1s f\u00e1cil) es elegir cu\u00e1l usar.<\/p>\n

Pero WordPress tiene una infraestructura integrada que hace que sea trivial incorporar funcionalidad en WordPress. Entonces, en tres pr\u00f3ximas publicaciones, cubrir\u00e9 lo siguiente:<\/p>\n

    \n
  1. C\u00f3mo incorporar di\u00e1logos modales de WordPress utilizando bibliotecas integradas,<\/li>\n
  2. Llenar los cuadros de di\u00e1logo modales con datos,<\/li>\n
  3. Llenar el cuadro de di\u00e1logo modal con datos din\u00e1micos a trav\u00e9s de Ajax.<\/li>\n<\/ol>\n

    Debido a la naturaleza de la serie, las publicaciones no ser\u00e1n consecutivas, pero todas usar\u00e1n una etiqueta \u00fanica que puede usar para marcar y referirse como una serie una vez que las publicaciones est\u00e9n completas.<\/p>\n

    Dicho esto, hablemos de incorporar f\u00e1cilmente di\u00e1logos modales de WordPress con bibliotecas integradas.<\/p>\n

    Di\u00e1logos modales de WordPress, Parte 1<\/h2>\n

    Para comenzar, asumo que tiene la base b\u00e1sica de una p\u00e1gina de administraci\u00f3n en su lugar.<\/p>\n

    En p\u00e1ginas de complementos<\/h3>\n

    Es decir, tiene todo lo que necesita para configurar un complemento, activarlo y luego mostrar una p\u00e1gina a trav\u00e9s de un men\u00fa o submen\u00fa.<\/p>\n

    Si no, echa un vistazo a esta publicaci\u00f3n<\/a> para ver c\u00f3mo empezar.<\/p>\n

    Una vez que haya hecho eso, necesitar\u00e1 la infraestructura b\u00e1sica para una p\u00e1gina de complemento. Esta p\u00e1gina se puede usar simplemente para mostrar informaci\u00f3n o se puede usar tanto para mostrar informaci\u00f3n como para brindarle al usuario la posibilidad de guardar opciones.<\/p>\n

    Para este tutorial, no estoy particularmente interesado en darle al usuario la posibilidad de guardar opciones. En su lugar, necesitamos crear un ancla que muestre un cuadro de di\u00e1logo modal cada vez que se haga clic en \u00e9l.<\/p>\n

    Y los datos que contendr\u00e1 se cubrir\u00e1n en un tutorial posterior.<\/p>\n

    Una p\u00e1gina de complemento de muestra<\/h3>\n

    En este punto, asumo que tiene una p\u00e1gina de complementos. Una estructura b\u00e1sica para esto puede verse as\u00ed<\/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 de ah\u00ed, hay dos cosas que son necesarias:<\/p>\n
      \n
    1. incorporando la biblioteca de Thickbox<\/li>\n
    2. agregando un ancla y un contenedor que mostrar\u00e1 un di\u00e1logo modal<\/li>\n<\/ol>\n
      Para incorporar la biblioteca de Thickbox en su p\u00e1gina de complementos, simplemente agregue esta etiqueta. Si sigue alg\u00fan est\u00e1ndar de codificaci\u00f3n, es probable que su p\u00e1gina tenga un bloque de documentos en la parte superior de la p\u00e1gina. Aqu\u00ed es donde normalmente agrego el c\u00f3digo.<\/p>\n
      La\u00a0 funci\u00f3n add_thickbox<\/a> es una proporcionada por WordPress que hace lo siguiente:<\/p>\n
      \n
      Pone en cola el js y css predeterminados de ThickBox.<\/p>\n<\/blockquote>\n
      Un poco vago, \u00bfverdad? T\u00e9cnicamente, la descripci\u00f3n m\u00e1s larga es:<\/p>\n
      \n
      ThickBox es un widget de di\u00e1logo de interfaz de usuario de p\u00e1gina web escrito en JavaScript sobre la biblioteca jQuery. Su funci\u00f3n es mostrar una sola imagen, varias im\u00e1genes, contenido en l\u00ednea, contenido iframed o contenido servido a trav\u00e9s de AJAX en un modo h\u00edbrido.<\/p>\n<\/blockquote>\n
      Y si est\u00e1 interesado en la biblioteca de Thickbox por s\u00ed sola, puede verla en esta p\u00e1gina<\/a>.<\/p>\n
      De todos modos, de vuelta a la p\u00e1gina. Ahora que lo estoy agregando a mi p\u00e1gina de complementos usando la funci\u00f3n API de WordPress, mi p\u00e1gina se ve as\u00ed<\/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
      A continuaci\u00f3n, la creaci\u00f3n del ancla y el elemento para mostrar datos van de la mano porque el ancla necesita el ID del elemento que servir\u00e1 como di\u00e1logo modal.<\/p>\n
      El ancla necesita la siguiente informaci\u00f3n:<\/p>\n