Usar el Thickbox nativo de WordPress

WordPress incluye en sus librerías el sistema de ventana modal Thickbox, el cual podemos aprovechar usando el siguiente código en el archivo functions.php de nuestro tema:

function add_themescript(){
 if(!is_admin()){
 wp_enqueue_script('jquery');
 wp_enqueue_script('thickbox',null,array('jquery'));
 wp_enqueue_style('thickbox.css', '/'.WPINC.'/js/thickbox/thickbox.css', null, '1.0');
 }
}
add_action('init','add_themescript');

Adicionalmente, para llamar las imágenes de precarga y cierre de la ventana modal debemos incluir en nuestro footer.php, antes de la etiqueta wp_footer() lo siguiente:

<script type="text/javascript">
if ( typeof tb_pathToImage != 'string' )
{
    var tb_pathToImage = "<?php echo get_bloginfo('url').'/wp-includes/js/thickbox'; ?>/loadingAnimation.gif";
}
if ( typeof tb_closeImage != 'string' )
{
    var tb_closeImage = "<?php echo get_bloginfo('url').'/wp-includes/js/thickbox'; ?>/tb-close.png";
}
</script>

Para usar el thickbox en un enlace, ya sea imagen o contenido web la estructura de la etiqueta de vínculo debe ser algo como:

<a href="http://mipagina.com/seccion?height=450&width=600&TB_iframe=true" class="thickbox">Haz clic aquí</a>

 Uso condicional del script

Como nos sugiere Yoast, podemos condicionar el uso del script para páginas específicas así:

function yst_conditional_thickbox() {
  global $post;
  if (is_singular() &&
    strpos($post->post_content,'class="thickbox"') !== false) {
      wp_enqueue_script('thickbox');
      wp_enqueue_style('thickbox');
  }
}
add_action('wp_print_styles','yst_conditional_thickbox');
Scroll al inicio