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

Qualche anno fa, quando IE5.5 e IE6 erano considerati vivi, i browser mobili stavano iniziando a spuntare (e Opera era di gran lunga il migliore), e la gente iniziò a rendersi conto che le cose stavano appena scoppiando da quando i telefoni allora non potevano elaborare semplici cose come i 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 nei tuoi / temi e denominiamola ventiMobile. Lo so, ventidue anni usa già le 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 secondario CSS e abbiamo anche aggiunto una regola che sceglierà come target solo i dispositivi mobili, che nasconderanno il menu principale e mostreranno una selezione. Quindi se hai un menu in una selezione puoi risparmiare molto spazio invece di visualizzarlo come 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 ciclo lì, non è vero? Bene, il tuo codice sarà simile a questo:

<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 media query) puoi nascondere il tuo solito menu e mostrare un menu di selezione speciale. jQuery ti permette di aggiungerlo senza molto codice PHP (per essere onesti non avremo assolutamente bisogno di PHP). Creiamo un nuovo file e aggiungiamolo qui:

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.

Conclusioni

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

Articolo di Rochester Oliveira

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

Collegarsi: