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 Imagen Slug de imagen Alt de imagen Title de imagen Actualizar Eliminar
- 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:
Imagen Slug de imagen Alt de imagen Title de imagen Actualizar Eliminar
Flujo de Trabajo
- Mostrar Imágenes: El snippet recupera todas las imágenes adjuntas en su sitio WordPress.
- Editar Atributos: Los campos de texto permiten editar los atributos
AltyTitlede cada imagen. - Actualizar o Eliminar: Los botones de «Actualizar» y «Eliminar» permiten guardar los cambios o eliminar la imagen, respectivamente.
Instalación del Snippet
- Ve a tu panel de administración de WordPress.
- Navega a
Apariencia > Editor de Temas. - Encuentra el archivo
functions.phpde tu tema activo. - Copia y pega el snippet al final del archivo.
- 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
AltyTitlepuede 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.
