Share
Thema-ontwikkeling is de kern van WordPress. Het is de techniek die u gebruikt om op maat gemaakte websites te bouwen voor uzelf of uw klanten en het is een essentiële vaardigheid voor iedereen die met WordPress wil ontwerpen en ontwikkelen..
Meer en meer WordPress-thema's zijn nu responsief - ze gebruiken CSS-mediaqueries om zich aan te passen aan verschillende schermbreedten, de lay-out aan te passen en ontwerp- en interface-wijzigingen aan te brengen om een site die is gemaakt met behulp van het thema, gemakkelijker leesbaar te maken en op verschillende apparaten te gebruiken schermafmetingen.
In deze tutorial laat ik je zien hoe je een Mobile First WordPress-thema maakt, dat begint met de styling voor de kleinste schermen en naar boven werkt.
In deze tutorial ga ik een WordPress-thema nemen met een minimale stijl en daarna stijl het om het eerst mobiel te maken. Het uiteindelijke ontwerp zal heel eenvoudig zijn - het idee is om de bouwstenen van de inhoud en lay-out te bedekken en je kunt later je eigen design-goodies toevoegen als je wilt.
Als u de stappen in deze zelfstudie wilt volgen, hebt u het volgende nodig:
Ik ga ervan uit dat je al bekend bent met het installeren en werken met WordPress. Ik zal werken aan een externe WordPress-installatie
en geef links naarmate ik verder ga.
Tenzij u uw eigen thema hebt waaraan u werkt, hebt u ook de startcode voor de zelfstudie nodig. Je kunt mijn thema bekijken op http://rachelmccollin.co.uk/nettuts-wpresponsive-tutorial/ en de code voor het thema downloaden in verschillende stadia van zijn ontwikkeling van xxx [toe te voegen op basis van nettuts + downloads systeem].
Mobile First is een term die voor het eerst werd bedacht door Luke Wroblewski. Het verwijst naar de
strategie om de manier waarop we websites en thema's ontwerpen op zijn kop te zetten. In plaats van te beginnen met een desktopontwerp en het vervolgens aan te passen voor mobiele apparaten, werken we in de andere richting: we beginnen met het ontwerpen en coderen van mobiele apparaten en voegen vervolgens toe wat er nodig is voor grotere schermen. Dit heeft een paar voordelen:
Het startthema heeft een minimale styling toegepast en nog helemaal geen layout-styling - die wordt toegevoegd terwijl we de tutorial doorlopen.
De elementen die het thema bevat, worden hieronder weergegeven:
Momenteel ziet het thema er zo uit op een smartphone (dat wil zeggen met een schermgrootte van 320 x 480 px):
Omdat ik nog geen breedtes heb toegepast, moet de grootte van de site worden aangepast voor kleinere schermen, maar dat komt niet omdat de smartphone het scherm weergeeft alsof het 960 pixels breed is. Het eerste wat u moet doen is smartphones vertellen om de site op de werkelijke breedte van het scherm weer te geven.
Om smartphones te vertellen dat ze zich keurig gedragen met betrekking tot de schermbreedte, voeg ik een regel toe aan de sectie in header.php, als volgt:
Dit geeft smartphones de opdracht de pagina weer te geven op de schermbreedte van het apparaat in plaats van een virtueel 960 px breed viewport te maken, wat het standaardgedrag is.
Nu ziet het thema er zo uit op een klein scherm:
Als je eerder responsieve stylesheets hebt gemaakt maar niet Mobile First, is dit een beetje een openbaring. Onthoud al die extra styling die u aan uw mediaquery's voor kleine schermen hebt toegevoegd? Je hebt er maar heel weinig van nodig, want een pagina met een minimale lay-outstijl ziet er op mobiel al beter uit dan op de desktop, zoals je kunt zien aan de hand van deze schermafbeelding, gemaakt op 1024 px breed:
Maar ik moet nog steeds een lay-outstijl toevoegen voor kleine schermen, wat de volgende stap is.
Ik begin met het toevoegen van enkele breedten en drijvers voor de belangrijkste elementen, om ervoor te zorgen dat ze over het scherm worden uitgerekt. Ik voeg wat breedte toe en a beiden opschonen verklaring aan de relevante elementen:
header, nav.main, .container, .content, .sidebar, footer width: 100%; beiden opschonen;
Om vervolgens te voorkomen dat het ontwerp in het kleine scherm wordt gedrukt, voeg ik opvulling toe aan sommige elementen:
header, nav.main, .container, footer padding: 10px;
Merk op dat dit de enige horizontale waarden zijn die ik in pixels zal definiëren, en ik doe dit omdat ik niet wil dat de opvulling te groot wordt naarmate de schermgrootte toeneemt.
Nu ziet de site er minder druk uit en worden de belangrijkste elementen onder elkaar weergegeven:
Vervolgens ruim ik de widget-gebieden op en verbeter ik de navigatie.
De navigatie moet de breedte van het scherm overspannen en ik wil elk menu-item centreren, dus ik zal wat styling voor het menu toevoegen:
nav.main background: # 3394bf; overloop: automatisch; text-align: center;
Dit geeft me een veel slimmer uitziend menu:
De widgetgebieden liggen allemaal vrij dicht bij elkaar en het is moeilijk om te zien waar het einde eindigt en het andere begint. Ik zal wat randen en opvulling toevoegen om dat aan te pakken:
.zijbalk .widget opvulling: 10px 0; border-top: 1px solid # 3394bf;
Vervolgens widet de voettekst. Ik zal ook iets dergelijks doen:
footer .widget padding: 10px 0; border-top: 1px solid #fff;
Dit voegt wat scheiding toe tussen mijn widgets:
Ik heb nu een eenvoudige lay-out voor mijn thema op kleine schermen, met enkele kleuren, randen, marges en opvulling om dingen mee te helpen. Ik zal hier geen extra styling toevoegen omdat het het thema op mobiele apparaten zou kunnen vertragen en ik geloof niet dat dit altijd op kleine schermen nodig is. Dus de volgende stap is om mediaquery's te maken.
Voor dit thema ga ik drie extra schermgroottes targeten:
U hebt mogelijk gezien dat mijn mediaquery's niet alle op de breedte van een specifiek apparaat zijn gebaseerd. De reden hiervoor is dat naarmate het bereik van apparaten en schermbreedten groter wordt, het richten op specifieke apparaten minder betrouwbaar wordt dan het instellen van mediaquery's op het punt waarop de lay-out hiervan profiteert. Ik heb de lay-out getest door het formaat van mijn browservenster aan te passen en bij 600px breed ziet het er als volgt uit:
Naar mijn mening ziet het ontwerp er verkeerd uit op deze breedte en kan het profiteren van enkele wijzigingen in de lay-out.
Dus begin ik met het toevoegen van mijn mediaquery's aan het einde van het stylesheet:
/ * tablets - portret * / @media-scherm en (min-breedte: 600px) / * tablets - landschap * / @media-scherm en (min-breedte: 800px) / * desktops * / @media-scherm en ( minimale breedte: 1025 px)
Merk op dat ik heb gebruikt min-width, niet Maximale wijdte zoals je zou doen als je eerst een bureaublad zou stylen en mediaquery's zou schrijven voor kleinere schermen.
Vervolgens ga ik verder met het stylen van tablets.
Ik wil mijn layout verbeteren om beter gebruik te maken van de schermruimte op deze grotere schermen, en ik zal ook wat CSS-gradiënten toevoegen om het ontwerp een beetje gepolijst te maken.
Ten eerste de lay-out. In mijn mediaquery voor schermen van 600px en groter, voeg ik toe:
/ * layout - widgetgebieden naast elkaar * / footer overflow: auto; .sidebar .widget, footer aside float: left; breedte: 49%; marge-recht: 2%; .sidebar .widget: nth-child (even), footer opzij: nth-child (even) margin-right: 0;
Dit voegt drijvers en enkele marges toe om de schermbreedte beter te gebruiken:
Ik ga nu de navigatie aanpassen, omdat de huidige lay-out veel lege ruimte naast elk item achterlaat en veel ruimte in beslag neemt. Ik voeg de volgende styling toe om een horizontale navigatiebalk te maken:
/ * navigatie - zweef items naast elkaar * / nav.main text-align: left; opvulling: 0 10px; nav.main li float: left; marge: 0; nav.main li a opvulling: 0 20px;
Ik voeg ook een verloop toe aan het menu voor deze schermgrootte en hoger:
nav.main, nav.main a background: # 183c5b; / * Oude browsers * / achtergrond: -moz-linear-gradient (boven, # 183c5b 0%, # 3394bf 100%); / * FF3.6 + * / achtergrond: -webkit-gradiënt (lineair, linkerbovenkant, linkeronderkant, kleur-stop (0%, # 183c5b), kleur-stop (100%, # 3394bf)); / * Chrome, Safari4 + * / achtergrond: -webkit-lineaire gradiënt (boven, # 183c5b 0%, # 3394bf 100%); / * Chrome10 +, Safari5.1 + * / achtergrond: -o-lineaire gradiënt (boven, # 183c5b 0%, # 3394bf 100%); / * Opera 11.10+ * / achtergrond: -ms-linear-gradient (boven, # 183c5b 0%, # 3394bf 100%); / * IE10 + * / achtergrond: lineair verloop (boven, # 183c5b 0%, # 3394bf 100%); / * W3C * /
Afhankelijk van de apparaten en browsers die ik target, kan ik sommige van deze browser-prefixen weglaten, maar ik heb ze achtergelaten voor andere gebruikers van mijn thema.
Dus ik heb nu een verbeterde lay-out voor tablets in portretoriëntatie, zoals te zien in de screenshot:
Ik ga slechts één wijziging aanbrengen voor schermen met deze breedte: ik ga de zijbalk naar rechts van de inhoud verplaatsen, omdat de inhoud er enigszins uitgerekt uitziet als deze het hele scherm beslaat. Om dit te doen, voeg ik het volgende toe aan de targeting van mediaquery's min-width van 800px:
.inhoud breedte: 65%; zweven: links; .sidebar width: 33%; zweven: rechts; duidelijk: goed; .sidebar .widget width: 100%; zweven: geen; .sidebar .widget: first-child border-top: none;
Dit doet een paar dingen:
Accentsconagua
duidelijk eigendom voor de lay-outborder-top van de eerste widget, die het niet langer nodig heeftHet thema ziet er nu als volgt uit op een tablet in liggende modus:
Als ik mijn responsieve thema op de traditionele manier had opgebouwd, eerst op de desktop, zou ik eerst aan deze schermgrootte werken, maar hier werk ik als laatste mee. Het is je misschien al opgevallen dat dit de zaken heel efficiënt maakt - in mijn ervaring kost het verwijderen van bureaubladstijlen in mediaquery's gericht op mobiel veel meer dan het aanpassen van mijn mobiele lay-out voor desktops.
Ik ga de footer-opmaak aanpassen om alle widget-gebieden van vier voetteksten naast elkaar te plaatsen en een achtergrondafbeelding aan de koptekst toe te voegen. Deze afbeelding is niet cruciaal voor de inhoud, maar is er voor decoratie, dus ik ben tevreden met het feit dat het niet in mijn opmaak staat.
Eerst de lay-out. Naast het aanpassen van voettekstlay-out, zal ik een toevoegen Maximale wijdte waarde voor de lichaam label om te voorkomen dat de lay-out over de volledige breedte van zeer brede schermen wordt uitgerekt:
lichaam breedte: 95%; maximale breedte: 960 px; marge: 0 auto; footer opzij float: left; breedte: 23,5%; marge-recht: 2%; footer opzij: nth-child (even) margin-right: 2%; footer aside.fourth margin-right: 0;
De bovenstaande stijl wordt gebruikt in de mediaquery voor schermen met een min-width van 1025px, en doet het volgende:
Maximale wijdte naar het lichaamterzijde elementen in de voettekst.vierde), verkleint de marge tot 0. Ik heb hier bewust een klas gebruikt in plaats van n-kind als ik dit nodig heb om via browsers te werkenDus, hoe ziet mijn thema eruit op de desktop?
Niet slecht. Eindelijk zal ik een achtergrondafbeelding aan mijn kop toevoegen.
header background: URL (images / banner-image.jpg) center bottom no-repeat; padding-bottom: 210px;
Dit voegt mijn afbeelding toe als achtergrond met wat opvulling om ruimte toe te voegen:
Het voordeel van deze aanpak is dat deze afbeelding alleen door desktopcomputers wordt gedownload. Omdat dit niet in de kernstyling of de mediaquery's voor kleinere apparaten staat, zal het niet vertragen. Er zijn echter nadelen aan het gebruik van afbeeldingen als achtergrond, vooral met betrekking tot toegankelijkheid. Het is dus belangrijk om deze techniek alleen te gebruiken wanneer de afbeelding alleen voor ontwerp is en geen deel uitmaakt van de inhoud. Als alternatief zou ik een kleinere versie van de afbeelding in mijn markup en gebruikte CSS hebben toegevoegd om die te verbergen en een grotere versie van dezelfde afbeelding als achtergrond voor grotere schermen weergeven.
Ik heb nu een responsief, mobiel eerste thema. Door te beginnen met kleine schermen en mijn weg naar boven te werken, heb ik de hoeveelheid code verminderd die nodig was om mijn responsieve ontwerp te maken en was ik in staat om ervoor te zorgen dat er geen grote afbeelding naar mobiele apparaten wordt verzonden.
Naarmate meer ontwikkelaars en site-eigenaren willen dat hun sites responsief zijn, zal het kunnen ontwikkelen van responsieve WordPress-thema's een onschatbare vaardigheid worden. In deze tutorial heb ik laten zien dat het geen lastig proces hoeft te zijn en niet te lang moet duren. Natuurlijk kunt u het proces verder nemen en mobielspecifieke inhoud toevoegen of extra styling op specifieke apparaten richten, maar dat is iets voor een andere dag!
