Στο τελευταίο σενάριο τραβήξαμε αυτή τη φωτογραφία από το iStockPhoto της χιονισμένης καμπίνας και του δάσους. Το ρίξαμε στο παρασκήνιο, πίσω από την κύρια περιοχή περιεχομένου και την πλαϊνή γραμμή του εγγράφου Photoshop και ταιριάζει όμορφα εκεί, στο είδος του στυλ των κεφαλίδων των άλλων περιοχών του ιστότοπου. Μεταξύ των προβολών, έγραψα και ένα αντίγραφο για τη σελίδα. Θα ήθελα να το κάνω αυτό, αλλά η σύνταξη αντιγράφου είναι ένα από αυτά τα πράγματα που χρειάζονται πολύ καιρό και είναι ακόμη πιο περίτεχνα από ό, τι είναι η σχεδίαση. Μιλάμε για αυτό λίγο.
Στο Photoshop, «έκρυψα» το κείμενο «The Lodge» πίσω από τα δέντρα με λίγο μεγεθυμένη κάλυψη εικόνας. Δεν έκανα σούπερ λεπτομερή δουλειά, αλλά δεν χρειάζεται να κάνετε όταν κάνετε μεγέθυνση και η εικόνα θα μειωθεί επίσης στον Ιστό.
Δημιουργούμε ένα μοναδικό πρότυπο σελίδας μόνο για αυτήν τη σελίδα (page-lodge.php). Χρησιμοποιώντας τη σύμβαση σχολίων PHP /* Template Name: The Lodge */τότε αυτό το πρότυπο εμφανίζεται στην αναπτυσσόμενη σελίδα Πρότυπο σελίδας κατά τη δημιουργία μιας νέας σελίδας στο WordPress. Αυτό μας δίνει όλο τον έλεγχο που χρειαζόμαστε. Μπορούμε να επεξεργαστούμε το HTML σε αυτό το πρότυπο και αν χρειαζόμαστε μοναδικό CSS για αυτήν τη σελίδα, μπορούμε να χρησιμοποιήσουμε τη λογική υπό όρους και να το συνδέσουμε στο αρχείο header.php. Αναδρομικά, είναι πιο λογικό να χρησιμοποιήσετε το αρχείο functions.php για να συνδέσετε μοναδικό CSS για να διατηρήσετε την "προβολή" (header.php) καθαρότερη, αλλά αυτό είναι κάτι για την επόμενη φορά.
Το γραφικό φόντου για αυτήν την κεφαλίδα θα ονομάζεται "Hero Graphic" - δηλαδή, ένα μεγάλο (κυριολεκτικά και μέγεθος) γραφικό που είναι σημαντικό για την εμφάνιση / αίσθηση / περιεχόμενο της σελίδας. Δεδομένου ότι προσπαθούμε να είμαστε υπεύθυνοι για την απόδοση (θέλουμε ο ιστότοπος να φορτώνει γρήγορα), πραγματικά δεν πρέπει να προβάλλουμε αυτό το γιγαντιαίο γραφικό σε μικρές οθόνες. Αυτό είναι πολύ πιο εύκολο σε CSS από ότι σε HTML. Χρησιμοποιούμε τα "αντίστροφα" ερωτήματα πολυμέσων ( min-widthαντί max-width) για να πούμε "όταν η οθόνη είναι τόσο μεγάλη ή ευρύτερη, χρησιμοποιήστε αυτό το γραφικό ... όταν είναι ακόμη ευρύτερο, χρησιμοποιήστε αυτό το γραφικό" και ούτω καθεξής. Με αυτόν τον τρόπο από προεπιλογή χρησιμοποιείται μόνο η μικρότερη εικόνα, αλλά αυτό παρακάμπτεται όταν ένα ευρύτερο πρόγραμμα περιήγησης ζητά τη σελίδα. Λίγο σκέψης για κινητά εκεί.
Μέχρι το τέλος έχουμε έναν ωραίο καμβά (αν θέλετε) για να δουλέψουμε για όλες τις σελίδες του The Lodge.