4 Modi per migliorare la versione mobile del tuo tema WordPress

Articolo scritto da:
  • WordPress
  • Aggiornato: Lug 29, 2013

Versione mobile WordPress

Diciamoci la verità, i dispositivi mobili stanno diventando sempre più popolari. La navigazione sul desktop non cresce più, in realtà diminuisce, mentre i dispositivi mobili sono in rapida crescita con tutti quei fantastici telefoni e tavoli intelligenti là fuori.

Secondo Net MarketShare, i dispositivi mobili rappresentano il 10% del traffico web totale. È una grande figura, ed è ancora più grande in alcune nicchie e paesi. Ma la cosa importante qui è l'attenzione speciale che i dispositivi mobili richiedono, a causa dello spazio limitato dello schermo e del fatto che le connessioni mobili di solito sono più lente della connessione desktop.

Molti temi WordPress sono reattivi, ma sai, avremo sempre spazio per miglioramenti. Quindi qui vedremo le tecnologie 4 e i modi per utilizzarle al fine di migliorare l'esperienza mobile per i tuoi utenti.

#1 Tipi di file multimediali

Alcuni anni fa, quando IE5.5 e IE6 erano considerati vivi, i browser mobili stavano appena iniziando a spuntare (e Opera era di gran lunga la migliore), e la gente ha iniziato a rendersi conto che le cose si stavano solo rompendo poiché i telefoni allora non potevano proprio elaborare cose semplici come CSS (per non parlare di JS, flash e così via).

Quindi, fare un sito mobile completamente separato era l'unica opzione quando i tipi di media venivano a salvarci. L'idea era semplice, si potrebbe dire al browser se il file che si sta fornendo è regole CSS "avanzate" (per desktop) o semplici regole CSS (per palmare o stampa). La sintassi è semplice come questa:

<link rel = "stylesheet" href = "handheld.css" type = "text / css" media = "palmare" />

Questa può essere una buona opzione per creare un design completamente diverso per il tuo sito mobile. Ma non dovresti usarlo.

I tipi di media possono sembrare buoni all'inizio, ma un semplice problema è arrivato con i moderni smartphone: la mancanza di supporto per i browser. La maggior parte dei giocatori più importanti ha semplicemente ignorato questo tipo di funzionalità (come la mela)
Quindi le domande dei media arrivano per salvarci.

#2 Media Queries e come migliorare davvero l'esperienza mobile

Questo è di gran lunga il modo più popolare per creare una versione mobile del tuo sito.

È possibile indirizzare determinati punti in base a una rabbia delle dimensioni del browser, delle dimensioni dello schermo del dispositivo, della densità dei pixel (sì, retina!) E persino dei tipi di file multimediali.

Ecco una semplice query multimediale:

@media (larghezza massima: 700px) {body {background: red; }}

Questo è più o meno lo stesso della programmazione. IF "La larghezza del browser è 700 o inferiore", POI "Applica il seguente codice CSS".

Tema Bambino

Creiamo una nuova cartella nel tuo / themes e chiamiamola ventiMobile. Lo so, ventidue usano già query sui media, ma siamo qui per imparare, no?

Quindi, crea un file style.css e aggiungi questo contenuto:

/ * Nome tema: modello tema mobile: twentytwelve * / @import url ("../ twentytwelve / style.css"); @media palmare, solo schermo e (larghezza massima: 767px) {nav ul {display: none;} nav select {display: block}}

Sopra abbiamo creato il tema CSS per bambini e inoltre abbiamo aggiunto una regola che riguarderà solo i dispositivi mobili, che nasconderà il menu principale e mostrerà una selezione. Quindi, se si dispone di un menu in una selezione, è possibile risparmiare molto spazio anziché visualizzarlo come voci ul / li

#3 Extreme makeover con jQuery Mobile

jQuery mobile è un fantastico framework che utilizza la funzionalità jQuery per migliorare l'esperienza mobile, con widget e elementi dell'interfaccia utente ottimizzati.

L'HTML necessario per farlo funzionare è abbastanza semplice, utilizza solo gli attributi dei dati HTML e JS per rilevare e creare widget dell'interfaccia utente.

