✅ Galerías de Imágenes con Filtros en WordPress (Sin Plugins)

Este conjunto de funciones PHP y JavaScript destaca como una solución ingeniosa para la creación de galerías de imágenes filtrables en entornos WordPress. Al integrar funciones especializadas, este código proporciona una experiencia de usuario enriquecida al permitir la visualización y filtrado interactivo de imágenes.

La función generar_filtros($filtros) se encarga de generar la salida HTML necesaria para los filtros de la galería. Este enfoque modular facilita la personalización de las categorías de filtrado, proporcionando una interfaz clara y amigable para los usuarios.

Por otro lado, la función generar_estilos_css() define reglas de estilo para dar forma y diseño a la galería, asegurando una presentación visual atractiva y coherente. Asimismo, generar_script_js() implementa la lógica interactiva mediante jQuery, permitiendo la filtración dinámica de imágenes y la apertura de modales al hacer clic en cada una.

La función principal galeria_imagenes_shortcode($atts) se encarga de procesar el shortcode [galeria], gestionando atributos como ‘filtros’ e ‘imagenes’. Además, utiliza las funciones previas para construir una salida completa que incluye filtros, imágenes y los scripts necesarios.

Este código no solo ofrece funcionalidad, sino que también demuestra un enfoque cuidadoso en cuanto a seguridad, utilizando funciones como esc_attr para evitar posibles amenazas de seguridad al manipular datos de entrada.

En conclusión, este conjunto de funciones no se limita a ser solo código; es una herramienta que potencia la experiencia visual de un sitio WordPress al proporcionar una galería de imágenes interactiva y filtrable. Representa una fusión exitosa entre funcionalidad técnica y diseño atractivo, subrayando el potencial versátil y poderoso de WordPress en manos de un enfoque creativo y conocimientos sólidos de desarrollo.

El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS.

// Función para generar la salida de los filtros
function generar_filtros($filtros) {
    $output = '<div class="filtro-galeria" style="text-align: center;">';
    $output .= '<a href="#" class="filtro" data-category="all">Todas</a>';
    foreach ($filtros as $filtro) {
        $output .= '<a href="#" class="filtro" data-category="' . esc_attr($filtro) . '">' . esc_html($filtro) . '</a>';
    }
    $output .= '</div>';
    return $output;
}

// Función para generar la salida del CSS
function generar_estilos_css() {
    $output = '<style>
        .filtro-galeria {
            margin-bottom: 20px;
        }

        .filtro-galeria a {
            display: inline-block;
            margin-right: 10px;
            padding: 5px 10px;
            background-color: #eee;
            text-decoration: none;
            color: #333;
            border-radius: 5px;
        }

        .filtro-galeria a:hover {
            background-color: #ddd;
        }

        .galeria-imagenes {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }

        .imagen {
            position: relative;
            margin: 10px;
            perspective: 1000px;
            cursor: pointer;
        }

        .imagen img {
            width: 200px;
            height: 200px;
            transition: transform 0.5s;
        }

        .imagen:hover img {
            transform: scale(1.1);
        }

        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            justify-content: center;
            align-items: center;
        }

        .modal img {
            max-width: 80%;
            max-height: 80%;
            border: 2px solid #fff;
        }
    </style>';
    return $output;
}

// Función para generar la salida del JavaScript
function generar_script_js() {
    $output = '<script>
        jQuery(document).ready(function($) {
            $(".filtro-galeria .filtro").on("click", function(e) {
                e.preventDefault();
                var category = $(this).data("category");
                if (category == "all") {
                    $(".galeria-imagenes .imagen").show();
                } else {
                    $(".galeria-imagenes .imagen").hide();
                    $(".galeria-imagenes .imagen[data-category=\'" + category + "\']").show();
                }
            });

            $(".galeria-imagenes").on("click", ".imagen img", function() {
                var imageSrc = $(this).attr("src");
                var modalHtml = "<div class=\'modal\'><img src=\'" + imageSrc + "\'></div>";
                $("body").append(modalHtml);

                $(".modal img").on("click", function() {
                    $(".modal").remove();
                });
            });
        });
    </script>';
    return $output;
}

// Función principal para mostrar la galería de imágenes con filtro
function galeria_imagenes_shortcode($atts) {
    // Atributos del shortcode [galeria]
    $atts = shortcode_atts(array(
        'filtros' => '',
        'imagenes' => '',
    ), $atts);

    // Convertir las cadenas de filtros e imágenes en arrays
    $filtros = array_map('trim', explode(',', $atts['filtros']));
    $imagenes = array_map('trim', explode(',', $atts['imagenes']));

    // Generar la salida para los filtros
    $output = generar_filtros($filtros);

    // Generar la salida para las imágenes
    $output .= '<div class="galeria-imagenes">';
    foreach ($imagenes as $imagen) {
        // Extraer el ID de la imagen y el filtro asociado
        $parts = explode('_', $imagen);
        $imagen_id = isset($parts[0]) ? intval($parts[0]) : 0;
        $filtro_asociado = isset($parts[1]) ? sanitize_text_field($parts[1]) : '';

        // Mostrar la imagen si tiene un ID válido
        if ($imagen_id) {
            $image_url = wp_get_attachment_image_src($imagen_id, 'full');

            $output .= '<div class="imagen" data-category="' . esc_attr($filtro_asociado) . '">';
            $output .= '<a href="' . esc_url($image_url[0]) . '" target="_blank">';
            $output .= '<img src="' . esc_url($image_url[0]) . '" alt="' . esc_attr(get_post_meta($imagen_id, '_wp_attachment_image_alt', true)) . '" class="hover">';
            $output .= '</a>';
            $output .= '</div>';
        }
    }
    $output .= '</div>';

    // Generar la salida para los estilos CSS
    $output .= generar_estilos_css();

    // Generar la salida para el script JavaScript
    $output .= generar_script_js();

    return $output;
}

