Skip to main content

WordPress: Tema o Plugin non più funzionanti? Attenzione ai riferimenti JS o CSS duplicati

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!

RELATED POSTS

Ryan

IT Project Manager, Web Interface Architect e Lead Developer di numerosi siti e servizi web ad alto traffico in Italia e in Europa. Dal 2010 si occupa anche della progettazione di App e giochi per dispositivi Android, iOS e Mobile Phone per conto di numerose società italiane.

Close
Leggi articolo precedente:
imageNamed non valido (e altri problemi con i resource files) dopo la creazione di un CocoaPod

Qualche giorno fa ho scritto un articolo per illustrare l'integrazione della mia libreria DownPicker su CocoaPods. Come diretta conseguenza del refactoring effettuato...

Chiudi