Nell'ultimo screencast abbiamo preso quella foto da iStockPhoto della capanna e della foresta innevate. L'abbiamo lasciato cadere in background, dietro l'area del contenuto principale e la barra laterale del nostro documento Photoshop e si adattava perfettamente lassù, in una sorta di stile delle intestazioni delle altre aree del sito. Tra uno screencast e l'altro, ho anche scritto una copia per la pagina. Mi sarebbe piaciuto fare uno screencast, ma scrivere una copia è una di quelle cose che richiede molto tempo ed è ancora più complicato di quanto lo sia il tweaking del design. Ne parliamo un po 'però.
In Photoshop, ho "nascosto" il testo "The Lodge" dietro gli alberi con un mascheramento dell'immagine leggermente ingrandito. Non ho fatto un lavoro super dettagliato, ma non devi farlo quando sei ingrandito e l'immagine verrà ridimensionata anche sul web.
Creiamo un modello di pagina unico solo per questa pagina (page-lodge.php). Utilizzando la convenzione di commento PHP, /* Template Name: The Lodge */quel modello viene visualizzato nella nostra pagina a discesa Modello di pagina quando si crea una nuova pagina in WordPress. Questo ci dà tutto il controllo di cui abbiamo bisogno. Possiamo modificare l'HTML in questo modello, e se abbiamo bisogno di CSS univoci per questa pagina, possiamo usare la logica condizionale e collegarlo nel file header.php. In retrospettiva, ha più senso usare il file functions.php per collegare CSS univoci per mantenere la "vista" (header.php) più pulita, ma è qualcosa per la prossima volta.
L'immagine di sfondo per questa intestazione sarebbe chiamata "Grafica eroe", ovvero una grafica grande (letteralmente e in termini di dimensioni) che è importante per l'aspetto / la sensazione / il contenuto della pagina. Dal momento che stiamo cercando di essere responsabili delle prestazioni (vogliamo che il sito si carichi velocemente), non dovremmo davvero servire questa grafica gigantesca a schermi piccoli. Questo è molto più facile in CSS che in HTML. Usiamo le nostre media query "reverso" ( min-widthinvece di max-width) per dire "quando lo schermo è così ampio o più largo, usa questo grafico ... quando è ancora più largo, usa questo grafico" e così via. In questo modo per impostazione predefinita viene utilizzata solo l'immagine più piccola, ma questa viene sovrascritta quando un browser più ampio richiede la pagina. Un po 'di pensiero mobile-first lì.
Alla fine abbiamo una bella tela (se vuoi) su cui lavorare per tutte le pagine di The Lodge.