Ma per fare in modo che jQuery Mobile funzioni correttamente nel tuo blog WordPress devi prima chiamare lo script mobile di jQuery. Tornando al tema figlio, duplica il file header.php del tema principale e aggiungi queste righe nel tag head:

<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> <script src = "http://code.jquery.com /mobile/1.3.1/jquery.mobile-1.3.1.min.js "> </ script>

Dovrei menzionare che per le proposte commerciali dovresti usare wp_enqueue _script, così eviterai di duplicare le librerie nel tuo sito.
Ora possiamo giocare con praticamente qualsiasi elemento dell'interfaccia utente che desideri. jQuery mobile ha un sacco di widget dell'interfaccia utente che è possibile utilizzare in un tema, ma applichiamo la pagina e i pannelli pieghevoli.
Questa è la sintassi HTML di base:

<div data-role = "page"> <div data-role = "header"> </ div> <div data-role = "content"> </ div> <div data-role = "footer"> </ div> </ div>

Con questo codice creerai una nuova "pagina" e le aree di intestazione, contenuto e piè di pagina. L'intestazione e il piè di pagina sono corretti e il contenuto cambia in base alla pagina corrente, quindi puoi caricare più pagine una volta e nascondertele semplicemente assegnando ID diversi.
Questo è l'HTML di base per i pannelli pieghevoli:

<div data-role = "collapsible-set"> <div data-role = "collapsible-set" data-collapsed = "true"> <p> Contenuto area comprimibile </ p> </ div> </ div>

È abbastanza semplice implementare un loop lì, vero? Bene, il tuo codice sarà simile al seguente:

<div data-role = "collapsible-set"> <? while (have_posts ()) {...?> <div data-role = "comprimibile" data-collapsed = "true"> </ div> <? ...}?> </ div>

Il menu di selezione rivisto

Con il codice che abbiamo visto sopra (nella sezione delle query multimediali) puoi nascondere il tuo solito menu e mostrare un menu di selezione speciale. jQuery ti consente di aggiungerlo senza molto codice PHP (a dire il vero non avremo affatto bisogno di PHP). Creiamo un nuovo file e aggiungiamo questo codice lì:

jQuery (function ($) {// quando il DOM è pronto $ (document) .ready (function () {// creiamo l'elemento select $ ("<select />").appendTo("nav"); / / Con la nuova opzione, vai a ... $ ("<opzione />", {"valore": "", "testo": "Vai a ..."}). AppendTo ("nav select");}); / / Ora abbiamo la selezione creata popolatela: $ ("nav .menu a"). Each (function () {// per ogni LINK che trovate nel menu var aux = $ (this); $ ("<option /> ", {" valore ": aux.attr (" href ")," html ": aux.text ();}). appendTo (" nav select "); // aggiungi un nuovo elemento alla selezione)} ; // quindi impostiamo la funzionalità a discesa per il reindirizzamento quando selezioniamo un nuovo elemento $ ("nav select"). change (function () {window.location = $ (this) .find ("option: selected"). val ();});});

In questo modo creerai un nuovo menu mobile, ma il problema è che stiamo caricando jquery mobile anche nella versione "normale" del sito. Ecco perché possiamo utilizzare anche alcuni plugin per aiutarci a migliorare il nostro sito.

#4 - Avvolgi tutto con Mobile Detector

Questo fantastico plug-in crea una nuova funzionalità che ci consente di caricare in modo condizionale i temi in base al dispositivo dell'utente. E funziona con semplici regole condizionali, come questo:

<? php if (MobileDTS :: is ('android')) {....} elseif (MobileDTS :: is ('mobile')) {....} else {}?>

Il metodo MobileDTS verifica il dispositivo corrente e restituisce un semplice vero / falso. Quindi possiamo usare una funzione magica chiamata switch_theme () per impostare un nuovo tema, ed è possibile utilizzare condizionali di plugin come MobileDTS :: is_switcher_enabled () per creare un collegamento a una versione desktop quando si utilizza il cellulare, ad esempio.

Conclusione

Quindi, hai mai usato plug-in o funzioni mobili nel tuo tema WordPress? Quale metodo preferisci? Non essere timido e condividi i tuoi pensieri!

A proposito di Rochester Oliveira

Sono un web designer e imprenditore di Itajubá (MG), Brasile. Adoro scrivere argomenti oscuri e fare cose interessanti.

Collegare: