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');
Deja una respuesta