Agregar diálogos modales de WordPress (usando datos estáticos)
En la publicación anterior, expuse el proceso necesario para que los cuadros de diálogo modales de WordPress aparezcan en el contexto del área de administración.
Esto usa:
- la API de WordPress incorporada,
- la biblioteca de Thickbox provista,
- y algún código de ejemplo para que se muestre.
En este tutorial, explicaré cómo llenar el cuadro de diálogo modal con datos. Después de eso, compartiré cómo completar los datos dinámicamente usando Ajax.
Diálogos modales de WordPress: datos estáticos
Para esta publicación, asumo que ha leído la publicación inicial de la serie y comprende lo que está haciendo el código (aunque es incluso mejor si tiene algún código que funcione en su entorno de desarrollo local).
Independientemente, hablemos de llenar el cuadro meta con información. Es decir, veremos:
- poner información en el cuerpo de la caja meta,
- llenando el título con contenido.
Una vez que hayamos hecho eso, pasaremos a obtener información del servidor de forma asíncrona y luego completaremos el código que tenemos hasta ahora.
1 Definición de los datos
Agregar contenido al cuadro meta es realmente fácil. Recordar de la publicación anterior; tenemos un elemento HTML que tiene una pantalla: ninguno; valor para su atributo de estilo .
Aquí está la esencia original :
<?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 -->Agregar contenido al cuadro de diálogo modal es fácil. Simplemente ubique el elemento acme-modal-dialog y luego rellénelo con cualquier información que desee mostrar al usuario.
Por ejemplo, vea este ejemplo de código :
<div id="acme-modal-dialog" style="display:none;">
<h2>Hello World</h2>
<p>Lucas ipsum dolor sit amet ventress dak jusik chewbacca tenel beru bail anomid hapes mas.</p>
<p>Fel kalee kyle desann. Ozzel p'w'eck jax castell saleucami. Thisspias veila mantell mccool garindan jax.</p>
<p>Barriss kurtzen sing bertroff cody frozarns. Han koon miraluka vau.</p>
<p>
<ul>
<li>Bajic asajj boba raymus dug piell moddell jax darth.</li>
<li>Sio anakin naberrie shistavanen fisto utapau chewbacca aayla.</li>
</ul>
</p>
<p>
Corran axmis kor-uj hutt marek kenobi ansuroer echani. Mirax mara fisto bith tyranus kashyyyk farlander max b'omarr.
Ben dodonna askajian teevan palpatine lobot beru.
</p>
</div><!-- #acme-modal-dialog -->Cuando el usuario hace clic en el ancla en la publicación anterior (la que dice Mostrar el diálogo ), se mostrará el modal con el contenido que ve arriba.
En términos generales, debería verse como lo que ve arriba según el código que se describe en la esencia.
2 Establecer un título
A continuación, observe que el cuadro de diálogo modal incluye una opción para descartarlo cuando el usuario termine de leerlo. Además de ofrecer esa capacidad, observe que el área del diálogo tiene mucho espacio en blanco.
Sabes a lo que me refiero: es un área que generalmente se relega a ser utilizada como barra de título. Gracias a la API de Thickbox y su integración con WordPress, podemos agregarlo fácilmente a nuestro título. Puede ser dinámico (como si la información llegara a través de Ajax) o puede ser estático.
Y dado que estamos trabajando con información estática en esta publicación en particular, configuremos eso. Para hacer esto, necesitamos agregar un atributo de título al ancla responsable de mostrar el modal.
Una vez que localice el ancla responsable de activar la visualización (recuerde, contiene el texto Mostrar el diálogo ), agregue un atributo de título para que el código se vea así :
<a href="TB_inline?width=600&height=550&inlineId=acme-modal-dialog" title="Hello World" class="thickbox">Display The Dialog</a>Ahora, cuando haga clic en el ancla para activar la pantalla, no solo mostrará el cuadro de diálogo como en la imagen de arriba, sino que también contendrá un título:
Útil, ¿verdad? Pero, ¿y si fuera más dinámico?
Ahora en Ajax
Y la naturaleza dinámica es lo que busco cubrir a continuación. Específicamente, busco recorrer el proceso de tomar lo que tenemos aquí, que son datos estáticos y reemplazarlos con información recuperada de forma asíncrona.
Es decir, el usuario hace clic en el ancla Display The Dialog y luego:
- se hace una solicitud al servidor,
- se recuperan los datos,
- y luego la información se canaliza en el título y las áreas de contenido del cuadro de diálogo.
Es un poco mejor que usar información estática y lo convierte en una aplicación más dinámica.