{"id":4318,"date":"2011-10-11T13:53:22","date_gmt":"2011-10-11T11:53:22","guid":{"rendered":"http:\/\/xlogic.org\/blog\/?p=4318"},"modified":"2023-12-29T11:56:33","modified_gmt":"2023-12-29T10:56:33","slug":"wordpress-creare-una-versione-mobile-di-un-blog-con-wptouch","status":"publish","type":"post","link":"https:\/\/xlogic.org\/blog\/wordpress-creare-una-versione-mobile-di-un-blog-con-wptouch.html\/","title":{"rendered":"Rendere WordPress mobile e responsive senza WPtouch"},"content":{"rendered":"

Per ottenere un sito WordPress mobile responsive<\/strong> non serve pi\u00f9 creare una seconda versione con WPtouch. I temi moderni usano layout fluidi, media query e immagini adattive per mostrare gli stessi contenuti e URL su desktop, tablet e smartphone.<\/p>\n

Perch\u00e9 evitare una versione mobile separata<\/h2>\n

Due versioni possono duplicare template, impostazioni e test, creare differenze nei contenuti e complicare cache e canonical. Il responsive design mantiene una sola pagina che si adatta allo spazio disponibile.<\/p>\n

1. Scegliere un tema responsive<\/h2>\n

Controlla aggiornamenti, compatibilit\u00e0 e qualit\u00e0 del codice. Prova demo e pagine reali con testo lungo, menu, tabelle, gallerie e moduli. Un\u2019etichetta \u201cresponsive\u201d non garantisce usabilit\u00e0.<\/p>\n

2. Usare un child theme<\/h2>\n

Inserisci le personalizzazioni in un child theme o in strumenti supportati dal tema. Modificare direttamente i file del tema principale espone alla perdita delle modifiche durante gli aggiornamenti.<\/p>\n

3. Impostare il viewport<\/h2>\n

Il tema deve includere un viewport coerente:<\/p>\n

<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><\/code><\/pre>\n
Non disabilitare lo zoom dell\u2019utente. Se il tag manca, correggi il tema anzich\u00e9 aggiungerlo pi\u00f9 volte con plugin diversi.<\/p>\n
4. Layout fluidi<\/h2>\n
Preferisci Grid, Flexbox, percentuali e funzioni CSS come min()<\/code>, max()<\/code> e clamp()<\/code>. Evita larghezze fisse che producono scroll orizzontale.<\/p>\n
.layout {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));\n  gap: 1.5rem;\n}<\/code><\/pre>\n
5. Immagini responsive<\/h2>\n
WordPress genera attributi srcset<\/code> e sizes<\/code> per gli allegati gestiti correttamente. Carica un originale adeguato, evita immagini enormi e usa WebP o AVIF quando disponibili. Non impostare dimensioni che deformano il rapporto.<\/p>\n
6. Menu accessibile<\/h2>\n
Il pulsante del menu mobile deve essere raggiungibile da tastiera, avere nome accessibile e comunicare lo stato aperto\/chiuso. Gestisci focus ed Escape nei menu complessi. Non nascondere la navigazione principale soltanto dietro gesti.<\/p>\n
7. Tipografia e controlli<\/h2>\n
Usa testo leggibile senza zoom, interlinea sufficiente e righe non troppo lunghe. Pulsanti e link devono avere area di attivazione e distanza adeguate; non affidare azioni essenziali al solo hover.<\/p>\n
8. Tabelle e contenuti larghi<\/h2>\n
Per tabelle di dati usa un contenitore con scorrimento orizzontale e un\u2019indicazione visiva. Per confronti semplici valuta card impilate. Non ridurre il testo fino a renderlo illeggibile.<\/p>\n
9. Moduli da smartphone<\/h2>\n
Associa ogni campo a una label, usa tipi input corretti e mostra errori vicini al campo. Riduci i campi obbligatori e prova autofill, password manager e tastiera virtuale.<\/p>\n
10. Prestazioni mobile<\/h2>\n
Connessioni e dispositivi mobili amplificano JavaScript, font e immagini pesanti. Rimanda script non essenziali, limita widget esterni e misura con PageSpeed Insights<\/a> e DevTools. Non nascondere soltanto un elemento pesante con CSS: potrebbe essere comunque scaricato.<\/p>\n
11. Test reali<\/h2>\n
    \n
  • larghezze intermedie, non solo preset comuni;<\/li>\n
  • orientamento verticale e orizzontale;<\/li>\n
  • zoom del browser e testo ingrandito;<\/li>\n
  • navigazione da tastiera;<\/li>\n
  • Safari iOS e Chrome Android;<\/li>\n
  • rete lenta e cache fredda;<\/li>\n
  • form, login, carrello e checkout.<\/li>\n<\/ul>\n
    Migrare da WPtouch<\/h2>\n
      \n
    1. crea backup e ambiente di staging;<\/li>\n
    2. attiva un tema responsive compatibile;<\/li>\n
    3. ricrea eventuali personalizzazioni nel child theme;<\/li>\n
    4. controlla menu, widget, shortcode e cache;<\/li>\n
    5. disattiva WPtouch soltanto in staging;<\/li>\n
    6. verifica URL, canonical e contenuti su pi\u00f9 dispositivi;<\/li>\n
    7. pubblica con possibilit\u00e0 di rollback;<\/li>\n
    8. rimuovi il plugin dopo il periodo di controllo.<\/li>\n<\/ol>\n
      Conclusione<\/h2>\n
      Un sito WordPress mobile responsive moderno usa un solo contenuto e un tema adattivo, senza dipendere da una versione parallela. Cura layout, immagini, menu, moduli e prestazioni, poi prova dispositivi e condizioni reali prima di rimuovere WPtouch.<\/p>\n","protected":false},"excerpt":{"rendered":"
      Per ottenere un sito WordPress mobile responsive non serve pi\u00f9 creare una seconda versione con WPtouch. I temi moderni usano layout fluidi, media query e immagini adattive per mostrare gli stessi contenuti e URL su desktop, tablet e smartphone. Perch\u00e9 evitare una versione mobile separata Due versioni possono duplicare template, impostazioni e test, creare differenze […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"categories":[1401],"tags":[155,28,471,470,472,473,469],"class_list":["post-4318","post","type-post","status-publish","format-standard","hentry","category-wordpress","tag-plugin-wordpress","tag-wordpress","tag-wordpress-blackberry","tag-wordpress-iphone","tag-wordpress-mobile","tag-wordpress-wptouch","tag-wptouch"],"modified_by":"Team tecnico Xlogic","_links":{"self":[{"href":"https:\/\/xlogic.org\/blog\/wp-json\/wp\/v2\/posts\/4318","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xlogic.org\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xlogic.org\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xlogic.org\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xlogic.org\/blog\/wp-json\/wp\/v2\/comments?post=4318"}],"version-history":[{"count":0,"href":"https:\/\/xlogic.org\/blog\/wp-json\/wp\/v2\/posts\/4318\/revisions"}],"wp:attachment":[{"href":"https:\/\/xlogic.org\/blog\/wp-json\/wp\/v2\/media?parent=4318"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xlogic.org\/blog\/wp-json\/wp\/v2\/categories?post=4318"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xlogic.org\/blog\/wp-json\/wp\/v2\/tags?post=4318"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}