In de laatste screencast hebben we die foto van iStockPhoto van de besneeuwde hut en het bos gepakt. We lieten het op de achtergrond vallen, achter het hoofdinhoudsgebied en de zijbalk van ons Photoshop-document, en het paste daar mooi in de stijl van de kopteksten van de andere delen van de site. Tussen de screencasts door heb ik ook wat tekst voor de pagina geschreven. Ik had dat graag gescreend, maar het schrijven van een kopie is een van die dingen die gewoon lang duurt en zelfs nog lastiger is dan het aanpassen van het ontwerp. We praten er wel een beetje over.
In Photoshop "verborg" ik de tekst "The Lodge" achter de bomen met een beetje ingezoomde beeldmaskering. Ik heb er geen super gedetailleerd werk van gemaakt, maar dat hoef je niet echt te doen als je bent ingezoomd en de afbeelding wordt ook op het web verkleind.
We maken speciaal voor deze pagina een uniek paginasjabloon (page-lodge.php). Met behulp van de PHP-commentaarconventie /* Template Name: The Lodge */wordt die sjabloon weergegeven in onze vervolgkeuzepagina Paginasjabloon bij het maken van een nieuwe pagina in WordPress. Dit geeft ons alle controle die we nodig hebben. We kunnen de HTML in deze sjabloon bewerken en als we een unieke CSS voor deze pagina nodig hebben, kunnen we voorwaardelijke logica gebruiken en deze koppelen in het header.php-bestand. Achteraf gezien is het logischer om het functions.php-bestand te gebruiken om unieke CSS te koppelen om de “view” (header.php) schoner te houden, maar dat is iets voor de volgende keer.
De achtergrondafbeelding voor deze koptekst zou een "Hero Graphic" worden genoemd, dat wil zeggen een grote (letterlijk en qua grootte) afbeelding die belangrijk is voor de look / feel / inhoud van de pagina. Aangezien we proberen verantwoordelijk te zijn voor de prestaties (we willen dat de site snel laadt), zouden we deze gigantische afbeelding echt niet op kleine schermen moeten presenteren. Dit is veel gemakkelijker in CSS dan in HTML. We gebruiken onze "reverso" mediaquery's (in min-widthplaats van max-width) om te zeggen "wanneer het scherm zo breed of breder is, gebruik dan deze afbeelding ... als het nog breder is, gebruik dan deze afbeelding" enzovoort. Op die manier wordt standaard alleen de kleinste afbeelding gebruikt, maar die wordt overschreven wanneer een bredere browser de pagina opvraagt. Een beetje mobiel denken daar.
Aan het einde hebben we een mooi canvas (als je wilt) om aan te werken voor alle The Lodge-pagina's.