Ormai sappiamo tutti come funzionano le tipiche installazioni di WordPress: si inizia con un Tema che sembra particolarmente efficace, si aggiunge una manciata di Plugin indispensabili come Jetpack, Contact Form 7, il pacchetto YOAST per gestire Google Analytics e la parte SEO e grossomodo si pensa che sia finita lì. Dopo tutto abbiamo bisogno di un semplice blog, giusto? Inutile appesantirlo con roba superflua.
Poi si comincia a riflettere sul fatto che sarebbe bello dotare i nostri utenti di una newsletter: per fortuna esiste MailPoet, che si occupa proprio di questo. E non passa molto tempo prima che arrivi la voglia di inserire qualche galleria di immagini qui e là, esigenza che viene facilmente soddisfatta dalle miriadi di plugin che offrono ogni sorta di slider e carousel con cui arricchire pagine e articoli. E cosa c'è di meglio di BuddyPress per gestire la community, o di WooCommerce per vendere prodotti? E a chi non interessa poter dare ai propri utenti la possibilità di accedere ai file condivisi tramite Google Drive o Dropbox sfruttando uno dei tanti Download Manager a disposizione?
Tanto vale ammetterlo: nessuno installa WordPress per fare un semplice blog. Al contrario, il motivo per cui si sceglie WordPress è proprio perché si ha l'esigenza di mettere in piedi un sito dalle funzionalità complesse mantenendole sotto controllo grazie a una piattaforma robusta e modulare. C'è forse qualcosa di male in questo? Assolutamente no. Tranne quando, tra i numerosi plugin che si andrà inevitabilmente ad installare, ve ne saranno alcuni che aggiungeranno le medesime librerie js o css di uso comune (jQuery, Bootstrap, MooTools etc.) al nostro sito.
Il problema
Se vi siete imbattuti in questo articolo è probabile che il vostro Tema e/o uno dei vostri plugin abbia qualche problema di visualizzazione: il menu a tendina che smette di funzionare, il layout adattivo che non si ridimensiona più adeguatamente, la slider che non si comporta più nel modo previsto e così via. La prima cosa che avete fatto, ovviamente, è stata andare a guardare nella console javascript o nel css inspector del vostro browser, senza però trovare niente di insolito. Magari avete persino provato a disinstallare un paio degli ultimi plugin installati, nella speranza che fosse colpa loro... senza che questo abbia risolto il problema in alcun modo.
La soluzione
Se avete provato a disinstallare qualche plugin è probabile che siate molto vicini a scoprire le cause del problema. Nove volte su dieci, infatti, la problematica in oggetto è dovuta al conflitto tra librerie javascript o css utilizzate sia dal tema di WordPress che da uno o più plugin installati. Per avere la conferma, aprite la visualizzazione sorgente di una pagina HTML che presenta il problema e cercate le seguenti stringhe di testo:
- bootstrap.css
- bootstrap.min.css
- bootstrap.js
- bootstrap.min.js
- jquery-x.y.z.js
- jquery-x.y.z.min.js
- jquery-ui.js
- jquery-ui.min.js
- jquery-ui.css
- jquery-ui.min.css
- font-awesome.css
- font-awesome.min.css
... e così via. In parole povere dovete cercare riferimenti duplicati e/o relativi a versioni differenti della stessa libreria css o jss. Inutile dire che dovete prestare particolare attenzione alle librerie più diffuse, come bootstrap, jquery, jquery.ui, mootools, modernizr, font-awesome e così via. Se trovate un duplicato, dovete necessariamente trovare il modo di rimuoverlo. La prima cosa da fare è capire quale plugin ne determina l'inserimento: potete farlo guardando il valore dell'attributo id dell'elemento <link> o <script>. La maggior parte dei plugin dà la possibilità di escludere l'inclusione delle librerie comuni nel pannello di configurazione delle proprietà del plugin stesso: se così non fosse, collegatevi via FTP al server che ospita la vostra installazione di WordPress e rinominateli temporaneamente, così da vedere se la loro (doppia) inclusione è la causa del vostro problema. In caso affermativo avete le seguenti opzioni:
- Controllare se il vostro Tema consente di disabilitare l'inclusione di quelle librerie (caratteristica piuttosto diffusa tra i temi più avanzati).
- Contattare l'autore del plugin tramite il forum di supporto presente nel WordPress Plugin Browser, chiedendo di implementare l'opzione per disabilitare le librerie js e css utilizzate - e magari adottare le soluzioni 3 o 4 fino a quando non lo fa: questo è un esempio di come fare.
- Continuate a rinominare i file css e js inclusi dal plugin (dovrete farlo ad ogni nuova release/update).
- Disattivate o disinstallate il plugin.
Potete leggere qui un esempio tipico di conflitto tra librerie duplicate tra il Tema Sparkling e il plugin Download Manager: due ottimi prodotti, entrambi facenti uso di Bootstrap: la soluzione in questo caso è stata quella di disabilitare l'inclusione delle librerie Bootstrap nelle impostazioni di Download Manager.
Una soluzione più robusta
Controllare manualmente le pagine HTML e modificare i file di plugin non è una operazione comoda né sicura. Per questo motivo ho incominciato a lavorare a un plugin WordPress che si occupa proprio di automatizzare questa serie di operazioni, tra cui:
Controllare la presenza di riferimenti js/css duplicati nella propria installazione di WordPress (home, singoli post, singole pagine, etc.).- Ispezionare il codice del proprio tema e di tutti i plugin installati per identificare i caricamenti delle eventuali librerie duplicate.
- Presentare all'utente il risultato di questi controlli, presentandogli una serie di possibilità per risolvere il problema.
Il plugin, inutile dirlo, sarà completamente gratuito. Se l'idea vi piace e volete partecipare allo sviluppo potete contattarmi così provvederò ad aggiungervi al repository del plugin, attualmente in lavorazione.
Buona scrittura!
