Edita el ALT y el TITLE de todas las imágenes de la biblioteca desde una tabla

¿Qué es este shortcode para editar imágenes?

Este shortcode presenta una tabla para editar fácilmente los atributos ALT y TITLE de todas las imágenes en tu biblioteca de WordPress. Estos atributos son importantes para la accesibilidad web y el SEO, ya que ayudan a los motores de búsqueda a entender qué representan las imágenes.

¿Cómo funciona la tabla de edición de atributos?

El código proporcionado crea una tabla que muestra todas las imágenes de tu biblioteca, junto con sus atributos ALT y TITLE actuales. Cada fila de la tabla representa una imagen, y puedes editar directamente los atributos ALT y TITLE o añadir nuevos textos a los que están vacios. Los atributos ALT cumplen con los estándares de accesibilidad web internacionales que garantizan que todas las personas puedan acceder a tu contenido visual.

¿Qué acciones puedo realizar en cada imagen?

Además, la tabla tiene botones de «Actualizar» y «Eliminar» para cada imagen. El botón «Actualizar» guarda los cambios que hayas hecho en los atributos ALT y TITLE de la imagen. El botón «Eliminar» te permite eliminar la imagen de tu biblioteca.

¿Cómo se organiza la tabla con muchas imágenes?

La función también incluye una característica de paginación, que divide las imágenes en varias páginas si tienes muchas en tu biblioteca. Esto hace que la tabla sea más manejable y fácil de navegar.

En resumen, este código te permite gestionar y optimizar los atributos ALT y TITLE de tus imágenes de una manera más eficiente, lo que puede ayudar a mejorar la accesibilidad de tu sitio y su rendimiento en los motores de búsqueda.

¿Cómo se usa?

¿Dónde y cómo debo insertar el shortcode?

Añade este shorcode donde quieras mostrarlo, te recomiendo usar páginas en Privado para una mayor protección.

¿Cómo filtrar solo imágenes incompletas?

Si quieres que solo muestre las imágenes que están incompletas, es decir, que le falten el ALT o el TITLE o ambas, entonces usa este otro:

function infoseo_editable_img_shortcode($atts) {
    $atts = shortcode_atts(array(
        'mostrar' => '',
    ), $atts, 'infoseo_editable_img');

    $posts_per_page = 50; 

    $current_page = isset($_GET['infoseo_page']) ? $_GET['infoseo_page'] : 1;

    if ($_SERVER['REQUEST_METHOD'] == 'POST') {
        foreach ($_POST as $key => $value) {
            if (strpos($key, 'update_') !== false) {
                $post_id = str_replace('update_', '', $key);
                $alt_image = $_POST['alt_image_'.$post_id];
                $title_image = $_POST['title_image_'.$post_id];

                if ($post_id) {
                    update_post_meta($post_id, '_wp_attachment_image_alt', $alt_image);
                    wp_update_post(array(
                        'ID' => $post_id,
                        'post_title' => $title_image
                    ));
                }
            }

            if (strpos($key, 'delete_') !== false) {
                $post_id = str_replace('delete_', '', $key);

                if ($post_id) {
                    wp_delete_attachment($post_id, true);
                }
            }
        }
    }

    $args = array(
        'post_type' => 'attachment',
        'post_mime_type' => 'image',
        'post_status' => 'inherit',
        'posts_per_page' => -1, // Get all images
    );

    $attachments = new WP_Query($args);

    $output = '';
    
    $output .= '<style>';
    $output .= 'table.edit_img input, table.edit_img textarea {font-size: 12px;padding: 4px;display: block;}';
    $output .= 'table.edit_img th {background: #4CAF50!important;}';
    $output .= 'table.edit_img input[type="submit"] {background: #8BC34A;border-color: #fff;}';
    $output .= 'table {width: 100%; border-collapse: collapse;}';
    $output .= 'th {background-color: #4CAF50; color: white;}';
    $output .= 'td, th {border: 1px solid #ddd; padding: 15px;}';
    $output .= 'tr:nth-child(even) {background-color: #f2f2f2;}';
    $output .= '.current {background-color: #4CAF50!important;color: white;}';
    $output .= '.paginationinfo {text-align: center;}';
    $output .= '.paginationinfo a {padding: 4px;background: #efefef;margin: 1px;text-decoration: none;font-size: 14px;}';
    $output .= '.paginationinfo a:hover, .paginationinfo a.current {background: #4caf4f;color: #fff;}';
    $output .= '</style>';
    
    $output .= '<table class="edit_img">';
    $output .= '<tr>';
    $output .= '<th>Imagen</th>';
    $output .= '<th>Slug de imagen</th>';
    $output .= '<th>Alt de imagen</th>';
    $output .= '<th>Title de imagen</th>';
    $output .= '<th>Actualizar</th>';
    $output .= '<th>Eliminar</th>';
    $output .= '</tr>';

    $total_images = 0;
    $displayed_images = 0;

    foreach ($attachments->posts as $attachment) {
        $thumbnail_id = $attachment->ID;
        $thumbnail = wp_get_attachment_url($thumbnail_id);
        $slug_image = $thumbnail ? basename($thumbnail) : '';
        $alt_image = get_post_meta($thumbnail_id, '_wp_attachment_image_alt', true);
        $title_image = get_the_title($thumbnail_id);

        // Skip Elementor images
        if (strpos($title_image, 'Elementor-post-screenshot') !== false) {
            continue;
        }

        // Skip images with both alt and title if 'mostrar' is 'incompletos'
        if ($atts['mostrar'] == 'incompletos' && !empty($alt_image) && !empty($title_image)) {
            continue;
        }

        $total_images++;

        // Only display images for the current page
        if ($total_images <= ($current_page - 1) * $posts_per_page || $total_images > $current_page * $posts_per_page) {
            continue;
        }

        $displayed_images++;

        $edit_link = get_edit_post_link($thumbnail_id);

        $output .= '<form method="post"><tr>';
        $output .= '<td><a href="'.$edit_link.'" target="_blank"><img src="'.$thumbnail.'" style="width:100px"></a></td>';
        $output .= '<td>'. $slug_image .'</td>';
        $output .= '<td><input type="text" name="alt_image_'.$thumbnail_id.'" value="'.$alt_image.'"></td>';
        $output .= '<td><input type="text" name="title_image_'.$thumbnail_id.'" value="'.$title_image.'"></td>';
        $output .= '<td><input style="width:100%" type="submit" name="update_'.$thumbnail_id.'" value="Actualizar"></td>';
        $output .= '<td><input style="width:100%; background-color: red" type="submit" name="delete_'.$thumbnail_id.'" value="Eliminar"></td>';
        $output .= '</tr></form>';
    }

    $output .= '</table>';

    $total_pages = ceil($total_images / $posts_per_page);

    $output .= '<div class="paginationinfo">';
    for ($i = 1; $i <= $total_pages; $i++) {
        $current = ($i == $current_page) ? ' class="current"' : '';
        $output .= '<a href="?img_edit=' . $i . '"' . $current . '>' . $i . '</a>';
    }
    $output .= '</div>';

    return $output;
}
add_shortcode('infoseo_editable_img', 'infoseo_editable_img_shortcode');

Editar atributos ALT y TITLE en WordPress

• El shortcode crea una tabla para editar ALT y TITLE de todas las imágenes de tu biblioteca WordPress
• Los atributos ALT y TITLE mejoran la accesibilidad web y el posicionamiento en motores de búsqueda
• Cada imagen tiene botones de Actualizar para guardar cambios y Eliminar para borrarla de la biblioteca
• La paginación divide las imágenes en varias páginas para facilitar la navegación con muchos archivos
• Puedes filtrar solo imágenes incompletas que carezcan de ALT, TITLE o ambos atributos
• Se recomienda usar el shortcode en páginas privadas para mayor protección del sitio