I migliori plugin re­spon­si­ve di WordPress

Se de­si­de­ra­te un approccio Mobile First al web design, avere un sito web reattivo (o “re­spon­si­ve”, in inglese) è sempre più im­por­tan­te. Grazie agli appositi plugin di WordPress per la vi­sua­liz­za­zio­ne da di­spo­si­ti­vi mobili, rendere reattivo un sito web è un gioco da ragazzi. Abbiamo preso in esame alcuni dei plugin di WordPress per di­spo­si­ti­vi mobili più popolari.

Più del 43% di tutti i siti web sono stati creati con WordPress. Molti di questi sono ormai vecchi e superati, perlomeno da un punto di vista tecnico. Vi ri­cor­de­re­te si­cu­ra­men­te di qualche sito web a malapena leggibile per via della di­men­sio­ne troppo piccola del font, con il menù che può essere navigato solamente scrol­lan­do oppure zoo­man­do­lo, o le cui immagini fuo­rie­sco­no dall’area di vi­sua­liz­za­zio­ne (o “viewport” in inglese) in quanto non adattate alla vi­sua­liz­za­zio­ne mobile. La soluzione in questo caso è passare a un approccio reattivo, che richiede tuttavia un certo in­ve­sti­men­to di soldi e tempo.

Per ottenere un approccio Mobile First si può però ricorrere ad appositi plugin, i quali per­met­to­no di creare un web design reattivo senza dover cambiare il tema WordPress del sito. Ma non è finita qui: pro­ce­den­do a una simile ot­ti­miz­za­zio­ne, con­tri­bui­re­te a ve­lo­ciz­za­re il vostro sito WordPress e a ot­ti­miz­zar­ne la Mobile SEO. Se però si tratta di creare un sito WordPress com­ple­ta­men­te da zero, la funzione reattiva va già presa in con­si­de­ra­zio­ne al momento della selezione del tema di WordPress.

Per una migliore com­pren­sio­ne abbiamo con­fi­gu­ra­to una pagina web di prova avente i seguenti parametri:

• Versione 5.9 di WordPress
• Tema: Twenty Eleven di WordPress.org

Questo tema non è proprio ciò che si de­fi­ni­reb­be “reattivo”: gli unici elementi a ri­di­men­sio­nar­si (fino a un certo punto) sono le immagini, mentre il testo e, so­prat­tut­to, il menu rimangono invariati. Con un apposito plugin di WordPress per di­spo­si­ti­vi mobili è possibile risolvere in fretta questo problema. Abbiamo ana­liz­za­to come alcuni di questi plugin siano in grado di rendere la versione mobile di un sito web WordPress. Ri­tro­ve­re­te in dettaglio tutte le opzioni di con­fi­gu­ra­zio­ne nella pre­sen­ta­zio­ne di ciascuno dei plugin.

* Confronto di prezzi facente ri­fe­ri­men­to alla versione Premium per un sito web. ** Come pacchetto inclusivo di molte funzioni extra.

Il plugin WP Mobile Menu è un plugin facile da uti­liz­za­re che è stato ag­gior­na­to alla versione più recente con la pub­bli­ca­zio­ne di WordPress 5.9.

Il plugin aggiunge all’in­te­sta­zio­ne del sito WordPress una barra di na­vi­ga­zio­ne del menu che include il titolo del sito web e l’icona del menu hamburger. Il menu esistente del tema “Twenty Eleven” rimane invariato. Il plugin permette di in­stal­la­re un menu a discesa con due sottomenu sup­ple­men­ta­ri. Questa nuova barra è “sticky” (in italiano, let­te­ral­men­te, “ap­pi­ci­co­so”), per cui rimane sempre visibile nella parte superiore della pagina durante lo scrolling. Quando attivato, il menu si apre scorrendo la­te­ral­men­te e so­vrap­po­nen­do­si al contenuto.

Dietro ai sette punti di menu dell’in­ter­fac­cia admin di WP Mobile Menu sono nascoste diverse opzioni di con­fi­gu­ra­zio­ne, tra cui:

