WordPress: aggiungere un tag contenitore (wrapper) intorno alle immagini caricate nei post e nelle pagine

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!):

L'immagine senza il wrapper
Editor di WordPress, immagine senza "contenitore"

Il risultato che voglio ottenere è invece questo:

L'immagine con il wrapper
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!