• Articles
• admin

Come creare una versione mobile di un sito web WordPress

Ammetto di Avere una bella e perfettamente funzionante versione mobile del tuo sito web WordPress è un must, considerando che il volume significativo di navigazione in internet proviene da dispositivi mobili. È facile creare un sito Web mobile con WordPress su Namecheap, se ti iscrivi all’hosting condiviso o all’hosting WordPress EasyWP.

Potresti aver già notato che a volte le versioni Web e mobile dello stesso sito web hanno contenuti leggermente diversi. Questo viene fatto per escludere funzionalità specifiche dalla versione mobile di WordPress in quanto possono apparire o funzionare in modo errato, o semplicemente essere travolgenti su un display più piccolo. Inoltre, l’algoritmo del motore di ricerca di Google classifica i siti mobile-friendly più alti.

In questo articolo tratteremo diversi modi per rendere il tuo sito web WordPress mobile-friendly:
Creazione di siti con Responsive Design: Lo stesso contenuto e URL viene caricato su ogni dispositivo, ma CSS viene utilizzato per modificare il rendering della pagina in base alla risoluzione del display mobile.
Dynamic Serving Sites: viene caricato un URL, ma vengono utilizzati contenuti e CSS diversi, a seconda del dispositivo utilizzato.
Creazione di URL separati per dispositivi desktop e mobili: vengono caricati URL diversi e quindi siti Web, ad esempio, nctest.info e m.nctest.info

Tenete a mente che ogni modo ha i suoi pro e contro, è per questo che si consiglia di fare una ricerca SEO prima di procedere.
Responsive Web Design
Responsive web design utilizza CSS3 Media Query. Media Queries è un modulo CSS3 che consente il rendering dei contenuti di adattarsi a condizioni come risoluzione dello schermo, larghezza e altezza, orientamento.
Di solito, il file che dovrai modificare è style.CSS. Si trova nella directory/wp-content/themes/ theme_name/.
Una query multimediale CSS3 di solito assomiglia a:
@media only screen e (max-width: 480px) {
}
È un codice condizionale che dice al browser di regolare tutti i parametri di stile se la dimensione dello schermo è inferiore o uguale a 480px.
Per rendere più granulare, è possibile aggiungere intervalli min-width e max-width per indirizzare diversi dispositivi:
@media only screen e (min-width: 768px) e (max-width: 959px) {
}
Tutte le ulteriori regolazioni di stile devono essere aggiunte tra {…} staffa.
Ad esempio, prenderemo il tema predefinito Twenty Ten che non risponde per impostazione predefinita.
Il primo codice imposta la dimensione del frame principale del tema su 550px:
#access .menu-intestazione, div.menu, # colophon, # branding, # main, # wrapper, # site-title {
larghezza:550px;
}
Confronta come in questo caso il sito Web apparirà su un dispositivo mobile:

Anche se, come puoi vedere, non tutti gli elementi sono regolati sullo schermo del dispositivo. Devi regolare separatamente fondamentalmente tutti gli elementi che hai sul tuo sito web: immagine dell’intestazione, descrizione del blog, larghezza della barra di navigazione, posizione del livello del contenuto, ecc.
È possibile nasconderne alcuni, ad esempio cursori o immagini di intestazione. In questo modo, l’aspetto della versione mobile del tuo sito web sarà ottimizzato e user-friendly.
Dovrebbe essere usato il seguente codice (ad esempio, per l’immagine dell’intestazione):
#branding img {
display:none;
}
Se si desidera ridimensionare l’elemento (immagine dell’intestazione nell’esempio), utilizzare
# branding img {
width:100%
}
NOTA: Modifica dello stile.il file css richiede anche conoscenze di sviluppo web. Non dimenticare di eseguire il backup del file prima di cambiarlo.
Una volta che tutte le parti del tuo sito web sono regolate di conseguenza, dovrebbe avere un bell’aspetto sui dispositivi mobili:

La maggior parte dei temi WordPress sono creati per essere reattivi – quando si installa un nuovo tema, è possibile controllare il suo aspetto allegato sui dispositivi mobili in aggiunta.
Se non ce n’è e non sei sicuro che il tema che ti è piaciuto sia reattivo o meno, puoi definirlo nei filtri delle funzionalità durante la ricerca del tema.
1. Accedi alla tua dashboard di amministrazione di WordPress (yourdomain.com/wp-admin), passare al menu Aspetto, fare clic su Temi.
2. Fare clic su Aggiungi nuovo:

3. Fare clic su Filtro funzionalità e controllare il layout reattivo. Controllare altre opzioni se necessario per trovare un tema desiderato.
4. Fare clic su Applica filtri:

In pochi istanti vedrai l’elenco dei temi che corrispondono alle funzioni di ricerca impostate.
Dynamic Serving Websites
In alternativa, è possibile configurare diversi CSS e contenuti da estrarre a seconda del tipo di dispositivo. Questo può essere ottenuto tramite i plugin WordPress. La maggior parte di loro hanno una serie di impostazioni di base disponibili gratuitamente.
Ad esempio useremo uno dei plugin più popolari per la progettazione di blog mobile friendly – WPtouch Mobile Plugin.
Innanzitutto, è necessario installarlo e attivarlo nel dashboard di amministrazione.
Una volta fatto, si dovrebbe scegliere un tema per la versione mobile del sito web – passare al menu WPtouch, fare clic su Temi & Estensioni (1). Scegli il tema richiesto e fai clic su Imposta (2):

Una volta che l’installazione è finita, sarete in grado di apportare le modifiche e le correzioni necessarie. Le opzioni del plugin consentono di eseguire un sacco di azioni, e la maggior parte di loro sono auto-esplicativo.
Ecco come appare il menu del plugin mobile WPtouch:

Una volta terminate tutte le regolazioni, salvare le modifiche e verificare come il sito web viene visualizzato su un dispositivo desktop e mobile:

Creare URL separati per dispositivi desktop e mobili
L’ultimo modo è il più dispendioso in termini di tempo in quanto è necessario:
1. Crea un sottodominio corrispondente per la tua versione mobile, come m.nctest.info.
2. Sviluppare o copiare il contenuto del sito nel percorso della directory del sottodominio creato.
3. Installare e configurare un mobile redirect plugin.
NOTA: Se stai utilizzando questa opzione, tieni presente che le due versioni del tuo sito Web non verranno sincronizzate automaticamente, poiché tecnicamente sono installazioni diverse. Tutte le modifiche apportate dovranno essere replicate per l’altra versione.
Una volta creato il sottodominio e regolato il sito Web, vai avanti e installa il plugin nella dashboard principale dell’amministratore del sito web.
Ad esempio useremo il sito Mobile Redirect plugin.
1. Passare al menu Impostazioni e fare clic su Sito mobile Redirect.
2. Inserisci l’URL mobile che vorresti avere. Controllare eventuali opzioni aggiuntive, se necessario.
3. Clicca su Aggiorna impostazioni:

NOTA: Non forniamo il debug del codice e servizi di sviluppo del sito web. Questo articolo è fornito come una questione di cortesia per la vostra convenienza solo.In caso di problemi con la versione mobile del tuo sito web, ti consigliamo di fare riferimento ai forum di supporto o contattare lo sviluppatore del sito web.
Questo è tutto!