Activar el Lightbox en WordPress sin Plugins

El efecto lightbox permite mostrar imágenes en una ventana emergente elegante cuando los usuarios hacen clic en ellas, mejorando significativamente la experiencia de visualización. Aunque existen muchos plugins para esto, puedes implementarlo fácilmente con código sin sobrecargar tu sitio.

Método 1: Usar Thickbox (Incluido en WordPress)

WordPress incluye Thickbox de forma nativa, una librería lightbox que solo necesita ser activada. Agrega este código a tu archivo functions.php:

// Activar Thickbox en WordPress
function activar_lightbox_thickbox() {
    // Cargar los scripts y estilos de Thickbox
    wp_enqueue_script('thickbox');
    wp_enqueue_style('thickbox');
    
    // Agregar clase thickbox a imágenes enlazadas
    ?>
    <script type="text/javascript">
    jQuery(document).ready(function($) {
        $('a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".gif"]').addClass('thickbox');
    });
    </script>
    <?php
}
add_action('wp_footer', 'activar_lightbox_thickbox');

Método 2: Lightbox Personalizado con CSS y JavaScript

Para un control total sobre el diseño y funcionalidad, puedes crear tu propio lightbox. Este código incluye navegación entre imágenes y cierre al hacer clic fuera:

// Lightbox personalizado para WordPress
function lightbox_personalizado() {
    if(!is_admin()) { 
    ?>
    <style>
    .lightbox {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 999999;
        background-color: rgba(0, 0, 0, 0.85);
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: zoom-out;
    }
    
    .lightbox-content {
        max-width: 90%;
        max-height: 90vh;
        position: relative;
    }
    
    .lightbox-content img {
        max-width: 100%;
        max-height: 90vh;
        object-fit: contain;
        border-radius: 4px;
        box-shadow: 0 0 30px rgba(0,0,0,0.5);
    }
    
    .lightbox-close {
        position: absolute;
        top: 20px;
        right: 20px;
        color: white;
        font-size: 40px;
        cursor: pointer;
        z-index: 1000000;
    }
    </style>
    
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        // Seleccionar todas las imágenes enlazadas a archivos
        const imageLinks = document.querySelectorAll('a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".gif"]');
        
        imageLinks.forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                const imgSrc = this.getAttribute('href');
                
                // Crear estructura del lightbox
                const lightbox = document.createElement('div');
                lightbox.className = 'lightbox';
                lightbox.innerHTML = `
                    <span class="lightbox-close">×</span>
                    <div class="lightbox-content">
                        <img src="${imgSrc}" alt="">
                    </div>
                `;
                
                document.body.appendChild(lightbox);
                
                // Cerrar al hacer clic
                lightbox.addEventListener('click', function(e) {
                    if (e.target === lightbox || e.target.className === 'lightbox-close') {
                        document.body.removeChild(lightbox);
                    }
                });
                
                // Cerrar con tecla ESC
                document.addEventListener('keydown', function(e) {
                    if (e.key === 'Escape' && document.querySelector('.lightbox')) {
                        document.body.removeChild(lightbox);
                    }
                });
            });
        });
    });
    </script>
    <?php
    }
}
add_action('wp_footer', 'lightbox_personalizado');

Activar Lightbox Nativo de WordPress (Gutenberg)

Si usas el editor de bloques de WordPress, puedes activar el lightbox nativo sin código adicional:

• Selecciona la imagen en el editor de bloques
• En el panel derecho, busca la configuración de enlace
• Marca la opción «Ampliar al hacer clic» o «Expandir al hacer clic»
• Publica o actualiza la página

Configurar Enlaces de Medios Correctamente

Para que el lightbox funcione correctamente, las imágenes deben estar enlazadas al archivo de medios completo:

• Selecciona la imagen en el editor
• Haz clic en el icono de enlace
• Elige «Archivo multimedia» como destino del enlace
• Guarda los cambios

Ventajas de Implementar Lightbox sin Plugins

Al usar código en lugar de plugins, reduces el número de recursos cargados en tu sitio, lo que mejora el rendimiento y la velocidad de carga. Además, tienes control total sobre el diseño y comportamiento del lightbox, pudiendo personalizarlo según las necesidades de tu sitio. No dependes de actualizaciones de terceros ni de compatibilidad con otras herramientas.

Recomendaciones

Siempre utiliza un tema hijo para aplicar estos cambios, evitando que se pierdan con actualizaciones del tema. Prueba el lightbox en diferentes dispositivos y navegadores para asegurarte de que funciona correctamente. Si ya tienes un plugin de galería activo, verifica que no entre en conflicto con el código personalizado.