Share
Temabygning er hjertet av WordPress. Det er teknikken du bruker til å bygge skreddersydde nettsteder for deg selv eller dine kunder, og det er en viktig ferdighet for alle som ønsker å designe og utvikle seg med WordPress.
Flere og flere WordPress-temaer er nå lydhør - de bruker CSS-spørringer for å tilpasse seg forskjellige skjermbredder, justere oppsettet og lage design og grensesnittendringer for å gjøre ethvert nettsted opprettet ved hjelp av temaet lettere å lese og samhandle med på en rekke enheter og skjermstørrelser.
I denne opplæringen skal jeg vise deg hvordan du bygger et Mobile First WordPress-tema, som starter med styling for de minste skjermene og fungerer oppover.
I denne opplæringen skal jeg ta et WordPress-tema med minimal styling og deretter stil den for å gjøre det mobil først. Den endelige utformingen vil bli veldig enkel - ideen er å dekke byggeblokkene i innholdet og utformingen, og du kan legge til dine egne designgodisetter etterpå hvis du vil.
For å følge trinnene i denne opplæringen trenger du følgende:
Jeg antar at du allerede er kjent med å installere og jobbe med WordPress. Jeg skal jobbe på en ekstern WordPress-installasjon
og gi lenker som jeg går med.
Med mindre du har ditt eget tema du jobber med, trenger du også startkoden for opplæringen. Du kan se temaet mitt på http://rachelmccollin.co.uk/nettuts-wpresponsive-tutorial/ og laste ned koden for temaet på ulike stadier av utviklingen fra xxx [bli lagt ut basert på nettnøtter + nedlastningssystem].
Mobile First er et begrep som først ble laget av Luke Wroblewski. Det refererer til
strategi for å gjøre måten vi designer nettsteder og temaer på hodet. I stedet for å starte med en desktop design og deretter justere den for mobile enheter, jobber vi i den andre retningen - vi begynner med å designe og kode for mobile enheter og deretter legge til det som trengs for større skjermer. Dette har noen fordeler:
Starttemaet har minimal styling påført det, og ingen layout styling i det hele tatt - som vil bli lagt til når vi jobber gjennom opplæringen.
Elementene som temaet inneholder er vist nedenfor:
For tiden ser temaet ut på dette på en smarttelefon (det vil si 320 x 480 px skjermstørrelse):
Siden jeg ikke har brukt bredder ennå, må nettstedet endre størrelsen på mindre skjermer - men det gjør ikke fordi smarttelefonen viser den som om den var 960px bred. Det første du må gjøre er å fortelle smarttelefoner å vise nettstedet ved den faktiske bredden på skjermen.
For å fortelle smarttelefoner å oppføre meg pent med hensyn til skjermbredde, legger jeg til en linje i delen i header.php, som følger:
Dette instruerer smarttelefoner til å vise siden på enhetens skjermbredde, i stedet for å opprette en virtuell 960px bred visningsport som er standardadferd.
Nå ser temaet ut som dette på en liten skjerm:
Hvis du har opprettet responsive stilark før og ikke Mobile First, vil dette være litt åpenbaring. Husk alt det ekstra styling du har lagt til dine medieforespørsler for små skjermer? Du trenger svært lite av det, siden en side med minimal layout styling allerede ser bedre ut på mobilen enn den gjør på skrivebordet, som du kan se fra dette skjermbildet, tatt 1024px bredt:
Men jeg trenger fortsatt å legge til noen layout styling for små skjermer, som er det neste trinnet.
Jeg starter med å legge til noen bredder og flyter for hovedelementene, for å sikre at de strekker seg over skjermen. Jeg legger til noen bredder og a klar: begge erklæring til de relevante elementene:
header, nav.main, .container, .content, .sidebar, footer bredde: 100%; klare: begge;
For å unngå at designen ser ut presset inn i den lille skjermen, legger jeg padding til noen elementer:
header, nav.main, .container, footer polstring: 10px;
Vær oppmerksom på at disse er de eneste horisontale verdiene jeg skal definere i piksler, og jeg gjør dette fordi jeg ikke vil at polstringen blir for stor ettersom skjermstørrelsen øker.
Nå ser nettstedet ut mindre overfylt og hovedelementene vises under hverandre:
Deretter rydder jeg opp widgetområdene og forbedrer navigasjonen.
Navigasjonen må spenne bredden på skjermen, og jeg vil gjerne sitte på hvert menyelement, så jeg legger til noen styling for menyen:
nav.main bakgrunn: # 3394bf; overløp: auto; tekst-align: center;
Dette gir meg en mye smartere utseende meny:
Widgetområdene er alle ganske tett sammen, og det er vanskelig å se hvor en ender og en annen begynner. Jeg legger til noen grenser og polstring for å adressere det:
.sidebar .widget polstring: 10px 0; border-top: 1px solid # 3394bf;
Deretter er bunntekstene. Jeg vil også gjøre noe som ligner på dem:
footer .widget polstring: 10px 0; border-top: 1px solid #fff;
Dette legger til litt adskillelse mellom min widgets:
Jeg har nå et enkelt oppsett for temaet mitt på små skjermer, med noen farger, grenser, marginer og polstring for å hjelpe ting sammen. Jeg vil ikke legge til noen ekstra styling her, da det kan bremse temaet ned på mobile enheter, og jeg tror ikke det er alltid nødvendig på små skjermer. Så neste skritt er å begynne å lage media spørringer.
For dette temaet skal jeg målrette tre ekstra skjermstørrelser:
Du har kanskje oppdaget at mediaforespørsmålene mine ikke er basert på bredden til en bestemt enhet. Dette skyldes at når rekkevidden av enheter og skjermbredder utvides, blir målrettingen av bestemte enheter mindre pålitelige enn å stille inn medieforespørsler på det tidspunktet layoutet drar nytte av. Jeg har testet oppsettet ved å endre størrelsen på nettleservinduet og ved 600px det ser slik ut:
Etter min mening ser designen seg feil på denne bredden, og kan ha nytte av noen layoutendringer.
Så begynner jeg med å legge til mine medieforespørsler på slutten av stilarket:
/ * tabletter - portrett * / @media skjerm og (min bredde: 600px) / * tabletter - landskap * / @media skjerm og (min bredde: 800px) / * desktops * / @media skjerm og min bredde: 1025px)
Legg merke til at jeg har brukt en minstebredde, ikke max bredde som du ville hvis du stylte skrivebordet først og skriver medieforespørsler for mindre skjermer.
Deretter fortsetter jeg til styling for nettbrettetheter.
Jeg vil forbedre layoutet mitt for å få bedre utnyttelse av skjermområdet på disse større skjermbildene, og jeg vil også legge til noen CSS-gradienter for å gjøre designet litt mer polert.
For det første, oppsettet. I mitt medieforespørsel for skjermer 600px og større, legger jeg til:
/ * layout - widget områder side ved side * / footer overflow: auto; .sidebar.widget, bunntekst til side float: left; bredde: 49%; margin-høyre: 2%; .sidebar .widget: nth-child (even), footer til side: nth-child (even) margin-right: 0;
Dette legger til flyter og noen marginer for å gjøre bedre bruk av skjermbredden:
Jeg skal nå endre navigasjonen, siden dagens layout gir mye tomt rom ved siden av hvert element og tar opp mye plass. Jeg legger til følgende styling for å opprette en horisontal navigasjonslinje:
/ * navigasjon - flyte elementer ved siden av hverandre * / nav.main text-align: left; polstring: 0 10px; nav.main li float: left; margin: 0; nav.main li a padding: 0 20px;
Jeg vil også legge til en gradient i menyen for denne skjermstørrelsen og over:
nav.main, nav.main a background: # 183c5b; / * Gamle nettlesere * / bakgrunn: -moz-lineær-gradient (topp, # 183c5b 0%, # 3394bf 100%); / * FF3.6 + * / bakgrunn: -webkit-gradient (lineær, venstre topp, venstre bunn, fargestopp (0%, # 183c5b), fargestopp (100%, # 3394bf)); / * Chrome, Safari4 + * / bakgrunn: -webkit-lineær-gradient (topp, # 183c5b 0%, # 3394bf 100%); / * Chrome10 +, Safari5.1 + * / bakgrunn: -o-lineær-gradient (topp, # 183c5b 0%, # 3394bf 100%); / * Opera 11.10+ * / bakgrunn: -ms-lineær-gradient (topp, # 183c5b 0%, # 3394bf 100%); / * IE10 + * / bakgrunn: lineær gradient (topp, # 183c5b 0%, # 3394bf 100%); / * W3C * /
Avhengig av enhetene og nettleserne jeg målretter mot, kan jeg utelate noen av disse nettleserprefiksene, men jeg har gitt dem inn for andre brukere av temaet mitt.
Så jeg har nå en forbedret layout for tabletter i stående orientering, som vist på skjermbildet:
Jeg skal bare gjøre en endring for skjermbilder av denne bredden: Jeg skal flytte sidefeltet til høyre for innholdet, ettersom innholdet ser litt strukket ut om det spenner over hele skjermen. For å gjøre dette, legger jeg til følgende i målrettingen for mediesøk en minstebredde på 800px:
.innhold bredde: 65%; flyte: venstre; .sidebar bredde: 33%; flyte: høyre; klare: høyre; .sidebar .widget bredde: 100%; flyte: ingen; .sidebar .widget: first-child border-top: none;
Dette gjør noen ting:
Accentsconagua
klar eiendom for oppsettetborder-top fra den første widgeten, som ikke lenger trenger detTemaet ser nå ut som dette på en tavle i liggende modus:
Hvis jeg hadde bygget mitt responsive tema på den tradisjonelle måten, skrivebordet først, ville jeg jobbe på denne skjermstørrelsen først, men her jobber jeg med det sist. Du har kanskje lagt merke til nå at dette gjør ting veldig effektive - etter min erfaring, fjerner desktop styling i medieforespørsler rettet mot mobil mye mer arbeid enn å tilpasse mobiloppsettet mitt for skrivebordet.
Jeg skal justere footer-oppsettet for å ha alle fire footer-widget-områdene ved siden av hverandre, og legge til et bakgrunnsbilde i overskriften. Dette bildet er ikke avgjørende for innholdet, men er der for dekorasjon, så jeg er komfortabel med det faktum at det ikke er i mitt oppslag.
Først, oppsettet. I tillegg til å justere footer layout, legger jeg til en max bredde verdi til kropp tag for å unngå å strekke layouten over hele bredden på svært brede skjermbilder:
kropp bredde: 95%; maksimal bredde: 960px; margin: 0 auto; bunntekst til side float: left; bredde: 23,5%; margin-høyre: 2%; footer til side: nth-child (even) margin-right: 2%; footer aside.fourth margin-right: 0;
Styling ovenfor går i medieforespørsmålet for skjermer med a en minstebredde på 1025px, og gjør følgende:
max bredde til kroppenside elementer i bunnteksten.fjerde), reduserer marginen til 0. Jeg har bevisst brukt en klasse her i stedet for NTH-barn som jeg trenger dette for å jobbe på tvers av nettlesereSå, hvordan ser temaet mitt ut på skrivebordet?
Ikke verst. Til slutt legger jeg til et bakgrunnsbilde i min overskrift.
header bakgrunn: URL (bilder / banner-image.jpg) senter nederst no-repeat; polstring bunn: 210px;
Dette legger til bildet mitt som en bakgrunn med noe polstring for å tillate plass til det:
Fordelen med å bruke denne tilnærmingen er at dette bildet bare lastes ned av stasjonære maskiner. Som det ikke er i kjernestyling eller medieforespørsler for mindre enheter, vil det ikke bremse dem ned. Det er ulemper med å bruke bilder som bakgrunn, men spesielt med hensyn til tilgjengelighet - så det er viktig å bare bruke denne teknikken når bildet er kun for design og ikke er en del av innholdet. Alternativt kunne jeg ha lagt til en mindre versjon av bildet i min oppføring og brukt CSS til å skjule det og vise en større versjon av det samme bildet som en bakgrunn for større skjermer.
Jeg har nå et responsivt, Mobile First-tema. Ved å starte med små skjermer og arbeidet meg opp, reduserte jeg mengden kode som trengs for å skape min responsive design og kunne sikre at et stort bilde ikke sendes til mobile enheter.
Som flere utviklere og nettstedseiere krever at deres nettsteder skal være lydhør, kan det være en uvurderlig ferdighet å kunne bygge responsive WordPress-temaer. I denne opplæringen har jeg vist at det ikke trenger å være en tøff prosess og bør ikke ta for lang tid. Selvfølgelig kan du ta prosessen videre og legge til mobilspesifikt innhold eller ekstra styling rettet mot bestemte enheter, men det er noe for en annen dag!
