Muestra una tabla con las imágenes de WordPress que pesen más de 100k

El siguiente snippet para WordPress te permite generar una tabla que muestra las imágenes de tu sitio que tienen un peso mayor a 100 KB. Esta funcionalidad es especialmente útil para administradores de sitios web que desean optimizar la velocidad de carga de sus páginas, ya que las imágenes grandes pueden afectar negativamente el rendimiento del sitio.

¿Cómo funciona?

Consulta a la base de datos: El snippet comienza haciendo una consulta a la base de datos de WordPress para obtener todas las imágenes (attachments) que están registradas en el sitio.
Filtrado de imágenes: Una vez obtenidas las imágenes, el código filtra aquellas que tienen un peso mayor a 100 KB.
Ordenamiento y limitación: Las imágenes filtradas se ordenan por peso en orden descendente y se limita la salida a las primeras 50 imágenes.
Generación de la tabla: Finalmente, el snippet genera una tabla HTML que muestra una miniatura de cada imagen, su nombre, dimensiones y peso.

Casos de uso del snippet

Optimización del sitio: Si estás buscando mejorar la velocidad de carga de tu sitio web, este snippet te ayudará a identificar rápidamente las imágenes que pueden necesitar optimización o compresión.

Auditoría de contenido: Si eres un administrador de contenido y deseas asegurarte de que todas las imágenes cargadas en el sitio cumplen con ciertos estándares de tamaño, este snippet te será de gran utilidad.

Implementación

Para implementar este snippet en tu sitio WordPress, simplemente copia y pega el código en el archivo functions.php de tu tema o en un plugin personalizado. Una vez hecho esto, podrás usar el shortcode [img_mas_100k] en cualquier entrada o página para mostrar la tabla de imágenes.

Conclusión

Este snippet es una herramienta poderosa para aquellos que buscan optimizar y auditar el contenido de su sitio web en WordPress. Al identificar y actuar sobre las imágenes grandes, puedes mejorar significativamente la experiencia del usuario y la velocidad de carga de tu sitio.

 

function generar_tabla_imagenes_mas_100k() {
    global $wpdb;

    // Obtener las imágenes con peso mayor a 100 KB
    $query = "
        SELECT p.*, pm.meta_value as filesize
        FROM {$wpdb->prefix}posts p
        INNER JOIN {$wpdb->prefix}postmeta pm ON (p.ID = pm.post_id)
        WHERE p.post_type = 'attachment'
            AND p.post_mime_type LIKE 'image/%'
            AND pm.meta_key = '_wp_attached_file'
            AND (pm.meta_value IS NOT NULL AND pm.meta_value <> '')
    ";
    $images = $wpdb->get_results($query);

    // Filtrar y ordenar las imágenes por peso
    $filtered_images = array();
    foreach ($images as $image) {
        $image_path = get_attached_file($image->ID);
        $image_size_kb = round(filesize($image_path) / 1024);
        if ($image_size_kb > 100) {
            $filtered_images[] = array(
                'ID' => $image->ID,
                'url' => wp_get_attachment_url($image->ID),
                'title' => $image->post_title,
                'width' => getimagesize($image_path)[0],
                'height' => getimagesize($image_path)[1],
                'size_kb' => $image_size_kb
            );
        }
    }

    // Ordenar las imágenes por peso descendente
    usort($filtered_images, function($a, $b) {
        return $b['size_kb'] - $a['size_kb'];
    });

    $count = count($filtered_images); // Contador de imágenes con peso mayor a 100 KB

    // Obtener solo las primeras 50 imágenes
    $filtered_images = array_slice($filtered_images, 0, 50);

    // Generar la tabla
    $table = '<table>';
    $table .= '<thead><tr><th>Imagen</th><th>Nombre</th><th>Dimensiones (px)</th><th>Peso (KB)</th></tr></thead>';
    $table .= '<tbody>';

    foreach ($filtered_images as $image) {
        $table .= '<tr>';
        $table .= '<td><a href="' . esc_url(admin_url('post.php?post=' . $image['ID'] . '&action=edit')) . '" target="_blank"><img style="width:100px" src="' . esc_url($image['url']) . '" alt="' . esc_attr($image['title']) . '" /></a></td>';
        $table .= '<td>' . esc_html($image['title']) . '</td>';
        $table .= '<td>' . esc_html($image['width']) . 'x' . esc_html($image['height']) . '</td>';
        $table .= '<td>' . esc_html($image['size_kb']) . '</td>';
        $table .= '</tr>';
    }

    $table .= '</tbody>';
    $table .= '</table>';

    // Generar el texto con el total de imágenes que pesan más de 100 KB
    $total_text = $count . ' Imágenes con peso mayor a 100 KB';

    // Limitar el contador a 50 si hay más de 50 imágenes
    if ($count > 50) {
        $count = 50;
    }

    // Salida
    $output = '';

    // Agregar el texto con el total de imágenes
    $output .= '<p>' . esc_html($total_text) . ' - Mostrando 50 imagenes</p>';

    // Agregar la tabla de imágenes
    $output .= $table;

    return $output;
}
// Función para agregar el shortcode [img_mas_100k]
function shortcode_img_mas_100k() {
    ob_start();
    echo generar_tabla_imagenes_mas_100k();
    $output = ob_get_clean();
    return $output;
}
add_shortcode('img_mas_100k', 'shortcode_img_mas_100k');

 

¡Más Snippets, Más Opciones!

Al compartir, motivamos a más desarrolladores a contribuir. Ayúdanos a hacer de este directorio un punto de referencia en snippets.

Facebook
Twitter
LinkedIn
Telegram
WhatsApp

¿Cómo implementar este snippet en la web?

Tienes 2 opciones, una de ellas es mediante plugin y la otra pegando el código en tu web.

1. Añadir snippet con plugin

code-snippets

Code Snippets

Por Code Snippets Pro

  1. Descarga el plugin o búscalo en el repositorio de plugins de Wordpress e instálalo en tu web.
  2. En el menú lateral del Escritorio verás un nuevo enlace (Fragmetos de código). Ves a Fragmentos de código > Añadir nuevo.
  3. Se abrirá una página con un título, bloque de código, descripción y etiquetas, rellena el título con el que quieras guardarlo, ejemplo: Añadir Google Analytics.
  4. En la parte código verás que está activo PHP, ahí pega el código del snippet
  5. La descripción y las etiquetas solo son para tu información y para que luego encuentres más fácil los snippets.
  6. Publicar y activar el snippet.

2. Añadir snippet en el functions.php

Diseño web con WordPress

Accede al archivo functions.php de tu tema o tema hijo, pega el snippet y guarda el archivo.

Lo encontrarás en Apariencia > Editor de archivos de tema, pinchas sobre el enlace  functions.php y pegas el código al final del archivo.

Relacionados: