Adición de diálogos modales de WordPress (con bibliotecas integradas)

Siempre que se trate de desarrollar soluciones para clientes, habrá momentos en los que es probable que tenga la tarea de mostrar información en los cuadros de diálogo modales de WordPress.

Hay muchas soluciones disponibles para hacer esto y cuanto más familiarizado esté con JavaScript, varias bibliotecas y las bibliotecas que tienen disponibles, más difícil (o tal vez incluso más fácil) es elegir cuál usar.

Pero WordPress tiene una infraestructura integrada que hace que sea trivial incorporar funcionalidad en WordPress. Entonces, en tres próximas publicaciones, cubriré lo siguiente:

1. Cómo incorporar diálogos modales de WordPress utilizando bibliotecas integradas,
2. Llenar los cuadros de diálogo modales con datos,
3. Llenar el cuadro de diálogo modal con datos dinámicos a través de Ajax.

Debido a la naturaleza de la serie, las publicaciones no serán consecutivas, pero todas usarán una etiqueta única que puede usar para marcar y referirse como una serie una vez que las publicaciones estén completas.

Dicho esto, hablemos de incorporar fácilmente diálogos modales de WordPress con bibliotecas integradas.

Diálogos modales de WordPress, Parte 1

Para comenzar, asumo que tiene la base básica de una página de administración en su lugar.

En páginas de complementos

Es decir, tiene todo lo que necesita para configurar un complemento, activarlo y luego mostrar una página a través de un menú o submenú.

Si no, echa un vistazo a esta publicación para ver cómo empezar.

Una vez que haya hecho eso, necesitará la infraestructura básica para una página de complemento. Esta página se puede usar simplemente para mostrar información o se puede usar tanto para mostrar información como para brindarle al usuario la posibilidad de guardar opciones.

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álogo modal cada vez que se haga clic en él.

Y los datos que contendrá se cubrirán en un tutorial posterior.

Una página de complemento de muestra

En este punto, asumo que tiene una página de complementos. Una estructura básica para esto puede verse así :

<?php
/**
 * A basic plugin page that will eventually be used to demonstrate how to use the
 * Thickbox library included with WordPress.
 *
 * @package Acme
 */
?>

<div id="acme-thickbox-demo" class="wrap">
  <!-- TODO -->
</div><!-- #acme-thickbox-demo -->

A partir de ahí, hay dos cosas que son necesarias:

1. incorporando la biblioteca de Thickbox
2. agregando un ancla y un contenedor que mostrará un diálogo modal

Para incorporar la biblioteca de Thickbox en su página de complementos, simplemente agregue esta etiqueta. Si sigue algún estándar de codificación, es probable que su página tenga un bloque de documentos en la parte superior de la página. Aquí es donde normalmente agrego el código.

La  función add_thickbox es una proporcionada por WordPress que hace lo siguiente:

Pone en cola el js y css predeterminados de ThickBox.

Un poco vago, ¿verdad? Técnicamente, la descripción más larga es:

ThickBox es un widget de diálogo de interfaz de usuario de página web escrito en JavaScript sobre la biblioteca jQuery. Su función es mostrar una sola imagen, varias imágenes, contenido en línea, contenido iframed o contenido servido a través de AJAX en un modo híbrido.

Y si está interesado en la biblioteca de Thickbox por sí sola, puede verla en esta página.

De todos modos, de vuelta a la página. Ahora que lo estoy agregando a mi página de complementos usando la función API de WordPress, mi página se ve así :

<?php
/**
 * A basic plugin page that will eventually be used to demonstrate how to use the
 * Thickbox library included with WordPress.
 *
 * @package Acme
 */
add_thickbox();
?>

<div id="acme-thickbox-demo" class="wrap">
  <!-- TODO -->
</div><!-- #acme-thickbox-demo -->

A continuación, la creación del ancla y el elemento para mostrar datos van de la mano porque el ancla necesita el ID del elemento que servirá como diálogo modal.

El ancla necesita la siguiente información:

• el ID del elemento que mostrará el modal,
• las dimensiones de dicho diálogo modal

Para este ejemplo, voy a configurar un cuadro de diálogo que se muestre a 800 × 600 píxeles y tendrá el ID de acme-modal-dialog.

Nota: Recuerde que es una buena idea prefijar sus elementos con algo relacionado con el nombre de su complemento, para que no surjan conflictos.

Así que crearé un ancla que se vea así :

<?php
/**
 * A basic plugin page that will eventually be used to demonstrate how to use the
 * Thickbox library included with WordPress.
 *
 * @package Acme
 */
add_thickbox();
?>

<div id="acme-thickbox-demo" class="wrap">

  <h1>Acme Thickbox Demo</h1>
  <p>Provides an exmaple of how to use the thickbox library within a WordPress plugin page.</p>

  <div id="acme-thickbox-content">
    <a href="#">Display The Dialog</a>
  </div><!-- #acme-thickbox-content -->

</div><!-- #acme-thickbox-demo -->

Y luego crearé un elemento como este :

<?php
/**
 * A basic plugin page that will eventually be used to demonstrate how to use the
 * Thickbox library included with WordPress.
 *
 * @package Acme
 */
add_thickbox();
?>

<div id="acme-thickbox-demo" class="wrap">

  <h1>Acme Thickbox Demo</h1>
  <p>Provides an exmaple of how to use the thickbox library within a WordPress plugin page.</p>

  <div id="acme-thickbox-content">
    <a href="TB_inline?width=600&height=550&inlineId=acme-modal-dialog" class="thickbox">Display The Dialog</a>
    <div id="acme-modal-dialog" style="display:none;"></div><!-- #acme-modal-dialog -->
  </div><!-- #acme-thickbox-content -->

</div><!-- #acme-thickbox-demo -->

Y el código anterior es el aspecto que tendrá la versión final de la página del complemento. Al hacer clic en el ancla, debería aparecer un cuadro de diálogo vacío con las dimensiones especificadas (es decir, 800 × 600 píxeles).

Por supuesto, estará vacío porque no mostrará ningún dato.

Visualización de datos

En la próxima publicación de la serie, explicaré cómo mostrar datos dentro del contexto del diálogo.

Es fácil, pero es un buen punto de partida si desea comenzar a incorporar datos dinámicos a través de la API REST o Ajax. Pero lo cubriré antes del final de esto.