I den senaste screencasten hakade vi det fotot från iStockPhoto av den snöiga stugan och skogen. Vi släppte det i bakgrunden, bakom huvudinnehållsområdet och sidofältet i vårt Photoshop-dokument och det passade snyggt där uppe, i stil med rubrikerna på de andra områdena på webbplatsen. Mellan screencasts skrev jag också upp en kopia till sidan. Jag skulle ha velat screencast det, men att skriva kopia är en av de saker som bara tar lång tid och är ännu finare än design tweaking är. Vi pratar dock lite om det.
I Photoshop "gömde" jag texten "The Lodge" bakom träden med lite inzoomad bildmaskering. Jag gjorde inte ett väldigt detaljerat jobb med det, men det behöver du inte riktigt när du zoomar in och bilden kommer också att minskas på webben.
Vi skapar en unik sidmall bara för den här sidan (page-lodge.php). Med hjälp av PHP-kommentarkonventionen /* Template Name: The Lodge */visas den mallen i rullgardinssidan Sidmall när du skapar en ny sida i WordPress. Detta ger oss all kontroll vi behöver. Vi kan redigera HTML i den här mallen, och om vi behöver unik CSS för den här sidan kan vi använda villkorlig logik och länka den i header.php-filen. I efterhand är det mer meningsfullt att använda funktioner.php-filen för att länka upp unika CSS för att hålla “view” (header.php) renare, men det är något för nästa gång.
Bakgrundsgrafiken för den här rubriken skulle kallas en "Hero Graphic" - det vill säga en stor (bokstavligt och storleksmässigt) grafik som är viktig för utseendet / känslan / innehållet på sidan. Eftersom vi försöker vara ansvariga för prestanda (vi vill att webbplatsen ska laddas snabbt) borde vi verkligen inte betjäna denna gigantiska grafik till små skärmar. Detta är mycket lättare i CSS än i HTML. Vi använder våra "reverso" -mediefrågor ( min-widthistället för max-width) för att säga "när skärmen är så bred eller bredare, använd den här bilden ... när den är ännu bredare, använd den här bilden" och så vidare. På det sättet används som standard endast den minsta bilden, men den åsidosätts när en bredare webbläsare begär sidan. Lite mobil-först tänkande där.
I slutet har vi en fin duk (om du vill) att arbeta på för alla The Lodge-sidor.