Thickbox nativo en WordPress sin plugins

Thickbox es una función de javascript que nos permite mostrar imágenes sobre una ventana emergente y sin necesidad de abrir una ventana nueva o salir de la página actual.

Podemos usar el thickbox en nuestras imágenes de WordPress sin necesidad de instalar ningún plugin adicional, usando el Jquery y el thickbox que vienen por defecto en WordPress.

Para hacer que todas nuestras imágenes se habrán con thickbox debemos ponerles la clase thickbox. Podemos hacer esto automaticamente añadiendo en la sección de footer scripts de nuestro tema este código:

<script>
jQuery(document).ready(function() {
    jQuery("img").parent("a").addClass("thickbox");
});
</script>

La sección de footer scripts dependerá del tema que estemos usando. Por ejemplo, en los temas de Genesis añadiremos el código desde Genesis, theme settings. En el tema GeneratePress necesitaremos el módulo premium de hooks.

Si después de añadir este código no se abren las imágenes con thickbox, debemos añadir este otro código a la cabecera de nuestro tema:

<?php wp_enqueue_style('thickbox'); ?>
<?php wp_enqueue_script('jquery'); ?>
<?php wp_enqueue_script('thickbox'); ?>

Podemos hacerlo desde Apariencia, editor de temas, header.php, justo antes del </head>, aunque es más recomendable comprobar si el propio tema tiene un editor de hooks y añadirlo desde ahí a la cabecera. Por ejemplo el tema GeneratePress tiene un módulo premium de hooks, o los temas de Genesis tienen el plugin Genesis Simple Hooks (este código no vale desde los ajustes de theme settings porque es PHP)

Si queremos navegar entre las imágenes a través de thickbox debemos, al insertarlas, indicar, en relación del enlace el texto que queramos, el mismo en todas.

Para que haga esto automaticamente añadiremos al código anterior del footer esto:

jQuery("img").parent("a").attr('rel', 'galeria');

Adjuntamos un código CSS para personalizar la galería de WordPress, que ajusta la cuadrícula en caso de usar imágenes verticales con horizontales:

.gallery {
   margin: auto;
}
.gallery-item {
   float: left;
   margin-top: 10px;
   text-align: center;
   width: 33%;
}
.gallery img {
   border: 2px solid #cfcfcf;
   max-height: 10em;
   object-fit: cover;
   object-position: center;
}
.gallery-caption {
   margin-left: 0;
}