Share
Tema clădirii este în centrul WordPress. Este tehnica pe care o utilizați pentru a construi site-uri personalizate pentru dvs. sau clienții dvs. și este o abilitate vitală pentru oricine dorește să proiecteze și să se dezvolte cu WordPress.
Din ce în ce mai multe teme WordPress sunt receptive - folosesc interogările media CSS pentru a se adapta la diferitele lățimi ale ecranului, ajustând aspectul și făcând schimbări de design și interfață pentru a face orice site creat folosind tema mai ușor de citit și interactiv pe o serie de dispozitive și dimensiunile ecranului.
În acest tutorial vă voi arăta cum să construiți o temă Mobile First WordPress, care începe cu stilul pentru cele mai mici ecrane și funcționează în sus.
În acest tutorial am de gând să ia o temă WordPress cu stil minimal și apoi să-l stil pentru a face mobil primul. Designul final va fi foarte simplu - ideea este de a acoperi blocurile de conținut și de aspect și puteți adăuga propriile dvs. bunele de design ulterior, dacă doriți.
Pentru a urma pașii din acest tutorial, veți avea nevoie de următoarele:
Presupun că deja sunteți familiarizat cu instalarea și lucrul cu WordPress. Voi lucra la o instalare WordPress la distanță
și să furnizeze linkuri pe măsură ce mă duc.
Dacă nu aveți propria temă pe care lucrați, veți avea nevoie și de codul de pornire al tutorialului. Puteți vedea tema la http://rachelmccollin.co.uk/nettuts-wpresponsive-tutorial/ și puteți descărca codul temei în diferite etape ale dezvoltării sale de la xxx [care va fi adăugat pe baza sistemului nettuts + downloads].
Mobile First este un termen care a fost creat pentru prima dată de Luke Wroblewski. Se referă la
strategie de transformare a modului în care concepem site-uri și teme pe capul său. În loc să începem cu un design desktop și apoi să îl ajustăm pentru dispozitive mobile, lucrăm în direcția opusă - începem prin proiectarea și codarea dispozitivelor mobile și apoi adăugăm ceea ce este necesar pentru ecrane mai mari. Acest lucru are câteva avantaje:
Tema de pornire are un stil minimal aplicat pentru aceasta, și nici un stil de aspect, la toate încă - care vor fi adăugate pe măsură ce lucrăm prin tutorial.
Elementele care includ tema sunt prezentate mai jos:
În prezent, tema arată astfel pe un smartphone (adică, la dimensiunea ecranului de 320 x 480 pixeli):
Deoarece nu am aplicat încă vreo lățime, site-ul ar trebui redimensionat la ecrane mai mici - dar nu pentru că telefonul inteligent o afișează ca și cum ar fi lățimea de 960 pixeli. Primul lucru pe care trebuie să-l faceți este să spuneți telefoanelor inteligente să afișeze site-ul la lățimea reală a ecranului.
Pentru a spune telefoanelor inteligente să se comporte frumos în ceea ce privește lățimea ecranului, adaug o linie în secțiune în header.php, după cum urmează:
Aceasta instruiește smartphone-urile să afișeze pagina la lățimea ecranului dispozitivului, în loc să creeze un port de vizualizare largă de 960 pixeli, care este comportamentul implicit.
Acum, tema arată astfel pe un mic ecran:
Dacă ați creat foi de stil mai receptive, dar nu Mobile First, acest lucru va fi un pic de revelație. Amintiți-vă tot ce stil suplimentar ați adăugat la interogările dvs. media pentru ecrane mici? Veți avea nevoie de foarte puține lucruri, deoarece o pagină cu aspect minim de aspect pare deja mai bună pe mobil decât pe desktop, după cum puteți vedea din această captură de ecran, realizată la o lățime de 1024 pixeli:
Dar încă mai trebuie să adaug un aspect de aspect pentru ecrane mici, care este următorul pas.
Voi începe prin adăugarea unor lățimi și plutitoare pentru elementele principale, pentru a vă asigura că se întind pe ecran. Adaug unele lățimi și a clar: ambele declarație privind elementele relevante:
header, nav.main, .container, .content, .bar, footer lățime: 100%; clar: ambele;
Apoi, pentru a evita design-ul înfățișat strâns pe ecranul mic, voi adăuga umplutura la unele elemente:
antet, nav.main, .container, footer padding: 10px;
Rețineți că acestea sunt singurele valori orizontale pe care le voi defini în pixeli și fac acest lucru pentru că nu vreau ca umplutura să devină prea mare pe măsură ce dimensiunea ecranului crește.
Acum, site-ul arată mai puțin aglomerat, iar elementele principale sunt afișate unul sub altul:
În continuare, voi ordona zonele widget și va îmbunătăți navigația.
Navigarea trebuie să se întindă pe lățimea ecranului și aș dori să centrez fiecare element de meniu, așa că voi adăuga un stil pentru meniu:
nav.main background: # 3394bf; overflow: auto; text-align: centru;
Acest lucru îmi oferă un meniu mult mai inteligent:
Zonele widget-urilor sunt foarte apropiate și este dificil să vedem unde se termină și începe un altul. Voi adauga cateva margini si padding pentru a le adresa:
.bara laterală. widget padding: 10px 0; frontieră: 1px solid # 3394bf;
Apoi, miniaturile subsolului. O sa fac si ceva asemanator cu ei:
footer .widget padding: 10px 0; frontieră: 1px solid #fff;
Acest lucru adaugă o anumită separare între widget-urile mele:
Acum am un aspect simplu pentru tema mea pe ecrane mici, cu unele culori, margini, margini si padding pentru a ajuta lucrurile de-a lungul. Nu voi adăuga niciun stil suplimentar aici, deoarece ar putea încetini tema pe dispozitive mobile și nu cred că este întotdeauna necesar pe ecrane mici. Deci, următorul pas este să începeți să creați interogări media.
Pentru această temă voi viza trei dimensiuni suplimentare ale ecranului:
S-ar putea să fi văzut că interogările mele media nu se bazează pe lățimea unui anumit dispozitiv. Acest lucru se datorează faptului că, deoarece gama de dispozitive și lățimea ecranului se extinde, direcționarea dispozitivelor specifice devine mai puțin fiabilă decât setarea interogărilor media în punctul în care aspectul beneficiază de acestea. Am testat aspectul prin redimensionarea ferestrei browserului meu și la lățimea de 600px arată astfel:
Din punctul meu de vedere, designul pare a fi greșit la această lățime și poate beneficia de unele modificări de aspect.
Deci, încep prin adăugarea interogărilor mele media la sfârșitul foii de stil:
/ * tablete - ecran portret * / @media și (min-width: 600px) / * tablete - peisaj * / @media și ecran (min-width: 800px) min-width: 1025px)
Rețineți că am folosit min lățime, nu lățimea maximă așa cum ați face dacă ați fi primul stil pe desktop și ați scris interogări media pentru ecrane mai mici.
Înainte voi trece la stilul pentru dispozitivele tablet.
Vreau să îmi îmbunătățesc aspectul pentru a utiliza mai bine spațiul de pe ecranul de pe aceste ecrane mai mari și, de asemenea, voi adăuga unele gradienți CSS pentru a face designul un pic mai lustruit.
În primul rând, aspectul. În interiorul interogării mele media pentru ecrane de 600 px și mai mari, adaug:
/ * aspectul - zonele widget-uri unul lângă altul * / footer overflow: auto; . bara laterală. Widget, subsol la o parte float: left; lățime: 49%; marginea-dreapta: 2%; sidebar .widget: nth-child (egal), subsol deoparte: nth-child (even) margin-right: 0;
Aceasta adaugă plutitoare și unele margini pentru a utiliza mai bine lățimea ecranului:
Acum voi schimba navigația, deoarece aspectul actual lasă o mulțime de spațiu gol lângă fiecare element și ocupă o mulțime de spațiu. Adăug următoarele stil pentru a crea o bară orizontală de navigare:
/ * navigare - elementele flotante unul lângă celălalt * / nav.main text-align: left; umplutură: 0 10px; nav.main li float: left; marja: 0; nav.main li a padding: 0 20px;
De asemenea, voi adăuga un gradient la meniul pentru această dimensiune a ecranului și mai sus:
nav.main, nav.main a background: # 183c5b; / * Browsere vechi * / background: -moz-linear-gradient (top, # 183c5b 0%, # 3394bf 100%); / * FF3.6 + / fundal: -webkit-gradient (liniar, stânga sus, jos stânga, stop color (0%, # 183c5b), stop color (100%, # 3394bf)); / * Chrome, Safari4 + * / fundal: -webkit-gradient linear (top, # 183c5b 0%, # 3394bf 100%); / * Chrome10 +, Safari5.1 + * / fundal: -o-gradient linear (top, # 183c5b 0%, # 3394bf 100%); / * Opera 11.10+ * / fundal: -ms-linear-gradient (top, # 183c5b 0%, # 3394bf 100%); / * IE10 + * / fundal: gradient liniar (top, # 183c5b 0%, # 3394bf 100%); / * W3C * /
În funcție de dispozitivele și browserele pe care le vizez, aș putea omite câteva dintre prefixele browserului, dar le-am lăsat înăuntru pentru alți utilizatori ai temei mele.
Deci, am acum un aspect îmbunătățit pentru tablete în orientare portret, așa cum se arată în captura de ecran:
Voi face doar o schimbare pentru ecrane de această lățime: voi muta bara laterală în dreapta conținutului, deoarece conținutul pare puțin întins dacă se întinde pe tot ecranul. Pentru a face acest lucru, adaug următoarele în direcționarea interogărilor media min lățime de 800 pixeli:
.conținut lățime: 65%; plutește la stânga; . sidebar lățime: 33%; float: dreapta; clar: drept; sidebar .widget lățime: 100%; float: nici unul; sidebar .widget: primul copil border-top: nici unul;
Acest lucru face câteva lucruri:
Accentsconagua
clar proprietate pentru aspectborder-top de la primul widget, care nu mai are nevoie de elTema arată acum pe o tabletă în modul peisaj:
Dacă aș fi construit tema mea receptivă în mod tradițional, pe desktop în primul rând, aș lucra mai întâi la această dimensiune a ecranului, dar aici lucrez cu ea ultima. S-ar putea să fi observat până acum că acest lucru face lucrurile foarte eficiente - în experiența mea, înlăturarea stilului de desktop în interogările media care vizează mobilul durează mult mai mult decât ameliorarea aspectului meu mobil pentru desktop.
Voi ajusta aspectul footerului pentru a avea toate cele patru zone widget-uri de lângă unul lângă altul și adăugați o imagine de fundal în antet. Această imagine nu este crucială pentru conținut, dar există pentru decorare, așa că mă simt confortabil cu faptul că nu este în marca mea.
În primul rând, aspectul. Pe lângă ajustarea aspectului footerului, voi adăuga a lățimea maximă valoare pentru corp pentru a evita întinderea aspectului în întreaga lățime a ecranelor foarte largi:
corp lățime: 95%; max-lățime: 960px; marja: 0 auto; subsol deoparte float: left; lățime: 23,5%; marginea-dreapta: 2%; subsol deoparte: nth-child (egal) margin-right: 2%; footer deoparte.firma margin-right: 0;
Stilul de mai sus merge în interogarea media pentru ecrane cu a min lățime de 1025 pixeli, și face următoarele:
lățimea maximă la corpdeoparte elemente în subsol.Al patrulea), reduce marja la 0. Am folosit în mod deliberat o clasă aici în loc de nth-copil pentru că am nevoie de acest lucru pentru a funcționa în browsereDeci, cum arată tema mea pe desktop??
Nu-i rău. În cele din urmă, voi adăuga o imagine de fundal în antetul meu.
header fundal: URL (imagini / banner-image.jpg) centru bottom no-repeat; padding-bottom: 210px;
Acest lucru îmi adaugă imaginea ca pe un fundal cu unele elemente de umplutură pentru a permite spațiu pentru aceasta:
Avantajul utilizării acestei abordări este că această imagine va fi descărcată numai de mașini de birou. Deoarece nu este vorba de stilul de bază sau de interogările mass-media pentru dispozitivele mai mici, nu le va încetini. Există dezavantaje în ceea ce privește utilizarea imaginilor ca fundaluri, totuși, în special în ceea ce privește accesibilitatea - deci este important să folosiți această tehnică numai atunci când imaginea este doar pentru proiectare și nu face parte din conținut. Alternativ, aș fi putut adăuga o versiune mai mică a imaginii în marcajul meu și am folosi CSS pentru a ascunde acea imagine și pentru a afișa o versiune mai mare a aceleiași imagini ca un fundal pentru ecrane mai mari.
Acum am o primă temă Mobile responsabilă. Prin a începe cu ecrane mici și de lucru meu de sus până am redus cantitatea de cod necesare pentru a crea designul meu receptiv și a fost capabil să se asigure că o imagine mare nu este trimis la dispozitivele mobile.
Pe măsură ce mai mulți dezvoltatori și proprietari de site-uri solicită ca site-urile lor să fie receptive, posibilitatea de a construi teme WordPress receptive va deveni o abilitate neprețuită. În acest tutorial am arătat că nu este nevoie să fie un proces oneros și nu ar trebui să dureze prea mult. Bineînțeles, puteți continua procesul și adăugați conținut specific pentru dispozitive mobile sau un stil suplimentar orientat către anumite dispozitive, dar asta e ceva pentru o altă zi!
