Rimuovere lo il bordo dalle immagini delle gallerie create con WordPress

Di seguito vi riportiamo una riga di codice utile per evitare che  WordPress aggiunga gli stili CSS predefiniti nella galleria inclusa all’interno delle pagine o dei post.

Possiamo personalizzare un sacco di cose nei nostri temi WordPress, e lo stile galleria WordPress è sicuramente uno di quelli importanti. In un primo momento, può sembrare semplice, ma in realtà non lo è così tanto.

Come sviluppatore, si potrebbe pensare di personalizzare l’aspetto delle gallerie WordPress solo con l’aggiunta di qualche riga di CSS nel style.css del vostro tema. Ma ciò non è possibile visto che WordPress aggiunge automaticamente un frammento di stile predefinito nel post che contiene una galleria e che sovrascrive qualsiasi stile definito nei fogli inclusi nel tema.

Il codice agganciato automaticamente da WordPress in un post galleria si presenta un così:

<style type='text/css'>
    #gallery-1 {
        margin: auto;
    }
    #gallery-1 .gallery-item {
        float: left;
        margin-top: 10px;
        text-align: center;
        width: 33%;/*questo dipende da quante colonne avete previsto*/
    }
    #gallery-1 img {
        border: 2px solid #cfcfcf;
    }
    #gallery-1 .gallery-caption {
        margin-left: 0;
    }
    /* see gallery_shortcode() in wp-includes/media.php */
</style>

Ora sappiamo che l’ostacolo nel nostro modo di personalizzare la nostra galleria look è la funzione che aggiunge automaticamente lo stile CSS nella pagina. Se riusciamo ad inibire l’iniezione di questo codice, abbiamo quasi finito.

Basta semplicemente aggiungere il codice qui sotto in un file functions.php del nostro tema WordPress:

add_filter (‘use_default_gallery_style’, ‘__return_false‘);

per evitare che WordPress aggiunga lo stile all’interno della pagina.

Ora, è necessario salvare il file functions.php e quindi visualizzare un post galleria. Le gallerie adesso avranno una disposizione di base, basta includere gli stili CSS (magari partendo da quelli originali e personalizzandoli) nel file style.css del tema.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Time limit is exhausted. Please reload CAPTCHA.