• Ag­giun­ge­re un testo per l’in­te­sta­zio­ne e/o un logo al posto del titolo del sito web inserito au­to­ma­ti­ca­men­te
• So­vrap­po­si­zio­ne definita sopra il contenuto quando il menu è aperto; pos­si­bi­li­tà di scegliere sia il colore della so­vrap­po­si­zio­ne e degli elementi che le di­men­sio­ni dei relativi margini
• Immagine di sfondo per il menu
• Pos­si­bi­li­tà di di­sat­ti­va­re la vi­sua­liz­za­zio­ne di de­ter­mi­na­ti elementi quando il menu è aperto
• Utilizzo di Google Font
• Design del menu per­so­na­liz­za­bi­le (sono ad esempio di­spo­ni­bi­li cinque diversi tipi di icone per il menu hamburger)
• Modalità di vi­sua­liz­za­zio­ne del menu: sopra il contenuto o spostando il contenuto la­te­ral­men­te

Nella versione Premium (a pagamento) di questo plugin di WordPress, è possibile di­sat­ti­va­re il menu Mobile solo su de­ter­mi­na­te pagine o mo­di­fi­car­ne se­pa­ra­ta­men­te l’aspetto. Inoltre, è possibile creare menu a piè di pagina e altre modalità di vi­sua­liz­za­zio­ne per il menu aperto. Infine, sono di­spo­ni­bi­li più di 2000 icone da diverse librerie.

Questo plugin Mobile di WordPress offre un’in­ter­fac­cia admin reattiva chiara ed estre­ma­men­te intuitiva, nella lingua impostata della bacheca di WordPress.

Il pannello admin di Max Mega Menu nella sua versione gratuita offre, tra le altre cose, le seguenti funzioni:

• Rea­liz­za­zio­ne di voci di mega menu oriz­zon­ta­le fino al terzo livello
• Im­po­sta­zio­ni altamente per­so­na­liz­za­bi­li per ogni livello di menu, comprese le frecce di na­vi­ga­zio­ne
• Gestione degli elementi in parte tramite funzione drag&drop
• Sal­va­tag­gio dei propri design del menu come temi in­di­vi­dua­li
• Stile per­so­na­liz­za­to mediante CSS/SCSS
• Espor­ta­zio­ne e im­por­ta­zio­ne dei propri temi di menu come JSON o PHP
• Do­cu­men­ta­zio­ne fa­cil­men­te ac­ces­si­bi­le

Per alcune funzioni è ne­ces­sa­ria la co­no­scen­za di HTML e CSS, ad esempio per applicare cor­ret­ta­men­te lo “z-index”.

Chi ha ac­qui­sta­to la versione Pro ha accesso a menu sticky, tabbed, accordion e verticali, più di 600 icone per il menu, 200 font di Google, menu badge per una maggiore vi­si­bi­li­tà e in­te­gra­zio­ne di Woo­Com­mer­ce ed Easy Digital Downloads.

Il plugin WordPress WPtouch consente di ag­giun­ge­re un tema mobile leggero a un sito esistente. Le ope­ra­zio­ni sono chiare e com­pren­si­bi­li nella lingua impostata sulla bacheca di WordPress. Gli elementi e le funzioni di­spo­ni­bi­li solamente nella versione Pro sono evi­den­zia­te cro­ma­ti­ca­men­te.

Tra i plugin WordPress Mobile qui testati, WPTouch ha rea­liz­za­to il cam­bia­men­to visivo più evidente. La dif­fe­ren­za più si­gni­fi­ca­ti­va rispetto ai pre­ce­den­ti è l’uso del familiare Cu­sto­mi­zer per adattare la vi­sua­liz­za­zio­ne mobile. Con il pulsante “Passa a tema mobile”, si vi­sua­liz­za la versione mobile e la si può gestire molto co­mo­da­men­te. Gli svi­lup­pa­to­ri hanno seguito le rac­co­man­da­zio­ni di Google per un’espe­rien­za utente mobile ef­fi­cien­te e quindi hanno costruito un plugin molto leggero. Il sito mobile appare chia­ra­men­te diviso e il testo è più facile da leggere.

Nella versione gratuita l’admin del sito web ha già a di­spo­si­zio­ne le seguenti pos­si­bi­li­tà:

• Fino a sei gruppi diversi di di­spo­si­ti­vi/browser di­spo­ni­bi­li a cui adattare la versione mobile del sito
• Per­so­na­liz­za­zio­ne della versione mobile nel Cu­sto­mi­zer
• At­ti­va­zio­ne del menu come drop-down o off canvas
• Posizione re­go­la­bi­le dell’icona del menu hamburger
• Libera scelta dei colori per sfondo, in­te­sta­zio­ne, menu, link e titoli
• Pannello admin di­spo­ni­bi­le in 23 lingue
• Nessuna influenza sulla versione desktop e le altre im­po­sta­zio­ni di WordPress del tema originale del sito web 

All’interno dell’ab­bo­na­men­to di 1 anno alla non proprio economica versione Pro sono di­spo­ni­bi­li, oltre al supporto Premium, anche altri temi mobili, l’in­te­gra­zio­ne di pub­bli­ci­tà, la funzione “Related Posts” e l’uso di jQuery.

Il plugin Mobile di WordPress AMP for WP è un progetto di Google. Questo applica le linee guida del motore di ricerca più uti­liz­za­to al mondo per una migliore vi­si­bi­li­tà e una maggiore velocità delle pagine WordPress, e lo fa in modo molto esteso e coerente. Ha anche la finalità di aiutare a mi­glio­ra­re il po­si­zio­na­men­to di un sito web nei risultati di ricerca di Google.

Il sito web è stato mo­di­fi­ca­to ag­giun­gen­do un pulsante per il menu hamburger nell’in­te­sta­zio­ne e rendendo il corpo del testo molto più leggibile. Nelle im­po­sta­zio­ni di base del plugin il sito è de­ci­sa­men­te più veloce, il menu aperto copre tutta la pagina e i sottomenu si aprono e si chiudono adat­tan­do­si per­fet­ta­men­te. In più, la barra di ricerca è integrata nel menu in so­vrap­po­si­zio­ne.

La con­fi­gu­ra­zio­ne, dif­fe­ren­zia­ta per prin­ci­pian­ti ed esperti, guida in maniera quasi auto-espli­ca­ti­va at­tra­ver­so le voci di menu nel pannello di am­mi­ni­stra­zio­ne. Il risultato è un’espe­rien­za piacevole. Inoltre, online è possibile accedere a una do­cu­men­ta­zio­ne molto estesa (in inglese).

Il plugin di WordPress offre una selezione enorme di opzioni mobili. La versione gratuita include quattro temi e, stando a quanto di­chia­ra­to dagli svi­lup­pa­to­ri, più di 300 possibili va­ria­zio­ni. Alla voce di menu “Ex­ten­sions” nel pannello di am­mi­ni­stra­zio­ne è possibile ac­qui­sta­re fun­zio­na­li­tà ag­giun­ti­ve. Le funzioni gratuite includono:

• Supporto di Pa­ge­Buil­der
• Rimozione au­to­ma­ti­ca di CSS non uti­liz­za­to
• Supporto di Google Font anche per uso locale
• Com­pa­ti­bi­li­tà con diversi strumenti SEO
• Utile Pa­gi­na­tion (nu­me­ra­zio­ne delle pagine) per contenuti più ampi
• Supporto di Google Tag Manager, Adsense (AMP-AD) e Analytics Support come di altri fornitori di strumenti di analisi
• Pos­si­bi­li­tà di creare contenuto dif­fe­ren­zia­to per le versioni Mobile e desktop
• Opzione di Related Posts
• Adat­ta­men­to di immagini mi­glio­ra­to
• In­te­gra­zio­ne di video da YouTube, Vime, Twitter, Instagram e Facebook
• In­te­gra­zio­ne di 12 nuovi canali di social media
• Con­fi­gu­ra­zio­ne della versione AMP come specifica pagina iniziale e/o prio­ri­ta­ria

A pagamento sono di­spo­ni­bi­li ul­te­rior­men­te:

• De­ter­mi­na­te forme di gestione degli annunci
• Supporto per moduli di contatto speciali
• E-mail opt-in per i mittenti di new­slet­ter
• Mul­ti­lin­gui­smo con WPML, Polylang e WeGlot
• Con­nes­sio­ne all’e-commerce
• Template per elementi con “chiamata all’azione”
• Più di 45 altre esten­sio­ni dal mondo AMP

A proposito: AMP per WP va distinto dal progetto open source AMP. Quest’ultimo, infatti, si è posto come obiettivo quello di costruire siti web uti­liz­zan­do molto meno codice, ren­den­do­li così più veloci. Per ap­pro­fon­di­re l’argomento, potete leggere il nostro articolo plugin AMP per WordPress. Il plugin AMP for WP può essere visto come a metà strada tra entrambi i compiti. Inoltre, qui trovate consigli generali per la SEO su WordPress.