Lors du dernier screencast, nous avons récupéré cette photo sur iStockPhoto de la cabane enneigée et de la forêt. Nous l'avons laissé en arrière-plan, derrière la zone de contenu principale et la barre latérale de notre document Photoshop et il s'intègre parfaitement là-haut, dans le style des en-têtes des autres zones du site. Entre les captures d'écran, j'ai également rédigé une copie de la page. J'aurais aimé faire un screencast, mais l'écriture d'une copie est l'une de ces choses qui prend juste beaucoup de temps et qui est encore plus capricieuse que la modification de la conception. Nous en parlons un peu cependant.
Dans Photoshop, j'ai "caché" le texte "The Lodge" derrière les arbres avec un masquage d'image un peu zoomé. Je n'en ai pas fait un travail très détaillé, mais vous n'êtes pas vraiment obligé de le faire lorsque vous effectuez un zoom avant et l'image sera également réduite sur le Web.
Nous créons un modèle de page unique uniquement pour cette page (page-lodge.php). En utilisant la convention de commentaire PHP, /* Template Name: The Lodge */ce modèle apparaît dans notre page déroulante Modèle de page lors de la création d'une nouvelle page dans WordPress. Cela nous donne tout le contrôle dont nous avons besoin. Nous pouvons éditer le HTML dans ce modèle, et si nous avons besoin d'un CSS unique pour cette page, nous pouvons utiliser la logique conditionnelle et le lier dans le fichier header.php. Rétrospectivement, il est plus logique d'utiliser le fichier functions.php pour lier un CSS unique afin de garder la «vue» (header.php) plus propre, mais c'est quelque chose pour la prochaine fois.
Le graphique d'arrière-plan de cet en-tête s'appellerait un «graphique de héros», c'est-à-dire un grand graphique (littéralement et en termes de taille) qui est important pour l'aspect / la sensation / le contenu de la page. Puisque nous essayons d'être responsables des performances (nous voulons que le site se charge rapidement), nous ne devrions vraiment pas servir ce graphique gigantesque sur de petits écrans. C'est beaucoup plus facile en CSS qu'en HTML. Nous utilisons nos requêtes multimédias «reverso» ( min-widthau lieu de max-width) pour dire «lorsque l'écran est aussi large ou plus large, utilisez ce graphique… quand il est encore plus large, utilisez ce graphique» et ainsi de suite. De cette façon, par défaut, seule la plus petite image est utilisée, mais elle est remplacée lorsqu'un navigateur plus large demande la page. Un peu de réflexion sur le mobile.
À la fin, nous avons une belle toile (si vous voulez) sur laquelle travailler pour toutes les pages de The Lodge.