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.

shortcode seo imagenes

¿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.

¡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: