✅Rellenar Automáticamente los Atributos ALT de las Imágenes de WordPress (Sin Plugins)

La optimización del tiempo y la mejora de la eficiencia son aspectos cruciales en el desarrollo web, y el código presentado ofrece una solución ingeniosa para ahorrar tiempo valioso mientras se optimiza la accesibilidad y el SEO en un entorno WordPress. Al automatizar el llenado del atributo «alt» de las imágenes, este código no solo simplifica las tareas tediosas, sino que también aporta una serie de beneficios significativos que impactan directamente en la calidad y el rendimiento del sitio web.

Beneficios Clave del Código

1. Ahorro de Tiempo:
   • Elimina la necesidad de completar manualmente el atributo «alt» para cada imagen.
   • Permite la automatización del proceso de optimización, liberando tiempo para otras tareas críticas.
2. Optimización para Motores de Búsqueda (SEO):
   • Asegura descripciones adecuadas para las imágenes, mejorando la visibilidad y la clasificación en los motores de búsqueda.
   • Contribuye a una estrategia SEO sólida al cumplir con las mejores prácticas recomendadas.
3. Accesibilidad Mejorada:
   • Facilita la inclusión de información contextual para usuarios con discapacidades visuales.
   • Cumple con estándares de accesibilidad, mejorando la experiencia para un público más amplio.
4. Gestión Eficiente de Contenido Multimedia:
   • Simplifica la administración de grandes volúmenes de imágenes en WordPress.
   • Permite a los administradores de contenido centrarse en aspectos más estratégicos del desarrollo web.
5. Integración Técnica:
   • Utiliza hooks y filtros de WordPress para una integración eficiente en el flujo de trabajo del sistema.
   • Aprovecha JavaScript para mejorar la interfaz de usuario, haciendo la aplicación de acciones masivas más accesible.

Al implementar este código, los desarrolladores y administradores de sitios web experimentarán una mejora significativa en la productividad y eficiencia, al tiempo que garantizan una presencia en línea más accesible y amigable con los motores de búsqueda. Este enfoque no solo ahorra tiempo, sino que también eleva la calidad general del sitio web al adherirse a las mejores prácticas de desarrollo y accesibilidad.

El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS. (Copia el código a partir de la línea 6).

// Función para agregar automáticamente el atributo alt al subir imágenes
function auto_completar_atributo_alt($metadatos, $id_adjunto) {
    // Obtenemos la información de la imagen
    $adjunto = get_post($id_adjunto);
    
    // Verificamos si el atributo alt ya está establecido
    $texto_alt = get_post_meta($id_adjunto, '_wp_attachment_image_alt', true);
    
    // Si el atributo alt está vacío, lo llenamos con el nombre de la imagen
    if (empty($texto_alt)) {
        $titulo_imagen = $adjunto->post_title;
        update_post_meta($id_adjunto, '_wp_attachment_image_alt', $titulo_imagen);
    }
    
    return $metadatos;
}

// Hook para ejecutar la función cuando se sube una imagen
add_filter('wp_generate_attachment_metadata', 'auto_completar_atributo_alt', 10, 2);

// Función para agregar una casilla en la página de medios
function agregar_accion_masiva_personalizada() {
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $('<option>').val('auto_fill_alt').text('<?php esc_attr_e('Rellenar automáticamente el atributo Alt'); ?>').appendTo("select[name='action'], select[name='action2']");
        });
    </script>
    <?php
}

// Hook para agregar la casilla
add_action('admin_footer-upload.php', 'agregar_accion_masiva_personalizada');

// Función para manejar la acción al pulsar la casilla
function manejar_accion_masiva_personalizada() {
    // Verificamos si la acción es la que hemos definido
    if (isset($_REQUEST['action']) && $_REQUEST['action'] == 'auto_fill_alt') {
        $ids_adjuntos = isset($_REQUEST['media']) ? $_REQUEST['media'] : array();

        // Recorremos las imágenes seleccionadas
        foreach ($ids_adjuntos as $id_adjunto) {
            // Llenamos el atributo alt si está vacío
            $texto_alt = get_post_meta($id_adjunto, '_wp_attachment_image_alt', true);
            if (empty($texto_alt)) {
                $titulo_imagen = get_the_title($id_adjunto);
                update_post_meta($id_adjunto, '_wp_attachment_image_alt', $titulo_imagen);
            }
        }
    }
}

// Hook para manejar la acción al pulsar la casilla
add_action('load-upload.php', 'manejar_accion_masiva_personalizada');

Lenguaje del código: PHP (php)

Entendiendo el Código

1. Función auto_completar_atributo_alt:

• Propósito:
  • Automatizar el llenado del atributo «alt» de las imágenes al subirlas.
• Detalles Técnicos:
  • Utiliza el hook wp_generate_attachment_metadata para interceptar la generación de metadatos de un archivo adjunto.
  • Obtiene la información de la imagen con get_post.
  • Verifica si el atributo «alt» ya está establecido con get_post_meta.
  • Si el atributo «alt» está vacío, utiliza update_post_meta para llenarlo con el título de la imagen.

2. Acción Masiva Personalizada – Función agregar_accion_masiva_personalizada:

• Propósito:
  • Extender la funcionalidad de acciones masivas en la interfaz de la página de medios.
• Detalles Técnicos:
  • Incorpora JavaScript para añadir una nueva opción llamada «auto_fill_alt» a las casillas de selección de acciones masivas.
  • Hace uso de esc_attr_e para asegurar la seguridad de los datos de salida en JavaScript.

3. Función manejar_accion_masiva_personalizada:

• Propósito:
  • Gestionar la acción masiva personalizada de llenado automático del atributo «alt».
• Detalles Técnicos:
  • Se engancha al evento load-upload.php para manejar la acción masiva.
  • Verifica si la acción es «auto_fill_alt».
  • Recorre las imágenes seleccionadas y utiliza get_post_meta y update_post_meta para llenar el atributo «alt» si está vacío.

4. Integración de Hooks y Filtros:

• Propósito:
  • Garantizar una integración eficiente en el flujo de trabajo de WordPress.
• Detalles Técnicos:
  • Utiliza los hooks wp_generate_attachment_metadata, admin_footer-upload.php, y load-upload.php.
  • Los hooks se emplean para ejecutar las funciones en momentos específicos del ciclo de vida de WordPress.

5. Enfoque SEO y Accesibilidad:

• Propósito:
  • Mejorar la visibilidad en motores de búsqueda y garantizar una experiencia accesible.
• Detalles Técnicos:
  • Asegura descripciones adecuadas para las imágenes, cumpliendo con estándares de SEO.
  • Contribuye a la accesibilidad al proporcionar información contextual a través del atributo «alt».

6. Mejora de la Interfaz de Usuario con JavaScript:

• Propósito:
  • Facilitar la selección de acciones masivas en la interfaz de usuario.
• Detalles Técnicos:
  • Incorpora JavaScript para agregar opciones de acción masiva de manera dinámica.
  • Utiliza el hook admin_footer-upload.php para inyectar código JavaScript en el pie de página de la interfaz de carga de medios.

En resumen, este código combina cuidadosamente hooks, funciones y JavaScript para automatizar la optimización del atributo «alt» en WordPress, proporcionando beneficios tanto en términos de eficiencia como de cumplimiento de estándares de SEO y accesibilidad. La estructura modular y técnica del código refleja un enfoque avanzado para mejorar la gestión de imágenes en un entorno WordPress.

Nos vemos en el siguiente tutorial. Un saludo.