De sidste resterende overskrifter er kommet ind! Vi kan nu afslutte dem og få alle vores tilpassede overskrifter udført. I denne screencast arbejder vi på de brugerdefinerede overskrifter til demo-sektionen udført af John Neiner.
Interessant nok var John den eneste illustrator, der leverede kunstværket i Illustrator. Det er rart for os i dette tilfælde, fordi vi kan skalere det op til den størrelse, vi har brug for i fuld kvalitet. Set i bakspejlet skulle vi sandsynligvis have efterladt den vektor (som SVG) og måske brugt en raster-reserve. Men i denne screencast undersøger vi de forskellige muligheder for rasterbesparelse og ender med at gå med JPG.webp.
Der var en vis gemt forvirring, hvor jeg ikke kunne finde den gemte fil, fordi jeg ledte efter det forkerte navn. Virkelig verden DUH situation.
Vi hopper derefter ind i WordPress og gentager vores proces for at få skabeloner klar til stil. Vi sørger for, at demosiderne indlæser en speciel CSS-fil kun til dem. Det betyder at tilføje logik til vores header.php-fil ( is_page_template()). Vi finder den korrekte skabelon til demoområdet (ved hjælp af en klassisk test, hvor vi foretager en åbenlys ændring af skabelonen og ser den afspejles på det rigtige sted.
Vi fjerner alt det gamle affald fra denne skabelon og bringer det op til vores nye stil. Vi skriver lidt markering, der er nødvendig for at siden skal være i et gitter og have et headerområde bare til denne nye brugerdefinerede header og alt det der.
Vi bruger i sidste ende vores brugerdefinerede headergrafik som baggrundsbillede til et indpakningselement med tilstrækkelig polstring øverst (procentvis baseret) til at passe til grafikken øverst (størrelse til at passe). Vi lægger endda en gradient bag billedet, der falmer fra den dybe grønne til den sorte, så det ser ud som om du bliver dybere i havet, når du ruller ned.
Mere arbejde at gøre på denne side, men vi fik overskriften færdig og skabelonen i god form!