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

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.

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.

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.

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?

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

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');