Questo tutorial è utile se stai disegnando un template personalizzato, o se conosci abbastanza bene la struttura di WordPress da poter mettere mano ai file base di un tema (acquistato o scaricato gratuitamente). Lo considero un esercizio di “medio-bassa” difficoltà.
L’origine del problema…
Quando carichi un’immagine all’interno di un post o di una pagina spesso hai bisogno di aggiungere del codice HTML in più rispetto a quello generato automaticamente da WordPress. Nei temi che disegno io succede praticamente sempre: inserisco ogni volta un <div class="wrapper"> intorno ad ogni tag <img> (“wrapper” significa appunto “involucro”, “contenitore”), per poi sfruttare tale classe nel CSS e assegnare alcune proprietà.
Questo è il codice che WordPress genera in automatico quando inserisco un’immagine dall’editor di testo (l’ho un po’ “pulito” in realtà: licenza poetica!):
Fig. 1: Editor di WordPress, immagine senza “contenitore”
Il risultato che voglio ottenere è invece questo:
Fig. 2: Editor di WordPress, immagine con “contenitore”
Agire tutte le volte manualmente (cioè inserendo il <div class="wrapper"> direttamente nell’editor) è un po’ noioso, e anche una gran perdita di tempo. Non c’è un modo per dire a WordPress di farlo in automatico?
La risposta ovviamente è sì!
Assegnare codice supplementare per ogni immagine caricata da WordPress
Navigando qua e là sul forum di WordPress, e scremando i vari risultati, ho trovato tempo fa questa soluzione (che ho poi personalizzato per il mio scopo). Ecco come fare: apri il file functions.php (nel quale vanno sempre inserite tutte le features supplementari di ogni tema), ed aggiungi al suo interno:
<?php
add_filter('get_image_tag', 'inserisci_wrapper', 10, 6);
function inserisci_wrapper($html, $id, $alt, $title, $align, $size) {
list($img_src, $width, $height) = image_downsize($id, $size);
$class = 'align' . esc_attr($align) .' size-' . esc_attr($size) . ' wp-image-' . $id;
$class = apply_filters('get_image_tag_class', $class, $id, $align, $size);
$before = '<div class="wrapper">';
$after = '</div>';
$html = $before . $html . $after;
return $html;
}
?>
Il gioco è fatto: da adesso in avanti (ovviamente la funziona non è “retroattiva”) WordPress inserirà automaticamente un <div class="wrapper"> per ogni immagine che carichi dall’editor di testo. Sei chiaramente libero di modificare il codice evidenziato all’interno della funzione se ti serve riadattarla.
In bocca al lupo con il tuo tema!