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 

425 Imágenes con peso mayor a 100 KB - Mostrando 50 imagenes

ImagenNombreDimensiones (px)Peso (KB)
videovideo512x5122259
fondo-diseno-web-valencia-1_adobe_expressfondo-diseno-web-valencia-1_adobe_expressx1144
load1load1800x600932
los-errores-más-comunes-en-la-configuración-de-una-tienda-online-y-cómo-evitarlos_optimizedlos-errores-más-comunes-en-la-configuración-de-una-tienda-online-y-cómo-evitarlos_optimized1792x1024755
freepik__enhance__59216freepik__enhance__592162048x1064708
los-plugins-para-wordpress-más-utilizados-en-nuestros-proyectos_optimizedlos-plugins-para-wordpress-más-utilizados-en-nuestros-proyectos_optimized1792x1024672
5-razones-por-las-que-tu-negocio-necesita-una-página-web-_optimized5-razones-por-las-que-tu-negocio-necesita-una-página-web-_optimized1792x1024671
diseño-web-para-promocionar-tus-servicios-de-fontanería-en-valencia_optimizeddiseño-web-para-promocionar-tus-servicios-de-fontanería-en-valencia_optimized1792x1024620
diseño-web-para-destacar-tu-negocio-de-peluquería-en-valencia_optimizeddiseño-web-para-destacar-tu-negocio-de-peluquería-en-valencia_optimized1792x1024592
mantenimiento web wordpressmantenimiento web wordpress1792x1024518
cursoscursos1920x1280463
diseño web para dentistas en valenciadiseño web para dentistas en valencia2560x2053447
macbook-606763_1920macbook-606763_19201920x1275432
DALL·E 2024-04-02 22.50.36 - Design a futuristic banner for a cookie policy panel featuring a stylized, digital web cookie with a bite taken out of it. This cookie should dominateDALL·E 2024-04-02 22.50.36 - Design a futuristic banner for a cookie policy panel featuring a stylized, digital web cookie with a bite taken out of it. This cookie should dominate1792x1024390
cucocan_entradacucocan_entrada1920x660386
portadaportada2560x1708384
ejemploejemplo1144x1277380
DALL·E 2024-04-02 23.05.58 - Design a futuristic and abstract banner for a 'Legal Texts' page, symbolizing the creation and management of legal documents in the digital age. The iDALL·E 2024-04-02 23.05.58 - Design a futuristic and abstract banner for a 'Legal Texts' page, symbolizing the creation and management of legal documents in the digital age. The i1792x1024378
negocio-checknegocio-check1697x960376
contacto.jpgcontacto.jpg1920x1280370
dineño web en la comunidad valencianadineño web en la comunidad valenciana1920x1280364
rocket2rocket2441x430362
cucocanwebcucocanweb2560x1921358
DALL·E 2024-04-02 23.06.26 - Design a banner for a 'Legal Texts' page, incorporating white icons of law symbols—such as scales of justice, a gavel, and legal documents—set againstDALL·E 2024-04-02 23.06.26 - Design a banner for a 'Legal Texts' page, incorporating white icons of law symbols—such as scales of justice, a gavel, and legal documents—set against1792x1024356
knolling midjourneyknolling midjourney1456x816353
animation_300_lacbg5aeanimation_300_lacbg5ae300x300346
diseño web valenciadiseño web valencia412x675337
slide2aslide2a2000x1101337
DALL·E 2024-04-02 22.44.21 - Create a new version of the futuristic contact form banner, closely following the design elements of the previous creation, with an emphasis on the usDALL·E 2024-04-02 22.44.21 - Create a new version of the futuristic contact form banner, closely following the design elements of the previous creation, with an emphasis on the us1792x1024336
DALL·E 2024-04-02 22.41.38 - Create a futuristic contact form banner featuring a white, dashed, wavy line that travels across a digital, abstract background. This line symbolizesDALL·E 2024-04-02 22.41.38 - Create a futuristic contact form banner featuring a white, dashed, wavy line that travels across a digital, abstract background. This line symbolizes1792x1024332
woman-robot,-cosmic-impressionismwoman-robot,-cosmic-impressionism1000x1000322
woman-robot,-pop-art-revivalwoman-robot,-pop-art-revival1000x1000316
web empresas de construcciónweb empresas de construcción1280x853305
contactocontacto1800x986304
woman-robot,-1990s-point-and-click-16bit-adventure-gamewoman-robot,-1990s-point-and-click-16bit-adventure-game1000x1000295
la-máquina-del-branding,-mucho-más-qué-una-academia_optimizedla-máquina-del-branding,-mucho-más-qué-una-academia_optimized1792x1024295
tiletile1000x1000290
diseno web valencia generacionweb wordpress (28)diseno web valencia generacionweb wordpress (28)1792x1024289
¿Necesitas mantenimiento web con Wordpress?¿Necesitas mantenimiento web con Wordpress?2048x1365287
woman-robot,-neon-pop-artwoman-robot,-neon-pop-art1000x1000283
diseno web valencia generacionweb wordpress (16)diseno web valencia generacionweb wordpress (16)1792x1024282
diseno web valencia generacionweb wordpress (30)diseno web valencia generacionweb wordpress (30)1792x1024282
woman-robot,-digital-graffitiwoman-robot,-digital-graffiti1000x1000277
diseno web valencia generacionweb wordpress (26)diseno web valencia generacionweb wordpress (26)1792x1024277
diseno web valencia generacionweb wordpress (24)diseno web valencia generacionweb wordpress (24)1792x1024276
Páginas web para clínicas dentales en ValenciaPáginas web para clínicas dentales en Valencia1280x853272
diseno web valencia generacionweb wordpress (20)diseno web valencia generacionweb wordpress (20)1792x1024271
diseno web valencia generacionweb wordpress (21)diseno web valencia generacionweb wordpress (21)1792x1024269
analiza-tu-competenciaanaliza-tu-competencia2560x1394268
uxux1792x1024268
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: