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

Aggiornato il

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

Immagine senza wrapper

Fig. 1: Editor di WordPress, immagine senza “contenitore”

Il risultato che voglio ottenere è invece questo:

Immagine con wrapper

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!

di Mattia Frigeri

COMMENTI

  • Ciao, io ho un problema simile che forse saprai risolvere facilmente sulla base delle modifiche che hai effettuato.
    In pratica, vorrei che WordPress inserisse in automatico una ‘class=tooltips’ per ogni link che andrò a creare con l’editor di testo; ovvero, convertire ogni

    “<a href="http:// …." in
    "<a class="tooltips" href="http://…."

    Sai darmi un'idea? Grazie anticipate.

    • Ho capito. Beh, cercando un po’ su Google ho trovato questo articolo, che in sostanza usa Javascript per ottenere una cosa simile alla tua (e forse potrebbe funzionare anche con te, dato che con il tag span puoi avere lo stesso risultato).

  • Ciao, ho seguito le tue istruzioni ma ora non mi funziona piu niente di tutto il sito e sono in panico piu totale! il sito a cui sto lavorando è www2.adcd.ch, puoi aiutarmi per favore? :-(

    • In ogni caso, non mi funziona: io dovrei mettere tutte le immagini inserite nel body di un post all’interno di un … e dopo aver modificato il codice indicato sopra non funziona più l’inserimento delle immagini.