Share
L'edificio tematico è il cuore di WordPress. È la tecnica che utilizzi per creare siti Web su misura per te o per i tuoi clienti ed è un'abilità vitale per chiunque desideri progettare e sviluppare con WordPress.
Sempre più temi WordPress sono reattivi: utilizzano le query multimediali CSS per adattarsi a diverse larghezze dello schermo, adattando il layout e apportando modifiche al design e all'interfaccia per rendere più leggibile e interattivo qualsiasi sito creato utilizzando il tema su una gamma di dispositivi e dimensioni dello schermo.
In questo tutorial ti mostrerò come creare un tema Mobile First WordPress, che inizia con lo stile per gli schermi più piccoli e funziona verso l'alto.
In questo tutorial prenderò un tema WordPress con uno stile minimale e poi lo renderò stile per renderlo mobile per primo. Il design finale sarà molto semplice: l'idea è di coprire gli elementi costitutivi del contenuto e del layout e, se lo desideri, puoi aggiungere i tuoi gadget personalizzati..
Per seguire i passaggi di questo tutorial avrai bisogno di quanto segue:
Suppongo che tu abbia già familiarità con l'installazione e il funzionamento con WordPress. Lavorerò su un'installazione remota di WordPress
e fornire collegamenti mentre procedo.
A meno che tu non abbia il tuo tema su cui stai lavorando, avrai anche bisogno del codice di partenza per il tutorial. Puoi vedere il mio tema su http://rachelmccollin.co.uk/nettuts-wpresponsive-tutorial/ e scaricare il codice per il tema in varie fasi del suo sviluppo da xxx [da aggiungere in base a netsuts + sistema di download].
Mobile First è un termine che è stato coniato per la prima volta da Luke Wroblewski. Si riferisce al
strategia di trasformare il modo in cui progettiamo siti Web e temi sulla sua testa. Invece di iniziare con una progettazione desktop e quindi regolarla per dispositivi mobili, lavoriamo nella direzione opposta: iniziamo disegnando e codificando per dispositivi mobili e poi aggiungiamo ciò che è necessario per gli schermi più grandi. Questo ha alcuni vantaggi:
Il tema di partenza ha uno stile minimale applicato, e non ha ancora uno stile di layout - che verrà aggiunto man mano che lavoriamo attraverso il tutorial.
Gli elementi che il tema include sono mostrati di seguito:
Al momento, il tema è simile a quello di uno smartphone (ad esempio con dimensioni dello schermo di 320 x 480 pixel):
Poiché non ho ancora applicato alcuna larghezza, il sito dovrebbe ridimensionarsi su schermi più piccoli, ma non lo è perché lo smartphone lo visualizza come se fosse largo 960 px. La prima cosa da fare è dire agli smartphone di visualizzare il sito alla larghezza effettiva dello schermo.
Per dire agli smartphone di comportarsi bene per quanto riguarda la larghezza dello schermo, aggiungo una linea nel sezione in header.php, come segue:
In questo modo gli smartphone visualizzano la pagina alla larghezza dello schermo del dispositivo invece di creare una vista panoramica 960px ampia, che è il comportamento predefinito.
Ora il tema appare come questo su un piccolo schermo:
Se hai creato dei fogli di stile reattivi prima ma non quelli di Mobile First, questa sarà una piccola rivelazione. Ricorda tutto lo stile extra che hai aggiunto alle tue query multimediali per i piccoli schermi? Avrai bisogno di pochissimo, poiché una pagina con uno stile di layout minimale ha già un aspetto migliore sui dispositivi mobili rispetto a quella sul desktop, come puoi vedere da questo screenshot, scattato a 1024 px di larghezza:
Ma ho ancora bisogno di aggiungere uno stile di layout per schermi di piccole dimensioni, che è il prossimo passo.
Inizierò aggiungendo alcune larghezze e float per gli elementi principali, per garantire che si estendano sullo schermo. Aggiungo alcune larghezze e un clear: both dichiarazione agli elementi pertinenti:
intestazione, nav.main, .container, .content, .sidebar, footer width: 100%; chiaro: entrambi;
Quindi, per evitare che il design si appiattisca nel piccolo schermo, aggiungo il padding ad alcuni elementi:
header, nav.main, .container, footer padding: 10px;
Nota che questi sono gli unici valori orizzontali che definirò in pixel, e lo faccio perché non voglio che il padding diventi troppo grande quando le dimensioni dello schermo aumentano.
Ora il sito sembra meno affollato e gli elementi principali sono visualizzati l'uno sotto l'altro:
Quindi sistemo le aree del widget e migliorano la navigazione.
La navigazione ha bisogno di estendere la larghezza dello schermo e mi piacerebbe centrare ogni voce di menu, quindi aggiungerò alcuni stili per il menu:
nav.main background: # 3394bf; overflow: auto; allineamento del testo: centro;
Questo mi dà un menu molto più elegante:
Le aree del widget sono tutte abbastanza vicine tra loro ed è difficile vedere dove finisce e ne inizia un altro. Aggiungerò alcuni bordi e padding per rispondere a questo:
.sidebar .widget padding: 10px 0; border-top: 1px solid # 3394bf;
Successivamente, i widget del piè di pagina. Farò qualcosa di simile anche a loro:
footer .widget padding: 10px 0; border-top: 1px solid #fff;
Ciò aggiunge una certa separazione tra i miei widget:
Ora ho un layout semplice per il mio tema su schermi piccoli, con alcuni colori, bordi, margini e padding per aiutare le cose insieme. Non aggiungerò altro stile in quanto potrebbe rallentare il tema sui dispositivi mobili e non credo sia sempre necessario su schermi piccoli. Quindi il prossimo passo è iniziare a creare le query multimediali.
Per questo tema selezionerò tre dimensioni dello schermo aggiuntive:
Potresti aver notato che le mie domande sui media non sono tutte basate sulla larghezza di un dispositivo specifico. Questo perché con l'espansione della gamma di dispositivi e delle larghezze dello schermo, il targeting di dispositivi specifici diventa meno affidabile rispetto all'impostazione di query multimediali nel punto in cui il layout ne trae vantaggio. Ho testato il layout ridimensionando la finestra del mio browser e a 600px di larghezza sembra che questo:
A mio avviso, il design sembra sbagliato a questa larghezza e può beneficiare di alcune modifiche al layout.
Quindi, comincio aggiungendo le mie query multimediali alla fine del foglio di stile:
/ * tablet - verticale * / @ media screen e (min-width: 600px) / * tablets - orizzontale * / @ media screen e (min-width: 800px) / * desktop * / @media screen e ( min-width: 1025px)
Nota che ho usato min-width, non larghezza massima come faresti se prima stavi scrivendo sul desktop e scrivendo le query multimediali per schermi più piccoli.
Successivamente passerò allo styling per i dispositivi tablet.
Voglio migliorare il mio layout per utilizzare meglio lo spazio dello schermo su questi schermi più grandi, e aggiungerò anche alcuni gradienti CSS per rendere il disegno un po 'più lucido.
Innanzitutto, il layout. All'interno della mia query multimediale per schermi 600px e oltre, aggiungo:
/ * layout - aree del widget fianco a fianco * / footer overflow: auto; .sidebar .widget, footer aside float: left; larghezza: 49%; margine-destra: 2%; .sidebar .widget: nth-child (even), footer a parte: nth-child (even) margin-right: 0;
Questo aggiunge float e alcuni margini per fare un uso migliore della larghezza dello schermo:
Ora modificherò la navigazione, poiché il layout corrente lascia molto spazio vuoto accanto a ciascun elemento e occupa molto spazio. Aggiungo il seguente stile per creare una barra di navigazione orizzontale:
/ * navigation - elementi float uno accanto all'altro * / nav.main text-align: left; padding: 0 10px; nav.main li float: left; margine: 0; nav.main li a padding: 0 20px;
Aggiungerò anche una sfumatura al menu per questa dimensione dello schermo e sopra:
nav.main, nav.main a background: # 183c5b; / * Vecchi browser * / background: -moz-linear-gradient (in alto, # 183c5b 0%, # 3394bf 100%); / * FF3.6 + * / background: -webkit-gradient (lineare, a sinistra in alto, a sinistra in basso, color-stop (0%, # 183c5b), color-stop (100%, # 3394bf)); / * Chrome, Safari4 + * / background: -webkit-linear-gradient (in alto, # 183c5b 0%, # 3394bf 100%); / * Chrome10 +, Safari5.1 + * / background: -o-linear-gradient (in alto, # 183c5b 0%, # 3394bf 100%); / * Opera 11.10+ * / background: -ms-linear-gradient (in alto, # 183c5b 0%, # 3394bf 100%); / * IE10 + * / background: gradiente lineare (in alto, # 183c5b 0%, # 3394bf 100%); / * W3C * /
A seconda dei dispositivi e dei browser scelti per il targeting, potrei omettere alcuni di questi prefissi del browser, ma li ho lasciati in altri utenti del mio tema.
Quindi, ora ho un layout migliorato per i tablet con orientamento verticale, come mostrato nello screenshot:
Sto solo facendo una modifica per gli schermi di questa larghezza: ho intenzione di spostare la barra laterale a destra del contenuto, in quanto il contenuto sembra un po 'allungato se si estende su tutto lo schermo. Per fare ciò, aggiungo quanto segue al targeting della query multimediale min-width di 800px:
.contenuto larghezza: 65%; fluttuare: a sinistra; .sidebar width: 33%; float: giusto; chiaro: giusto; .sidebar .widget width: 100%; float: none; .sidebar .widget: first-child border-top: none;
Questo fa alcune cose:
Accentsconagua
chiaro proprietà per il layoutborder-top dal primo widget, che non ne ha più bisognoIl tema ora appare come questo su un tablet in modalità orizzontale:
Se avessi costruito il mio tema reattivo in modo tradizionale, per prima cosa sul desktop, avrei lavorato prima su questo schermo, ma qui ci sto lavorando per ultimo. A questo punto avrai notato che questo rende le cose molto efficienti: nella mia esperienza, rimuovere lo stile del desktop nelle query multimediali rivolte ai dispositivi mobili richiede molto più lavoro rispetto al tweaking del mio layout mobile per desktop.
Ho intenzione di regolare il layout del piè di pagina per avere tutte e quattro le aree del widget footer una accanto all'altra e aggiungere un'immagine di sfondo all'intestazione. Questa immagine non è cruciale per il contenuto ma è lì per la decorazione, quindi sono a mio agio con il fatto che non è nel mio markup.
Innanzitutto, il layout. Oltre a regolare il layout del piè di pagina, aggiungerò a larghezza massima valore al corpo tag per evitare di allungare il layout su tutta la larghezza di schermi molto ampi:
body width: 95%; larghezza massima: 960 px; margine: 0 auto; footer aside float: left; larghezza: 23,5%; margine-destra: 2%; footer a parte: nth-child (even) margin-right: 2%; footer aside.fourth margin-right: 0;
Lo stile sopra riportato va nella query multimediale per gli schermi con a min-width di 1025px e procede come segue:
larghezza massima al corpoa parte elementi nel footer.il quarto), riduce il suo margine a 0. Ho usato deliberatamente una classe qui invece di nth-child come ho bisogno di questo per funzionare attraverso i browserQuindi, come appare il mio tema sul desktop?
Non male. Finalmente aggiungerò un'immagine di sfondo alla mia intestazione.
header background: URL (images / banner-image.jpg) senza fondo centrale; imbottitura-fondo: 210px;
Questo aggiunge la mia immagine come sfondo con un po 'di padding per permetterne uno spazio:
Il vantaggio di utilizzare questo approccio è che questa immagine verrà scaricata solo dalle macchine desktop. Poiché non si trova nello stile di base o nelle query multimediali per dispositivi più piccoli, non li rallenterà. Ci sono degli svantaggi nell'usare le immagini come sfondi, specialmente in relazione all'accessibilità, quindi è importante usare questa tecnica solo quando l'immagine è solo per il design e non fa parte del contenuto. In alternativa, avrei potuto aggiungere una versione ridotta dell'immagine nel mio markup e usare CSS per nasconderlo e visualizzare una versione più grande della stessa immagine di uno sfondo per schermi più grandi.
Ora ho un tema reattivo, Mobile First. Iniziando con piccoli schermi e lavorando fino in fondo ho ridotto la quantità di codice necessaria per creare il mio design reattivo e sono stato in grado di garantire che un'immagine grande non venga inviata ai dispositivi mobili.
Dato che più sviluppatori e proprietari di siti richiedono che i loro siti siano reattivi, essere in grado di creare temi WordPress reattivi diventerà un'abilità inestimabile. In questo tutorial ho dimostrato che non deve essere un processo oneroso e non dovrebbe richiedere troppo tempo. Naturalmente, puoi portare avanti il processo e aggiungere contenuti specifici per dispositivi mobili o stili aggiuntivi mirati a dispositivi specifici, ma è qualcosa per un altro giorno!
