SEO para imágenes que muestra una tabla para añadir o editar su Alt y Title

Este snippet de código permite a los usuarios de WordPress editar las propiedades de las imágenes directamente desde el front-end de su sitio web. El código crea un shortcode que muestra una tabla con todas las imágenes adjuntas, permitiendo la edición de los atributos Alt y Title de cada imagen. También ofrece la opción de eliminar imágenes.

¿Cómo Funciona?

El snippet utiliza el shortcode [infoseo_editable_img] para mostrar una tabla que lista todas las imágenes adjuntas en su sitio WordPress. Recuerda pegar el shortcode en una página con visibilidad Privada para que nadie acceda a la tabla. Cada fila de la tabla contiene:

• Una miniatura de la imagen.
• El slug de la imagen.
• Un campo de texto para editar el atributo Alt.
• Un campo de texto para editar el atributo Title.
• Un botón para actualizar los cambios.
• Un botón para eliminar la imagen.

Si sólo quieres que te muestre las imágenes incompletas, es decir que le falte el Alt o el Title o ambas, usa este código:
[infoseo_editable_img mostrar="incompletos"]

Flujo de Trabajo

1. Mostrar Imágenes: El snippet recupera todas las imágenes adjuntas en su sitio WordPress.
2. Editar Atributos: Los campos de texto permiten editar los atributos Alt y Title de cada imagen.
3. Actualizar o Eliminar: Los botones de «Actualizar» y «Eliminar» permiten guardar los cambios o eliminar la imagen, respectivamente.

Instalación del Snippet

1. Ve a tu panel de administración de WordPress.
2. Navega a Apariencia > Editor de Temas.
3. Encuentra el archivo functions.php de tu tema activo.
4. Copia y pega el snippet al final del archivo.
5. Guarda los cambios.

// Editar Imagenes WordPress
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="?infoseo_page=' . $i . '"' . $current . '>' . $i . '</a>';
    }
    $output .= '</div>';

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

Casos de Uso

• Gestión de SEO: Editar los atributos Alt y Title puede mejorar la accesibilidad y el SEO de tu sitio.
• Limpieza de Medios: Eliminar imágenes no utilizadas directamente desde el front-end.
• Edición Rápida: Ideal para sitios con una gran cantidad de imágenes que requieren edición frecuente.

Limitaciones y Consideraciones

• Paginación: El snippet muestra un máximo de 50 imágenes por página. Puedes ajustar este número modificando la variable $posts_per_page.
• Imágenes de Elementor: El snippet omite las imágenes que tienen «Elementor-post-screenshot» en su título.
• Acceso Directo: Este snippet no restringe quién puede ver o utilizar la tabla de edición. Asegúrate de implementar controles de acceso si es necesario.

Conclusión

Este snippet es una herramienta poderosa para la gestión de imágenes en WordPress, especialmente útil para la edición rápida de atributos Alt y Title, que son cruciales para el SEO. Sin embargo, asegúrate de implementar las medidas de seguridad adecuadas para evitar cualquier manipulación no deseada.