// Registramos el shortcode
add_shortcode('galeria', 'galeria_imagenes_shortcode');

Lenguaje del código: PHP (php)

Entendiendo el Código

Función generar_filtros($filtros):

• Objetivo: Generar la salida HTML para los filtros de una galería de imágenes.
• Parámetros:
  • $filtros: Un array que contiene las categorías de filtro.
• Descripción:
  1. Inicializa la variable $output con la apertura de un contenedor <div> con clase «filtro-galeria».
  2. Agrega un enlace especial para mostrar todas las imágenes sin filtrar.
  3. Utiliza un bucle foreach para generar enlaces individuales para cada categoría de filtro.
  4. Cada enlace incluye un atributo data-category que almacena la categoría correspondiente.
  5. Cierra el contenedor <div> y devuelve la salida HTML resultante.

Función generar_estilos_css():

• Objetivo: Generar la salida de estilos CSS para dar formato y diseño a la galería de imágenes.
• Descripción:
  1. Inicializa la variable $output con un bloque de estilos CSS embebido en la función.
  2. Define reglas de estilo para elementos como el contenedor de filtros, los enlaces, las imágenes y la ventana modal.
  3. Devuelve la cadena de texto que contiene todas las reglas de estilo necesarias.

Función generar_script_js():

• Objetivo: Generar la salida del código JavaScript para la funcionalidad interactiva de la galería.
• Descripción:
  1. Inicializa la variable $output con un bloque de script JavaScript embebido en la función.
  2. Utiliza jQuery para gestionar eventos como clics en filtros e imágenes.
  3. Al hacer clic en un filtro, muestra u oculta imágenes según la categoría seleccionada.
  4. Al hacer clic en una imagen, crea dinámicamente un modal que muestra la imagen en tamaño completo.
  5. Al hacer clic en la imagen dentro del modal, cierra el modal.
  6. Devuelve la cadena de texto que contiene el código JavaScript resultante.

Función galeria_imagenes_shortcode($atts):

• Objetivo: Definir el shortcode [galeria] para mostrar una galería de imágenes filtrable.
• Parámetros:
  • $atts: Atributos del shortcode, como ‘filtros’ y ‘imagenes’.
• Descripción:
  1. Procesa los atributos para convertir las cadenas en arrays.
  2. Utiliza las funciones generar_filtros, generar_estilos_css, y generar_script_js para construir la salida completa.
  3. Recorre las imágenes proporcionadas, genera etiquetas HTML y aplica filtros.
  4. Devuelve la salida completa que incluye filtros, imágenes y scripts necesarios.

Uso del Shortcode

Para utilizar el shortcode [galeria] con los atributos filtros e imagenes, sigue estos pasos:

1. Instala y Activa el Código: Asegúrate de que el código esté correctamente integrado en tu tema de WordPress o en un plugin. Puedes agregarlo al archivo functions.php de tu tema hijo o en un plugin personalizado como Code Snippets.
2. Carga Imágenes en WordPress: Asegúrate de tener imágenes cargadas en tu biblioteca de medios de WordPress. Cada imagen debe tener un ID asociado.
3. Usa el Shortcode en tus Páginas o Entradas: Donde desees mostrar la galería, inserta el shortcode [galeria] en tu contenido. Además, puedes agregar los atributos filtros e imagenes según tus necesidades.

Ejemplo:

[galeria filtros="filtro1, filtro2, filtro3" imagenes="12_filtro1, 123_filtro1, 23_filtro2, 56_filtro3"]
Lenguaje del código: JSON / JSON con comentarios (json)

• filtros: Especifica las categorías de filtro que se mostrarán en la galería. En este caso, se han proporcionado tres filtros: «filtro1», «filtro2», y «filtro3».
• imagenes: Lista las imágenes que deseas mostrar en la galería, junto con la categoría de filtro asociada a cada imagen. Cada elemento de la lista sigue el formato ID_imagen_categoria. Por ejemplo, «12_filtro1» significa que la imagen con ID 12 está asociada al filtro «filtro1».

En resumen, este código PHP facilita la inclusión de una galería de imágenes en WordPress mediante un shortcode. La galería es filtrable por categorías, y se ha implementado una interfaz interactiva para mejorar la experiencia del usuario.

Si necesitas adaptar el código a las necesidades de tu proyecto o agregar una funcionalidad específica a tu página web no dudes en contactar conmigo.

Nos vemos en el siguiente tutorial.

Un saludo.