Έφτασαν οι τελευταίες κεφαλίδες! Τώρα μπορούμε να τα ολοκληρώσουμε και να ολοκληρώσουμε όλες τις προσαρμοσμένες κεφαλίδες μας. Σε αυτό το σενάριο θα επεξεργαστούμε τις προσαρμοσμένες κεφαλίδες για την ενότητα επίδειξης που έκανε ο John Neiner
Είναι ενδιαφέρον ότι ο John ήταν ο μόνος εικονογράφος που παρείχε το έργο τέχνης στο Illustrator. Αυτό είναι ωραίο για εμάς σε αυτήν την περίπτωση επειδή μπορούμε να το κλιμακώσουμε σε ό, τι μέγεθος χρειαζόμαστε με πλήρη ποιότητα. Αναδρομικά, πιθανότατα θα έπρεπε να το αφήσαμε διανύσματος (ως SVG) και ίσως χρησιμοποιήσαμε ένα raster fallback. Αλλά σε αυτό το screencast διερευνούμε τις διάφορες επιλογές εξοικονόμησης ράστερ και καταλήγουμε με JPG.webp.
Υπήρχε κάποια σύγχυση αποθήκευσης όπου δεν μπορούσα να βρω το αποθηκευμένο αρχείο επειδή έψαχνα για λάθος όνομα. Πραγματική κατάσταση DUH.
Στη συνέχεια, μεταβαίνουμε στο WordPress και επαναλαμβάνουμε τη διαδικασία προετοιμασίας προτύπων για στυλ. Διασφαλίζουμε ότι οι σελίδες επίδειξης φορτώνουν μόνο ένα ειδικό αρχείο CSS. Αυτό σημαίνει προσθήκη λογικής στο αρχείο header.php ( is_page_template()). Βρίσκουμε το σωστό πρότυπο για την περιοχή επιδείξεων (χρησιμοποιώντας μια κλασική δοκιμή όπου κάνουμε μια προφανή αλλαγή στο πρότυπο και το βλέπουμε να αντικατοπτρίζεται στον πραγματικό ιστότοπο.
Αφαιρούμε όλα τα παλιά σκουπίδια από αυτό το πρότυπο και τα φέρνουμε στο νέο μας στυλ. Γράφουμε λίγο σήμανση που απαιτείται για να υπάρχει η σελίδα σε πλέγμα και να υπάρχει περιοχή κεφαλίδας μόνο για αυτήν τη νέα προσαρμοσμένη κεφαλίδα και όλα αυτά.
Εφαρμόζουμε τελικά το προσαρμοσμένο γραφικό κεφαλίδας μας ως εικόνα φόντου σε ένα στοιχείο περιτυλίγματος με αρκετή επένδυση στην κορυφή (με βάση το ποσοστό) για να ταιριάζει στο γραφικό πάνω (μέγεθος για να ταιριάζει). Βάζουμε ακόμη και μια κλίση πίσω από την εικόνα που ξεθωριάζει από το βαθύ πράσινο στο μαύρο, οπότε μοιάζει κάπως πιο βαθιά στον ωκεανό καθώς κάνετε κύλιση προς τα κάτω.
Περισσότερη δουλειά πρέπει να κάνουμε σε αυτήν τη σελίδα, αλλά ολοκληρώσαμε την κεφαλίδα και το πρότυπο σε καλή κατάσταση!