Integre el cuadro de diálogo modal usando el ThickBox incorporado en WordPress

Los cuadros de diálogo modales a veces deben integrarse necesariamente con un sitio web de WordPress. Usando el diálogo modal, podemos mostrar el contenido en la parte superior de la página actual.

Cuando se trata de ventanas emergentes modales, normalmente la gente prefiere usar la biblioteca Lightbox o Fancybox. Estas son las bibliotecas populares y funcionan bastante bien.

Para incluir estas bibliotecas en WordPress, tenemos que descargar archivos JS y CSS de una biblioteca e incluirla en el proyecto de la manera estándar. Después de eso, según la documentación de la biblioteca, necesitamos ajustar el contenido, llamar al método para abrir la ventana modal.

WordPress incluyó el complemento jQuery de ThickBox con una versión modificada en su núcleo. Y se puede utilizar en lugar de bibliotecas externas. Usando esta característica principal, obtenemos la interfaz que es la misma que las ventanas emergentes modales en el administrador de WordPress como en el botón de medios.

Puede probar esta función incorporada. Si satisface sus necesidades, le ahorrará tiempo al integrar una biblioteca externa.

Usando ThickBox con contenido en línea, obtendrá el resultado como se muestra en la siguiente captura de pantalla.

Cuadro de diálogo modal con ThickBox

WordPress ThickBox funciona bien con el contenido en línea. También se puede usar shortcode en el diálogo modal. Como ejemplo, puede mostrar el formulario de contacto en la ventana modal utilizando el código corto del formulario de contacto 7.

Dicho esto, veamos cómo usar ThickBox en WordPress.

Por ejemplo, estamos mostrando contenido ficticio en línea con el clic de la etiqueta de anclaje. Por lo tanto, coloque el siguiente código donde desee usar el ThickBox.

<?php add_ThickBox(); ?>
<div id="dummy-content-id" style="display:none;">
    <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
</div>
 
<a href="#TB_inline?width=600&height=350&inlineId=dummy-content-id" title="Inline Content" class="ThickBox">View dummy content!</a>

Para usar Thichbox, necesitamos incluir el primer add_ThickBox()método. Esta función carga la biblioteca desde el núcleo. A continuación, en el atributo href de la etiqueta de anclaje, tenemos que pasar #TB_inline junto con el ancho, la altura y la identificación de un contenedor en el que se envuelve nuestro contenido en línea.

De la misma manera, si necesita mostrar el formulario de contacto en el cuadro de diálogo modal, en lugar de contenido ficticio, debe colocar un código corto utilizando la do_shortcode()función de WordPress.

<?php echo do_shortcode('[shortcode_here]'); ?>

¡Eso es! Esperamos que comprenda cómo agregar un cuadro de diálogo modal usando ThickBox en WordPress. Nos gustaría conocer su opinión en el comentario a continuación.

También puede leer nuestros artículos Redirigir a la página de agradecimiento después del envío del formulario de contacto 7 y Cómo guardar los envíos del formulario de contacto 7 en la base de datos de WordPress